Step 1: Template Deployment
Configuration And Integration Of The Video SmartEmbed Code
Easily integrate IndiVideo into any web page using the SmartEmbed code. This embed code consists of a simple HTML script tag inserted where the video is designed to go within a web page. As soon as this page is loaded, the video assets are loaded from the BlueRush servers. Designed to be fully responsive, the smart embed tag will take up 100% of the available space, enabling the full control of the video appearance.
The following section will assist you in configuring the video SmartEmbed code. The SmartEmbed code can be employed as-is using default settings. However, there are a certain number of extra parameters available to customize the deployment based on specific integration requirements. For example, video Closed Captions are not displayed by default and the end-user needs to click on the CC icon within the video controller to view them. There is a parameter in the form below called (I don’t see it!!!) “Subtitles” that sets the subtitles to be displayed by default.
Each video has a unique attachment code. This code combines the video’s deployment level and project. These codes are different code for the DEV, UAT and PRODUCTION environments. The attachment code is be used for all created personalization.
Code snippet: Below is a sample of the script that needs to be implements on the host webpage to integrate the video. The true code snippet for your project can be found in the integration portion of each projects test page.
Step 2: Personalized Data
To personalize a video requires that a properly formatted JSON object be made available to the video. This personalized data, also commonly referred as “data points” or “video payload”, is essential to the video’s personalization. The video’s data points are defined during the video scripting process and production phase.
In the authoring tool, data points are connected to visual elements within the video. These elements are referred to as personalized elements. Providing a “video payload” injects personalized elements into these and creates the personalized video.
The following section explains how to work with and configure the data for a private Real-Time video deployment.
The Video JSON Payload
Find the exact representation of the JSON object required for the project in the integration section of the portal. This object is required to proceed to Step 3 of the integration. A sample JSON object is displayed below.
The following details are provided for each data point:
- Default value,
- Allowed values,
- Minimum and maximum value (if applicable),
- Amount of characters required (if applicable).
- Validating the Data Point details against the project requirements ensures that the proper values were set in the creation phase of the project.
Step 3: Data Transfer
The final step in personalizing a video is the Data Transfer. This step consists of taking the users personalized data, as defined in Step 2, and connecting it to the application, as defined in Step 1.
Two approaches to Data Transfer can be used. A project can use a combination of both or, for security reasons, could be locked to only one. These approaches are:
- Private Real-Time (PRT),
- Managed Data (Personalized URL).
Private Real-Time (PRT)
Private Real-Time (PRT) is the most secure way to personalize data. It consists of injecting data directly into the video template on the webpage being displayed to the end-user in real-time. This page can be served from behind a log-in, or made publicly available, depending on the use-case. The PRT approach is achieved using the three techniques are discussed below.
PRT Via A Global Variable
The Data Payload, defined in step 2, is defined as a global window variable called window.IndiVideoData. Once loaded, the smart embed code finds this variable and injects the data it contains into the video.
Here is a sample JSON object. The true JSON object for your project can be found in the integration section of each projects test page.
PRT Via An HTML Attribute On The Embed Code
The Data Payload, defined in step 2, can be added to the video through the script tag. By using the HTML attribute called “data-bp-IndiVideo-data” personalized data can be added into the video as a flat JSON object. The script tag also supports the “data-bp-lang” attribute allowing the control of the language of the personalized video in cases where many exist.
For this technique to work, the data must be available before the script tag is rendered into the page. This technique is good for server-side pages that have access to the user’s data. For example, post-sign-on pages served using JSP, .NET, PHP, etc.
Above is a sample of the script that needs to be implements on the host webpage to integrate the video. The true code snippet for your project can be found in the integration portion of each projects test page.
The name of the function callback can be specified by adding the attribute “data-bp-on-ready” in the embed script when the embedded video is ready to be manipulated. However, the function callback must be present on the global window object.
Next: A sample of the callback function available for use.
Managed Data (Personalized URL)
Use the Manage Data method when the personalized videos are created through a batch data load or using the REST API. In both cases, customer data must be sent to IndiVideo. This technique does not require that the client data be available in real-time as it has already been sent to IndiVideo during the data load process. The only prerequisite to display a PURL driven video is that the recipient code be defined when the video is created.
- The “Attachment Code” is a unique code to identify the current video. All personalized URLs need to include the same “Attachment Code”. The one used for the following demonstration is P-DEV-OGOFSzM6U12jKoPplQ-565. It is the one used at the DEVApproval Level. Please note that IndiVideo provides a different Attachment Code for every available environment/approval level (Development, UAT/Staging, and Production). Refer to the Setup of the Video Environment section from the Step 1: Template Deployment tab for more details.
- The “Recipient Code” is a unique code to identify the recipient of the personalized video. Each personalized URL has a different “Recipient Code”.
Each video is deployed with a default Recipient Code using the data for the 1st available test case. This allows the easy testing of the system. The default code “aAabBbcCcIVUCI0” directly opens the following URL to see the personalized video in action:
Last Update: May 7, 2021