Widgets Javascript.Website Widget
Introduction
The Revver widget is a highly customizable tool for sharing videos from the Revver library on any web site that supports HTML and Javascript. Any collection of videos from the Revver library can be used to populate the Widget, including a user’s favorites, a manual or smart collection, a search result set, or Revver public collections.
The Javascript code should function properly in any environment that does not strip or rewrite tags or disable Javascript. Some rich text editors may have trouble with the multi-line Javascript, but this is usually rectified by removing line breaks.
Code
The code to render the Widget is exposed when a user attempts to Grab any collection of two or more videos. The default Widget code contains one JSON object containing two arguments: collection and affiliate. This is the minimum required information to render a Revver Widget featuring a collection and the ability to track affiliate revenue. It is the most typical use case.
<script type="text/Javascript" language="Javascript">
//<![CDATA[
new REVVER.widget.VideoCollection({
"collection" : 1279,
"affiliate" : "username"
});
//]]>;
</script>
If a user intends to syndicate a search resultset instead of a collection, criteria may be used instead of a collection. Criteria accepts a standard video.find object. For example, the following code could be used to search by keywords.
<script type="text/Javascript" language="Javascript">
//<![CDATA[
new REVVER.widget.VideoCollection({
"criteria" : {"keywords" : ["keyword1", "keyword2"]},
"affiliate" : "username"
});
//]]>
</script>
Multiple Widgets
You may also add multiple widgets to a single page. Note that all grab codes include a call to the main Javascript file in the first line. This call only needs to be on your page once, no matter how many widgets you place on your page. When adding more than one widget to a page, please place this part of the widget code just once, inside the <head> section of your HTML document:
Customization
The widget can be customized extensively to meet your purposes. Below are a list of parameters available.
| collection | integer | The collection number to populate the widget. Collections can be created at Revver.com or by using the Revver API. |
|---|---|---|
| criteria | object | Takes a query object with criteria available to video.find. Values in this query object must be in JSON-style formatting.
An example would be: “criteria” : {”keywords” : [”keyword1″, “keyword2″]}. |
| affiliate | string | The Revver username of the sharer. |
| flashPlayerParams | object | Parameters passed to the Revver Flash player on lightbox playback |
| onShowMovie | function | Accepts a custom Javascript function called on thumbnail click, skipping the standard lightbox viewing experience. For an example, see below |
| display | object | Sets the display properties of the widget. |
| rows | integer | Sets the number of rows |
| cols | integer | Sets the number of columns |
| title | string | Sets the title of the widget |
| logoLink | string | Sets the anchor tag of the logo on the widget and on the lightbox. |
| searchText | string | Text displayed on widget. When clicked, a lightbox search pane opens up allowing the user to filter widget results according to search term entered. |
| backarrow | string | Fully qualified URI to the back (left) arrow displayed when the widget is in horizontal mode. |
| fwdarrow | string | Fully qualified URI to the forward (right) arrow displayed when the widget is in horizontal mode. |
| uparrow | string | Fully qualified URI to the up arrow displayed when the widget is in vertical mode. |
| downarrow | string | Fully qualified URI to the down arrow displayed when the widget is in vertical mode. |
| logo | string | Fully qualified URI to the logo displayed on the widget. |
| biglogo | string | Fully qualified URI to the large logo displayed during video playback. |
| rsslogo | string | Fully qualified URI to the rss logo displayed on the widget when using a collection. |
| closebutton | string | Fully qualified URI to the close image displayed during video playback. |
| thumbWidth | integer | Width of thumbnails |
| thumbHeight | integer | Height of thumbnails |
| thumbTitleMaxLen | integer | Maximum length of the title string to be included before truncated. Defaults to 16 characters. |
| noResultsMsg | string | The error message displayed when there are no videos that match the search criteria. Especially useful if the widget has the built in search feature enabled (see criteria and searchText) |
| styleRules | object | Accepts an object with styles in JSON format for each class of DOM elements in the widget. For a full listing of stylable elements, see figure 1a below. Additionally, an empty styleRules node can be entered and styles set via CSS using class names listed below. |
Customized Display
The display argument accepts a defined set of elements to configure the Widget’s layout and design. Layout is defined with the rows, and cols elements, while several elements are available for changing the images used in the Widget. Title and searchText are available for editing the text labels that appear in the Widget.
new REVVER.widget.VideoCollection({
"display" : { "rows":1, "cols":3, "title":"Hoyven Mayven" },
"searchText" : "customize"
});
See figure 1 for a full description of all DOM elements which can be affected via styleRules. CSS customization is performed using the styleRules argument, which accepts one or many arrays in the following format:
// using display with style rules to effect CSS
new REVVER.widget.VideoCollection({
"display" : {
"styleRules": {
// Style for the containing div
"video-collection" : [{
"border" : "1px solid #ccc",
"padding" : "5px 10px 0px 10px",
"background-color" : "#fff"
}],
// Style for title at top of thumb strip
"video-collection-title" : [{
"color": "#000",
"font-family" : "tahoma",
"font-size" : "19px",
"margin" : "0px",
"padding" : "0px",
"text-align" : "center"
}],
}
"backarrow": REVVER.jsApiURL + "widget/back.gif",
"fwdarrow": REVVER.jsApiURL + "widget/forward.gif",
"logo": REVVER.jsApiURL + "widget/revver.gif",
"closebutton": REVVER.jsApiURL + "widget/close.gif"
}
});
Customize Experience
The default view experience is a lightbox overlay on top of the document. The Revver Widget does support custom event handlers to customize the play experience. If you create your own event handler, it may be passed into the Widget as a value of the onShowMovie argument.
"collection" : 593,
"affiliate" : "username",
"onShowMovie" : function(media, affiliateId) {
alert(affiliateId);
}
});
Figure 1a - styleRules arguments
This list contains all of the DOM class names that can be affected using styleRules.
// class name assigned to the containing div
"video-collection"
// class name assigned to title at top of thumb strip
"video-collection-title"
// class name assigned to td that contains the logo
"logo-area"
// class name assigned to the div that contains all components in a thumbnail (title, image, other text)
"thumb-div"
// class name assigned to the thumbnail image itself
"thumb-img"
// class name assigned to all text in a thumbnail except the title
"thumb-text"
// class name assigned to the thumbnail title
"thumb-title"
// class name assigned to the "customize" link
"customize-link"
// class name assigned to the count line, eg. '1-3 of 2350'
"count-text"
// styles the revver logo
"logo-image"
// styles the rss link
"rss-image"
// class name assigned to lightbox title
"lb-title"
// class name assigned to lightbox close icon and possible text ( a span)
"lb-close"
// class name assigned to normal lightbox text
"lb-text"
// class name assigned to owner name in lightbox
"lb-owner"
// class name assigned to keyword list in lightbox
"lb-keywords"
// class name assigned to the description of the movie in the lightbox
"lb-description"
// class name assigned to error messages
"err-msg"
// Customize-box styles
"revver-searchBox-form"
"revver-searchBox-Label"
"searchBoxField"
"radio-button"
"searchBoxBtn"
"revver-searchBox-optionLabel"
// class names assigned to navigation arrow TD's
"up-arrow-cell"
"down-arrow-cell"
"fwd-arrow-cell"
"back-arrow-cell"
Figure 1b - styleRules example
This example shows the display.styleRules argument being used to affect all possible elements.
// using display with style rules to effect CSS
new REVVER.widget.VideoCollection({
"display": {
"styleRules": {
// Style for the containing div
"video-collection": [{ "border": "1px solid #ccc",
"padding": "5px 10px 0px 10px", "background-color": "#fff" }],
// Style for title at top of thumb strip
"video-collection-title": [{ "color": "#000", "font-family": "tahoma",
"font-size": "19px", "margin": "0px",
"padding": "0px", "text-align": "center" }],
// Style for td that contains the logo
"logo-area": [{ }],
// Style for the div that contains all components in a
// thumbnail (title, image, other text)
"thumb-div": [{ "background-color": "#fff", "margin": "5px",
"border-right": "1px solid #ccc", "border-bottom": "1px solid #ccc",
"padding": "5px 10px 10px 10px" }],
// Style for the thumbnail image itself
"thumb-img": [{ "border": "1px solid #fff", "margin": "0px",
"padding": "0px" }],
// Style for all text in a thumbnail except the title
"thumb-text": [{ "display": "none" }],
// Style for the thumbnail title
"thumb-title": [{ "color": "#666", "font-family": "tahoma",
"font-size": "13px", "margin": "0px 0px 5px 0px",
"padding": "0px" }],
// Style for the "customize" link
"customize-link": [{ "color": "#02A0C3", "font-family": "tahoma",
"font-size": "11px", "margin": "0px",
"padding": "2px" }],
// Style for the count line, eg. '1-3 of 2350'
"count-text": [{ "font-family": "tahoma", "font-size": "11px",
"margin-top": "0px" }],
// styles the revver logo
"logo-image": [{ "border": "none" }],
// styles the rss link
"rss-image": [{ "display": "none", "margin-right": "10px" }],
// Style for lightbox title
"lb-title": [{ "font-family": "tahoma", "font-size": "19px" }],
// Style for lightbox close icon and possible text ( a span)
"lb-close": [{ "font-family": "tahoma", "font-size": "11px" }],
// Style for normal lightbox text
"lb-text": [{ "font-family": "tahoma", "font-size": "13px",
"margin-top": "0px", "line-height": "15px" }],
// Style for owner name in lightbox
"lb-owner": [{ "font-family": "tahoma", "font-size": "13px",
"color": "#ff3300" }],
// Style for keyword list in lightbox
"lb-keywords": [{ "font-family": "tahoma", "font-size": "13px",
"color": "#00A0C8" }],
// Style for the description of the movie in the lightbox
"lb-description": [{ "font-family": "tahoma", "font-size": "13px",
"line-height": "15px" }],
// Style for error messages
"err-msg": [{ "font-family": "tahoma", "font-size": "11px",
"color": "red" }],
// Customize-box styles
"revver-searchBox-form": [{ "font-family": "tahoma", "font-size": "13px" }],
"revver-searchBox-Label": [{ "color": "#333", "font-family": "tahoma", "font-size": "17px" }],
"searchBoxField": [{ "font-family": "tahoma", "font-size": "13px", "padding": "2px" }],
"radio-button": [{ }],
"searchBoxBtn": [{ "font-size": "11px", "width": "80px" }],
"revver-searchBox-optionLabel": [{ "font-family": "tahoma", "font-size": "13px" }],
// Styles for the navigation arrow TD's
"up-arrow-cell": [{ "cursor": "pointer" }],
"down-arrow-cell": [{ "cursor": "pointer" }],
"fwd-arrow-cell": [{ "cursor": "pointer" }],
"back-arrow-cell": [{ "cursor": "pointer" }]
},
"backarrow": REVVER.jsApiURL + "widget/back.gif",
"fwdarrow": REVVER.jsApiURL + "widget/forward.gif",
"uparrow": REVVER.jsApiURL + "widget/up.gif",
"downarrow": REVVER.jsApiURL + "widget/down.gif",
"logo": REVVER.jsApiURL + "widget/revver.gif",
"biglogo": REVVER.jsApiURL + "widget/revver-big.gif",
"rsslogo": REVVER.jsApiURL + "widget/rss.gif",
"closebutton": REVVER.jsApiURL + "widget/close.gif"
},
"criteria": {"keywords": ["paris"]},
"affiliate": "asi"
});