The JavaScript Overlay is one option for adding a Zaption lesson to a website. The Zaption player will pop up in its own modal window when the user clicks on a thumbnail. An example of this can be found on this page. Please scroll down to the video thumbnail with the Zaption logo.
Technical Requirements
In order to overlay Zaption lessons, you must have the ability to manually add JavaScript to your website. Most importantly, you need access to the footer of the page to add a line of code. This may require testing as some web tools, blogs, content management systems, and learning management systems don’t allow users to add JavaScript code. More documentation can be found on our API.
The Code
Once it has been verified that your website will accept JavaScript code, the set up process is easy! There are two lines of code. The codes can be found in the Share modal of a published lessons.
The first line of code identifies which lesson you would like to load and displays a thumbnail for the video in its own DIV. Place this line where you would like the lesson thumbnail to appear. You can display as many Zaption lessons as you like, but you will need to have a separate line of code for each. The lessons will only display if the second line of code has been added to the page footer.
The second line of code simply calls a JavaScript file from the Zaption site that plays your lesson as a full screen takeover above your existing website. This must be placed in the page footer.
<script type="text/javascript" id="zaptionEmbed" src="//www.zaption.com/js/embed.js"></script>
Analytics
All of the Analytics collected through the lesson can be accessed in the Author’s Zaption account.
Lesson Permissions
By default, lessons only require a viewer to enter their name before viewing. Pro users are able to require viewers to login before viewing the lesson. Examples of different permission levels can be found below:
Viewer Name Required: Viewer is prompted to enter only their name. This is the default for all Zaption lessons.
Login Required: Viewer must login, or create an account (name, email, password). This is a Zaption Pro feature.
Completely Open: No viewer information is needed. This is reserved for large site license clients and requires special arrangements with our developers. Scroll down to the thumbnail with the Zaption logo.
If you are interested in using this modal overlay in a WordPress site, check out this PDF.
Comments