Inform Player Suite: Implementation Guide
In order to embed products from the Inform Player Suite, only three things need to be added to a webpage:
- one <script> tag to enable use of the Inform Player Suite
- as many products as desired on your page using configurable <div> elements
- a short <script> block of code immediately following each configurable <div> element on the page to begin the embed process
Script Tag to Enable Use of the Inform Player Suite
The <script> tag needed is shown below:
This <script> tag must be placed before any configurable <div> elements on the page and is recommended to be placed it within the page's <head></head> section.
Configurable Div Elements
Configurable <div> elements are used to specify what type of product (along with its config) should be placed on a page. These elements are recognized by the Inform Player Suite when its class attribute when set to "inform-embed" and its config settings are set using data-* attributes; the data-type attribute, for example, specifies what type of Inform Player Suite product to embed.
The list of config settings that are recognized vary depending on what type of product is being embedded. If you visit the page describing each product type, embed code examples and demos are provided for each business use case.
As an example, below is a sample configurable <div> element (and its following short block of code needed) to embed a Single player:
The attributes that specify the config settings of configurable <div> elements are all lowercase and concatenate words using hyphens, such as the data-site-section attribute.
For convenience, these attributes are shortened from their long concatenated form into a shorter lower camel case form when describing the config setting itself, such as "siteSection".
- data-tracking-group – the "trackingGroup" config setting
- data-playlist-id – the "playlistId" config setting
- data-video-id – the "videoId" config setting
- data-type – the "type" config setting
Short Block of Code Immediately Following Each Configurable Div Element
The <script> block of code that needs to be included immediately following each configurable <div> element on the page is shown below:
This begins the embed process of the product specified using the configurable <div> element placed on the page immediately before it.
Ocassionally partners encounter issues that prevent Inform Player Suite's products from loading on a page. If this occurs, please follow the steps described below to fix the problem:
- Turn off any ad blocker plugin or extension.
- If your browser blocks popup windows, make sure popup windows are allowed for the website you are visiting.
- Remove any CSS being applied to the configurable <div> element and its contents. CSS may be inadvertantly be getting applied to the product's contents, especially if the website's CSS uses selectors that rely on an element's "id" attribute to style elements containing the configurable <div> element or make heavy use of the !important modifier.
- Verify the necessary <script> tag is on the webpage being visited along with the short block of code needed immediately following each configurable <div> element on the page.
- If the product still fails to load, place the necessary <script> tag immediately following the configurable <div> element(s) within the page's HTML (and before the short block of code needed immediately following each configurable <div> element on the page).