Interactive Videos interactive-videos

You can easily create interactive videos–also know as shoppable videos–that drive conversion directly from the video. Customer engagement with the video takes place in a panel alongside the video player where related service, information, or product thumbnails are scrolled into view based on what is featured in the video. Customers can select the thumbnail and be linked directly to the service, or add the item to a shopping cart for immediate purchase, or be linked to a web page for more information.

When the video ends, a visual summary of all offerings is displayed to drive a call to action. Customers have another opportunity to select the item they want. Actionable and specific experiences such as these increase customer engagements and conversions.

See also Interactive Images.

Interactive video in action interactive-video-in-action

To see an interactive, shoppable video in action, select Live Demos, scroll to the Shoppable Media heading on the page, then select the shoppable video to begin playback.

See also Use Interactive Video with Dynamic Media

Watch how interactive videos are created watch-how-interactive-videos-are-created

Watch a walkthrough on how interactive videos are created(7 minutes and 30 seconds).
(Although the video walkthrough is branded with Assets on Demand, the principles and steps still apply to Interactive Video in Adobe Experience Manager Assets.)

Adobe Customer Success Webinar adobe-customer-success-webinar

The Use Interactive Video, Link Sharing, and YouTube sharing in Experience Manager Assets webinar teaches you how to use interactive video and other features to tie conversion driven events into your video marketing content.

Quick Start: Interactive Videos quick-start-interactive-videos

The following step-by-step workflow description is designed to help you get up and running quickly with interactive videos in Dynamic Media.

Look for the Example heading within some of the Quick Start tasks. It contains a brief tutorial that is based on this starting demo web page that does not have interactivity added to it yet.

The Examples help to illustrate the steps of integrating interactive videos on your own website.

When you finish the tutorial in the last Example section, your final demo web page with the fully integrated interactive video appears this way.

Interactive video steps:

(Optional) Identify Quickview variables optional-identifying-quickview-variables

Start by identifying dynamic variables used by your existing Quickview implementation so that you can map product thumbnails to their corresponding product Quickview during the interactive video creation process.

When you add time segments to a video, you assign a SKU (Stock Keeping Unit) and any additional variables to each thumbnail you add to a segment. Such variables are used later to display the right Quickview product.

It is important to properly identify what variables are required to uniquely trigger a product Quickview.

Sometimes it is enough to consult with IT specialists responsible for your existing Quickview implementation. They are likely to know the minimum set of data that identifies Quickview in the system. However, it is possible to simply analyze the existing behavior of the front-end code.

Most Quickview implementations use the following paradigm:

The approach, therefore, is to visit different areas of your existing website where Quickview is implemented. Then trigger the Quickview, and acquire the Ajax URL sent by the web page for loading the Quickview data or content.

Normally there is no need for you to use any specialized debugging tools. Modern web browsers feature web inspectors that do an adequate job. The following are a few examples of web browsers that include web inspectors:

When network monitoring is turned on in the browser, trigger the Quickview on the page.

Now find the Quickview Ajax URL in the network log and copy the recorded URL for future analysis. Usually when you trigger the Quickview there are numerous requests that are sent out to the server. Typically, the Quickview Ajax URL is one of the first in the list. It has either a complex query string portion or path, and its response MIME type is either text/html, text/xml, or text/javascript.

During this process, it is important to visit different areas of your website, with different product categories and types. The reason is that Quickview URLs have parts that are common for a given website category, but change only if you visit a different area of the website.

In the simplest case, the only variable part in the Quickview URL is the product SKU. In this case, the product SKU value is the only data piece needed for adding thumbnails to a time segment in the interactive video in Experience Manager.

However, in complex cases, the Quickview URL has different varying elements in addition to the product SKU, such as category ID, and color code. In such cases, every such element becomes a separate variable in the thumbnail data definition in Experience Manager.

Consider the following examples of Quickview URLs and their resulting thumbnail variables:

Example

When the above approach is applied to the Example website, you have a web page with several product thumbnails, each having a “SEE MORE” button:

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-video/john-lewis/landing-0.html

After you activate all product Quick views available on the page, you get the following list of Quickview requests made to the backend:

Looking at the server calls, product-specific information is only present in the request path. You also notice that the query string is not used at all, and there are two distinct types of data pieces involved:

