Form Widget

Ask a viewer to fill-out a form before watching a video. For a live demo, click here.

Embedding

Embedding the Form 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 Form Widget to display a form in a popup modal that upon submission, displays and plays a video. The video is defined by the video and template options shown in this code-snippet.

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

    // Required options
    mediamanager.widget.provider("{formProvider}");
    mediamanager.widget.video("{videoID}");
    mediamanager.widget.template("{templateID}");
    mediamanager.widget.thumbnail("{thumbnailUrl}");
    mediamanager.widget.formUrl("{formUrl}");

</script>
<div id="widget-{widgetID}">
  • {widgetID}: is the ID for a given form widget, provided by the Media Manager team.
  • {formProvider}: is the name of a form provider. A list for all different providers is listed under ‘Widget Values’.
  • {videoID}: is the Media Manager Video ID for a video to play after the form has been submitted.
  • {templateID}: is the Media Manager Template ID for the template the given video has been published to.
  • {thumbnailUrl}: is the URL for a thumbnail to display. This thumbnail triggers the form to display when clicked.
  • {formUrl}: is the URL for the form to be displayed in the popup. See ‘Form URL’ section for details on how to obtain it.

Google Form Widget

Form Widget options for a google form. The example below is a non-working, stripped-down version of the embed code to represent how the form provider can be set. For a working example, please see the section ‘Production Example’.

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

    // Required options
    mediamanager.widget.provider("google");
    mediamanager.widget.video("{videoID}");
    mediamanager.widget.template("{templateID}");
    mediamanager.widget.thumbnail("{thumbnailUrl}");
    mediamanager.widget.formUrl("{formUrl}");

</script>
<div id="widget-{widgetID}">
  • {widgetID}: is the ID for a given form widget, provided by the Media Manager team.
  • {videoID}: is the Media Manager Video ID for a video to play after the form has been submitted.
  • {templateID}: is the Media Manager Template ID for the template the given video has been published to.
  • {thumbnailUrl}: is the URL for a thumbnail to display. This thumbnail triggers the form to display when clicked.
  • {formUrl}: is the URL for the form to be displayed in the popup. See ‘Form URL’ section for details on how to obtain it.

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 that. Each item in the list matches a value for an option in the widget blueprint. These are denoted by {}. Note, the values of type text are surrounded by double-quotes (“”), whereas values of type number or boolean 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={widgetID}"></script>
<script type="text/javascript">

    // Required
    mediamanager.widget.provider("{formProvider}");
    mediamanager.widget.video("{videoID}");
    mediamanager.widget.template("{templateID}");
    mediamanager.widget.thumbnail("{thumbnailUrl}");
    mediamanager.widget.facadeHtml("{facadeHtml}");
    mediamanager.widget.formUrl("{formUrl}");
    // Optional
    mediamanager.widget.formWidth("{formWidth}");
    mediamanager.widget.formHeight("{formHeight}");
    mediamanager.widget.formScrollable({scrollable});
    mediamanager.widget.playIconUrl("{playIconUrl}");
    mediamanager.widget.cookieExpiration({cookieExpireTime});

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

Widget Values

Value Name Type Default Description Example
{widgetID} Text   The ID for a Form Widget, provided by the Media Manager team. t=d41e09250f014fe2e0f1a26048be1764 or id="mediamanager-d41e09250f014fe2e0f1a26048be1764"
{formProvider} Text   Name of a form provider in this list: google. Currently there is only one supported provider. mediamanager.widget.provider("google");
{videoID} Text   The Media Manager Video ID for the video to play after the form has been submitted. mediamanager.widget.video("5673f9ba744256c94d8b456a");
{templateID} Text   The Media Manager Template ID for the template the given video has been published to. mediamanager.widget.template("53a15d3e75a295166e8b4569");
{thumbnailUrl} Text   The URL for a thumbnail to display. This thumbnail triggers the form to display when clicked. mediamanager.widget.thumbnail("https://placekitten.com/200/300")
{facadeHtml} Text   The custom HTML to display in place of a thumbnail. mediamanager.widget.facadeHtml('<span class="custom">This is custom HTML.</span>')
{formUrl} Text   The URL for the form to be displayed in the popup. See ‘Widget Form URL’ section for details on how to obtain it. mediamanager.widget.formUrl("https://docs.google.com/forms/d/1gcdeJmEAcLpJPUKCjksmDcPOxbWADD56uGcuYyHdAd4/viewform")
{formWidth} Text “400px” The width in CSS format for the form in the popup. mediamanager.widget.formWidth("200px"); or mediamanager.widget.formWidth("100%");
{formHeight} Text “600px” The height in CSS format for the form in the popup. mediamanager.widget.formHeight("200px"); or mediamanager.widget.formHeight("100%");
{scrollable} Boolean “on” Set if the form in the popup should be scrollable. mediamanager.widget.formScrollable(true); or mediamanager.widget.formScrollable(false);
{playIconUrl} Text   The URL for an optional play icon to show over the thumbnail. mediamanager.widget.playIconUrl("https://placekitten.com/50/50")
{cookieExpiration} Number 356 The number of days for a cookie to remain on the browser. This stops the form from appearing after clicking the thumbnail, if a user has already submitted a particular form. Setting the cookie expiration date to -1 from now never sets the cookie. mediamanager.widget.cookieExpiration(30) or mediamanager.widget.cookieExpiration(-1)

Production Example

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

// Required
mediamanager.widget.provider("google");
mediamanager.widget.template("53a15d3e75a295166e8b4569");
mediamanager.widget.video("5673f9ba744256c94d8b456a");
mediamanager.widget.thumbnail("https://mediamanager-thumbs.imgix.net/9a375c298492b2ab051c9db44e482e7c845ef96e56283919bf15e6b231305fe0_5272_PMI_Elanor.jpg");
mediamanager.widget.formUrl("https://docs.google.com/forms/d/1gcdeJmEAcLpJPUKCjksmDcPOxbWADD56uGcuYyHdAd4/viewform");
// Optional
mediamanager.widget.formScrollable(true);

</script>
<div id="widget-d41e09250f014fe2e0f1a26048be1764" class="widget-container"></div>