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.

Basic Widget

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}">
  • {templateID} - is the Media Manager Template ID from which you want to display videos.

Widget Type

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}">
  • {type} - is the type of Smart Widget to use.
  • {templateID} - is the Media Manager Template ID from which you want to display videos.

Widget Name

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}">
  • {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");

Widget Title

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}">
  • {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");

Widget Playlist

To filter related videso 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>
  • {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}">
  • {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);

Widget Keywords

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}">
  • {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 (see this guide to 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}">
  • {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");

Widget Configuration

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.

Widget Blueprint

<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>

Widget Values

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}     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 CSS2 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>