How can I add a personalized video to my Website

Easily integrate IndiVideo into any web page using the INDIVIDEO script tag, referred to as the "SmartEmbed"

• Step 1: Template Deployment
• Step 2: Personalized Data
• Step 3: Data Transfer
  • Private Real-Time (PRT)
  • Managed Data (Personalized URL)

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 “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 used for all created personalization.

For more Smart Embed options configuration, check out the full list here.

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

Getting Started

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:

• Description,
• 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:

1. Private Real-Time (PRT),
2. 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

Here is a sample JSON object. The true JSON object for your project can be found in the integration section of each project's 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.

PRT Via The Available JavaScript API

When your data is not available on page load, you will need the JavaScript API.

The following sections will cover the “ready” event, and why and how to prevent default initiation of the video. A more complete documentation on the JavaScript API is available on Step 4: The JavaScript API on your IndiVideo project Test Page, Integration section.

What is the “ready” event

The INDIVIDEO API is not available before the execution of the “on-ready” event. The video can be initiated or interacted with anytime after this event using the JavaScript API.

Using “on-ready” callback attribute

You may assign a callback function to execute “on-ready” using the attribute data-iv-on-ready=”callbackFn”. It expects the callback function name, and passes it to INDIVIDEO’s internal “on-ready” event. Note: the function must be on the global window object / scope.

Pro-tip: only initiate the video once!

Initiating the video means that it’s getting itself ready for playback. That includes setting up all its injected data, and preparing the tailored experience the viewer will be watching and interacting with.

At default, the video will initiate promptly after its internal “on-ready” event.

However, when the data isn’t available to the video at the appropriate time, it is best to prevent it from initiating at default, and to manually control when the video initiates after the data is ready. Not doing so may lead to the video initiating more than once (i.e. once at default, then again when the data is ready).

To do so, use the attribute data-iv-auto-init=”false” to prevent the video’s default behavior. This leaves you with total control over when the video initiates.

On top: A sample SmartEmbed that could be used for the JavaScript API.
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.

1. 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 SqGGSUeJSvSkXqLVCxHd-704. It is the one used at the UAT Approval Level. Please note that IndiVideo provides a different Attachment Code for every available environments/approval levels (Development, UAT/Staging, and Production). Refer to the Setup of the Video Environment section from the Step 1: Template Deployment tab for more details.
2. 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: