Smart Widget

Generate links to videos on your Media Manager templates, related to your web videos.

Embedding

Embedding the Smart Widget can be done by adding the following code snippet to your webpage. This is a pair of script elements and one div element that allow for the widget to be downloaded, configured, and displayed on your webpage.

Getting the Smart Widget to display related videos on your webpage in its most basic form is simple by using the following code.

<script src="//widget.mediamanager.io/embed?t={templateID}"></script>
<script type="text/javascript">
    // Optional configurations go here
</script>
<div id="widget-{templateID}">

Info

{templateID} - is the Media Manager Template ID from which you want to display videos.

To define the type of Smart Widget to use, enter a type. Available ones are:

related: Display related videos based on site content.
latest: Display latest videos based on the values below.
trending: Display trending videos based on the values below.

<script src="//widget.mediamanager.io/embed?t={templateID}"></script>
<script type="text/javascript">

        // Optional configurations go here
        mediamanager.widget.type("{type}");

</script>
<div id="widget-{templateID}">

Info

{type} - is the type of Smart Widget to use.
{templateID} - is the Media Manager Template ID from which you want to display videos.

To track the Smart Widget video clicks using Media Manager's Analytics Engine, you can set the name of the widget. This gets recorded as an analytics tag of key "smartwidget" with a value equal to the name set in the embed code - see example:

<script src="//widget.mediamanager.io/embed?t={templateID}"></script>
<script type="text/javascript">

    // Optional configurations go here
    mediamanager.widget.name("{widgetName}");

</script>
<div id="widget-{templateID}">

Info

{templateID} - is the Media Manager Template ID from which you want to display videos.
{widgetName} - is the value used to record Smart Widget video clicks on Media Manager's Analytics Engine.

Example

mediamanager.widget.name("my-blog-page");

To display the Smart Widget with a custom title (supports HTML), you can use the following code:

<script src="//widget.mediamanager.io/embed?t={templateID}"></script>
<script type="text/javascript">

    // Optional configurations go here
    mediamanager.widget.title("{htmlTitle}");

</script>
<div id="widget-{templateID}">

Info

{templateID} - is the Media Manager Template ID from which you want to display videos.
{htmlTitle} - is the title you want to see displayed in your widget, over the list of videos.

Example

mediamanager.widget.title("Related Videos on Awesome.org");

To filter related videos by playlist.

<script src="//widget.mediamanager.io/embed?t={templateID}"></script>
<script type="text/javascript">

    // Optional configurations...
    mediamanager.widget.playlist("{playlist}"); // media manager playlist id

</script>
<div id="widget-{templateID}"></div>

Info

{templateID} - is the Media Manager Template ID from which you want to display videos.
{playlist} - is the Media Manager Playlist ID by which you want to filter videos.

Number of Videos

A limit can be set for the maximum number of videos to display.

<script src="//widget.mediamanager.io/embed?t={templateID}"></script>
<script type="text/javascript">

    // Optional configurations go here
    mediamanager.widget.limit({numberOfVideos});

</script>
<div id="widget-{templateID}">

Info

{templateID} - is the Media Manager Template ID from which you want to display videos.
{numberOfVideos} - is the maximum number of videos to display. These should not be in double quotes ("").

Example

mediamanager.widget.limit(5);

For related videos, the Smart Widget usually grabs keywords to get related videos on your Media Manager Template by scanning the contents of your webpage. However, these can be defined explicitly using the following embed code.

<script src="//widget.mediamanager.io/embed?t={templateID}"></script>
<script type="text/javascript">

    // Optional configurations go here
    mediamanager.widget.keywords("{keywords}");

</script>
<div id="widget-{templateID}">

Info

{templateID} - is the Media Manager Template ID from which you want to display related videos.
{keywords} - is the list of keywords the Smart Widget should use to search for related contents on the page. This is instead of auto-generating a string of keywords based on the contents of your webpage. These are written out as a list of keywords separated by commas.

Example

mediamanager.widget.keywords("asia,investment,funds,bonds");

Target Elements

The widget grabs keywords based on elements on your webpage. These elements are by default, three types called: meta, h1, and h2. Any element can be specified using CSS selectors such as h1 and h2 in the examples listed. Using these CSS selectors, the widget will use their HTML contents to grab keywords. meta, however, is reserved for the text in the content attribute of the meta tag of name keywords.

<script src="//widget.mediamanager.io/embed?t={templateID}"></script>
<script type="text/javascript">

    // Optional configurations go here
    mediamanager.widget.targets("{targetElements}");

</script>
<div id="widget-{templateID}">

Info

{templateID} - is the Media Manager Template ID from which you want to display videos.
{targetElements} - is the comma separated list of target elements from which to grab keywords.

Example

mediamanager.widget.targets("h1,h2,#example-element-id,.example-element-class");

The widget can be configured using options in the following syntax: mediamanager.widget.{name}({value}), where {name} is the name and {value} the value for the option. These are each displayed in the below widget blueprint and discussed in the list below. Each item in the list below matches a value for an option in the widget blueprint below. These are denoted by {}.

Note

The values of type text are surrounded by double-quotes (""), whereas values of type number are surrounded by no quotes. Also note that none of the values will be written out with {} for a production version of the script. This can be seen in the production example at the bottom of this document.