Given this information, the entire Quickview URL has the following pattern:

/datafeed/$categoryId$-$SKU$.json

Based on such analysis, you conclude that you can use the following two variables for the thumbnails: categoryId and SKU.

You are now ready to upload a video and its associated thumbnail assets.

(Optional) Create an Interactive Video viewer preset optional-creating-an-interactive-video-viewer-preset

You can skip this task and continue to the next if you intend to use either of the default, out-of-the-box, Interactive Video viewer preset types Shoppable_Video_dark or Shoppable_Video_light.

When a thumbnail is selected in the authoring environment, a preview of the Quickview dialog box appears.

You can optionally create your own custom Interactive Video viewer preset. You can determine, among other things, the styling of the video player, the interactive thumbnails, and the thumbnail grid view that appears at the end of the video.

An Interactive Video viewer preset properly renders the video and all timeline segments you have added. It also uses an example default Quickview when you select a product thumbnail in Preview mode so you can test its interactivity before publishing.

After you save the viewer preset, its state is automatically set to **On **in the Viewer Presets page. This state means that it is visible in the Dynamic Media component and whenever you preview a video with it. Be sure you also manually publish your new viewer preset.

See Create a Viewer Preset to create your own Interactive Video viewer preset.

Upload a video and its associated thumbnail assets uploading-a-video-and-its-associated-thumbnail-assets

If you have already uploaded your video and thumbnail assets, proceed to Add interactivity to your video.

If you uploaded the wrong videos or images, or you want to delete uploaded videos or images that you no longer need, see Delete Assets.

To upload a video and its associated thumbnail assets:

Add interactivity to your video adding-interactivity-to-your-video

You add timeline segments to a video using the in-place visual editor on the Create Interactive Video page.

After you add timeline segments, you add thumbnail images within each segment. For each thumbnail that you add, you apply an action to it. For example, you can apply a Quickview to the thumbnail, or you can assign a hyperlink to it, or an Experience Fragment.

See Experience Fragments.

Undo and Redo options, near the upper-right corner of the page, are supported during your current creation/editing session.

After you save your interactive video, the video is immediately opened into Preview. From there, you can select an Interactive Video viewer preset and play the video to see an approximate representation of how it appears to customers.

To add interactivity to your video:

Publish interactive video assets publishing-interactive-video-assets

See Publish Assets for details on how to publish interactive video assets.

Integrate an interactive video with your website integrating-an-interactive-video-with-your-website

After you have uploaded a video, added timeline segments to it, and published the interactive video, you are now ready to add it to your existing website.

If you are an Experience Manager Sites customer, you can add the interactive video by dragging the Interactive Media component to your page. See Add Dynamic Media Assets to Pages.

If you are a standalone Experience Manager Assets customer, you can manually add the interactive video to your website as described in this section.

Example

Using the demo website as an example:

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-video/john-lewis/landing-0.html

Notice that the video embed code is standard:

<style type="text/css">
 #s7video_div.s7videoviewer{
   width:100%;
   height:auto;
 }
</style>

<script type="text/javascript" src="https://demos-pub.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/VideoViewer.js"></script>
<div id="s7video_div"></div>
<script type="text/javascript">
 var s7videoviewer = new s7viewers.VideoViewer({
  "containerId" : "s7video_div",
  "params" : {
   "serverurl" : "https://adobedemo62-h.assetsadobe.com/is/image",
   "contenturl" : "https://demos-pub.assetsadobe.com/",
   "config" : "/etc/dam/presets/viewer/Video",
   "config2": "/etc/dam/presets/analytics",
   "videoserverurl": "https://gateway-na.assetsadobe.com/DMGateway/public/demoCo",
   "posterimage": "/content/dam/marketing/shoppable-video/john-lewis/shoppable-video-john-lewis-2014.mp4",
   "asset" : "/content/dam/marketing/shoppable-video/john-lewis/shoppable-video-john-lewis-2014.mp4" }
 }).init();
</script>

Integration is as simple as removing the video embed code and replacing it with the interactive video embed code from Experience Manager. You can see the result at the following URL. While it shows an Interactive Video present on the page, it is not yet integrated with the existing Quick views:

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-video/john-lewis/landing-1.html

Integrate an interactive video with an existing Quickview integrating-an-interactive-video-with-an-existing-quickview

