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}">
Info
{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}">
Info
{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>