<script src="//widget.mediamanager.io/embed?t={templateID}"></script>
<script type="text/javascript">

    // Optional configurations...
    mediamanager.widget.type("{type}"); // defaults to "related"
    mediamanager.widget.title("{htmlTitle}"); // defaults to "Related videos"
    mediamanager.widget.headerSection("{headerSection}"); // any valid HTML
    mediamanager.widget.footerSection("{footerSection}"); // any valid HTML
    mediamanager.widget.playlist("{playlist}"); // media manager playlist id
    mediamanager.widget.keywords("{keywords}"); // leave blank for keywords to be retrieved from web page content
    mediamanager.widget.targets("{targetElements}"); // "meta, h1, h2" are the default target elements
    mediamanager.widget.defaultPlaylist("{defaultPlaylist}"); // media manager playlist id
    mediamanager.widget.blacklist("{blackListedKeywords}"); // leave blank if all keywords are allowed
    mediamanager.widget.width("{width}"); // defaults to 100%
    mediamanager.widget.limit({numberOfvideos}); // defaults to 5
    mediamanager.widget.sponsoredLimit({numberOfSponsoredVideos}); // 0 displays no sponsored videos
    mediamanager.widget.clickURL("{clickURL}", true); // for a popup player, don't include a clickURL. to open in current tab, remove `, true`.

</script>

<div id="widget-{templateID}"></div>

Value Name	Type	Default	Description	Example
{type}	Text	`related`	Defines the type of the Smart Widget.	`mediamanager.widget.type("related")` or `mediamanager.widget.type("latest")`
{templateID}	Text		This is the Media Manager Template ID for the template from which you want to display related videos.	`id="widget-53a15d3e75a295166e8b4569"` and `src="//widget.mediamanager.io/related/embed?t=53a15d3e75a295166e8b4569"`
{widgetName}	Text		Records a video click from the Smart Widget on Media Manager’s Analytics Engine. These are recorded with a key of smartwidget and value equal to {widgetName}.	`mediamanager.widget.name("my-blog-page");`
{htmlTitle}	Text	`Related Videos`	The title shown in the HTML of the widget. This supports custom HTML	`mediamanager.widget.title("<h4>Related videos to this site</h4>");`
{playlist}	Text		Media Manager playlist ID from which to get the videos.	`mediamanager.widget.playlist("53a15d3e75a295166e8b4569");`
{headerSection}	Text		Custom HTML that appears at the top of the widget (before the title). HTML must be valid for it to not break the visual aspect of the widget.	`mediamanager.widget.headerSection("<div>this is the header of my widget.</div>");`
{footerSection}	Text		Custom HTML that appears at the bottom of the widget (before the title). HTML must be valid for it to not break the visual aspect of the widget.	`mediamanager.widget.footerSection("<div>this is the footer of my widget.</div>");`
{keywords}	Text		The keywords used as criteria for related videos in your Media Manager template. These need to be separated by commas. By default, if this option is left out, the keywords are automatically extracted from the webpage based on target elements. See {targetElements} in this list.	`mediamanager.widget.keywords("asia,investment,banking");`
{targetElements}	Text	`meta`,`h1`,`h2`	The elements from which to extract keywords. The `meta` element denotes the `meta` tag of name `keywords`; keywords are extracted from its `content` attribute. Any other targets can be denoted using CSS selectors. Keywords will be extracted from their HTML contents, not their attributes.	`mediamanager.widget.targets("meta,h1,h2");`
{defaultPlaylist}	Text		Videos from a Media Manager playlist to display if no videos are found.	`mediamanager.widget.defaultPlaylist("53a15d3e75a295166e8b4569");`
{blackListedKeywords}	Text		Keywords to ignore when extracted from the webpage. This is useful for general terms that don’t apply specifically to this webpage.	`mediamanager.widget.blacklist("asset, management, funds");`
{width}	Text	`"100%"`	The CSS value to use for the widget’s display element. These can be denoted as pixel values `“50px”` or percent values `“80%”`.	`mediamanager.widget.width("70%");`
{limit}	Number	`6`	The maximum number of related videos to display. This should not be surrounded by quotes.	`mediamanager.widget.limit(10);`
{numberOfSponsoredVideos}	Number	`1`	Number of sponsored videos to display. If none should be displayed, set a value of 0. Videos tagged as “RelatedWidgetFeatured” in Media Manager are treated as featured.	`mediamanager.widget.sponsoredLimit(3);`
{clickURL}	Text		The URL template to use as a link for each related video. This is denoted in the format http://example.com/video/{_id}, where {_id} is the Media Manager Video ID of a video displayed by the widget. To open the url in a new tab, add a boolean value of true to the clickURL function.	`mediamanager.widget.clickURL("http://example.com/video/{_id}");` or `mediamanager.widget.clickURL("http://example.com/video/{_id}", true);`

Production Example

<script src="//widget.mediamanager.io/embed?t=53a15d3e75a295166e8b4569"></script>
<script type="text/javascript">

    // Optional configurations
    mediamanager.widget.title("<h4>Related Videos for my Web Page</h4>");
    mediamanager.widget.width("100%");
    mediamanager.widget.limit(6);
    mediamanager.widget.sponsoredLimit(1);

</script>
<div id="widget-53a15d3e75a295166e8b4569"></div>

Smart Widget

Embedding

Basic Widget

Widget Type

Widget Name

Widget Title

Widget Playlist

Number of Videos

Widget Keywords

Target Elements

Widget Configuration

Widget Blueprint

Widget Values

Production Example