The last step in this process is to integrate your interactive video with an existing Quickview implementation that is used on your website. There is no solution to the integration that works for all cases. Every Quickview implementation is unique. As such, a specific approach is needed that involves the assistance of a front-end IT person.

The existing Quickview implementation normally represents a chain of inter-related actions that happen on the web page in the following order:

These calls do not represent independent public API calls which can be called by the web page logic from an arbitrary step. Instead, it is a chained call where every next step is hidden in the last phase (callback) of the previous step.

At the same time that the interactive video is replacing step 1, and partially step 2, when a user selects a thumbnail inside the interactive video, such user interaction is handled by the viewer. The viewer returns an event to the web page that contains all the thumbnail data previously added to Experience Manager.

In such an event handler, the front-end code does the following:

In addition, the Interactive Video viewer supports full screen operation mode. The user triggers Quick views by selecting a thumbnail without leaving the full screen. To achieve this functionality, you alter the front-end code so that the Quickview modal dialog box is attached to the viewer’s container. Do not add document BODY or some other web page element that is not available when the viewer is in full-screen mode. The code that performs this job listens to one more viewer callback that is sent after the viewer loads on the page.

The embed code returned by Experience Manager already has a ready-to-use event handler in place. It is commented out as seen in the following highlighted code snippet:

<style type="text/css">
 #s7interactivevideo_div.s7interactivevideoviewer{
   width:100%;
   height:auto;
 }
</style>
<script type="text/javascript" src="https://demos-pub.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/InteractiveVideoViewer.js"></script>

<div id="s7interactivevideo_div"></div>
<script type="text/javascript">
 var s7interactivevideoviewer = new s7viewers.InteractiveVideoViewer({
  "containerId" : "s7interactivevideo_div",
  "params" : {
   "serverurl" : "https://adobedemo62-h.assetsadobe.com/is/image",
   "contenturl" : "https://demos-pub.assetsadobe.com/",
   "config" : "/etc/dam/presets/viewer/Shoppable_Video_light",
   "config2": "/etc/dam/presets/analytics",
   "videoserverurl": "https://gateway-na.assetsadobe.com/DMGateway/public/demoCo",
   "interactivedata": "content/dam/_VTT/marketing/shoppable-video/john-lewis/shoppable-video-john-lewis-2014.mp4.svideo.vtt",
   "VideoPlayer.contenturl": "https://adobedemo62-h.assetsadobe.com/is/content",
   "asset" : "/content/dam/marketing/shoppable-video/john-lewis/shoppable-video-john-lewis-2014.mp4" }
 })
 /* // Example of interactive video event for quickview.
   s7interactivevideoviewer.setHandlers({
   "quickViewActivate": function(inData) {
     var sku=inData.sku; //SKU for product ID
    //To pass other parameter from the hotspot, you need to add custom parameter during the hotspot setup as parameterName=value
    loadQuickView(sku); //Replace this call with your quickview plugin
    //See your quickviewer plugin for the quickview call
    },
"initComplete":function() {
    //--- Attach quickview pop-up to viewer container so pop-up works in fullscreen mode ---
    var popup = document.getElementById('quickview_div'); // get custom quickview container
    popup.parentNode.removeChild(popup); // remove it from current DOM
    var sdkContainerId = s7interactivevideoviewer.getComponent("container").getInnerContainerId(); // get viewer container component
    var inner_container = document.getElementById(sdkContainerId);
    inner_container.appendChild(popup); //Attach custom quickview container to viewer
    }
   });
 */
 s7interactivevideoviewer.init();
</script>

So, it is only necessary to uncomment the highlighted code snippet above and replace the dummy handlers body with code that is specific to the particular web page.

There are two default callback handlers present in the standard embed code: quickViewActivate and initComplete. The quickViewActivate handler triggers when a thumbnail is selected in the viewer. Use it to integrate the viewer with Quickview activation logic. The initComplete handler triggers only one time when the viewer loads into the page. This handler is used to adjust the Quickview dialog box location in the web page DOM.

The process of constructing the Quickview URL is opposite to the process of identifying thumbnail variables covered earlier in this topic. Using the previously identified Quickview URL examples, you can see how the Quickview URL is constructed in each case:

The last step to trigger the Quickview URL and activate the Quickview panel most likely requires the assistance of a front-end IT person from your IT department. They have the knowledge to know best how to accurately trigger the Quickview implementation from the proper step, having a ready-to-use Quickview URL.

You can see how these steps are applied to the demo website to fully integrate an interactive video with the Quickview code. Earlier in this topic, the structure of the Quickview URL was identified as the following:

/datafeed/$CategoryId$-$SKU$.json

It is easy to reconstruct this URL inside the quickViewActivate handler using categoryId and sku fields available in the inData object passed to the handler by way of the viewer’s code as in the following:

var sku=inData.sku;
var categoryId=inData.categoryId;
var quickViewUrl = "datafeed/" + categoryId + "-" + sku + ".json";

The demo website is triggering the Quickview dialog box using a simple loadQuickView() function call. This function takes only one argument, which is the Quickview data URL. So the last step to integrate the interactive video is to add the following line of code to the quickViewActivate handler:

loadQuickView(quickViewUrl);

Finally, make sure that your Quickview dialog box is attached to the viewer’s container element. The embed code default provides sample steps to achieve this functionality. To obtain a reference to the viewer’s container element, you can use the following lines of code:

var sdkContainerId = s7interactivevideoviewer.getComponent("container").getInnerContainerId(); // get viewer container component
var inner_container = document.getElementById(sdkContainerId);

Where inner_container is a reference to a DIV element managed by the viewer. You want the dialog box to be a child of that DIV.

The steps to actually locate the modal dialog box element and attach it to the above container are case-specific. Again, you can seek the help from your front-end developer who is familiar with your Quickview implementation that is needed.

For the sample website, the Quickview modal dialog box is implemented as a DIV with the quickview-modal ID attached directly to the document BODY. Therefore, the code to move that dialog box to the viewer’s container is as straightforward as the following:

var sdkContainerId = s7interactivevideoviewer.getComponent("container").getInnerContainerId(); // get viewer container component
var inner_container = document.getElementById(sdkContainerId);
inner_container.appendChild(document.getElementById("quickview-modal"));

The complete source code is as follows:

<style type="text/css">
 #s7interactivevideo_div.s7interactivevideoviewer{
   width:100%;
   height:auto;
 }
</style>
<script type="text/javascript" src="https://demos-pub.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/InteractiveVideoViewer.js"></script>

<div id="s7interactivevideo_div"></div>
<script type="text/javascript">
 var s7interactivevideoviewer = new s7viewers.InteractiveVideoViewer({
  "containerId" : "s7interactivevideo_div",
  "params" : {
   "serverurl" : "https://adobedemo62-h.assetsadobe.com/is/image",
   "contenturl" : "https://demos-pub.assetsadobe.com/",
   "config" : "/etc/dam/presets/viewer/Shoppable_Video_light",
   "videoserverurl": "https://gateway-na.assetsadobe.com/DMGateway/public/demoCo",
   "interactivedata": "content/dam/_VTT/marketing/shoppable-video/john-lewis/shoppable-video-john-lewis-2014.mp4.svideo.vtt",
   "VideoPlayer.contenturl": "https://adobedemo62-h.assetsadobe.com/is/content",
   "asset" : "/content/dam/marketing/shoppable-video/john-lewis/shoppable-video-john-lewis-2014.mp4" }
 })
 // Example of interactive video event for quickview.
   s7interactivevideoviewer.setHandlers({
   "quickViewActivate": function(inData) {
     var sku=inData.sku; //SKU for product ID
     var categoryId=inData.categoryId; //categoryId
    var quickViewUrl = "datafeed/" + categoryId + "-" + sku + ".json";
    loadQuickView(quickViewUrl);
    },
   "initComplete":function() {
    //--- Attach quickview pop-up to viewer container so pop-up works in fullscreen mode ---
    var sdkContainerId = s7interactivevideoviewer.getComponent("container").getInnerContainerId(); // get viewer container component
    var inner_container = document.getElementById(sdkContainerId);
    inner_container.appendChild(document.getElementById("quickview-modal"));
    }
   });
 s7interactivevideoviewer.init();
</script>

The final demo website with the fully integrated interactive video appears like the following:

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-video/john-lewis/landing-3.html

Create custom pop-up Windows® using Quickview using-quickviews-to-create-custom-pop-ups

See Create custom pop-up Windows® using Quickview.