Building Carousel Recommendations using the Adaptive Plugin

Overview: These instructions detail how to implement the "carousel_recs" feature on players that are using the Adaptive Plugin. The Carousel Recs plugin option generates recommendations at plugin load. If the IRIS.TV plugin is used to populate a carousel or right rail, this option can be used to populate the carousel at player load. This feature requires the IRIS.TV Adaptive Plugin Version "IRIS Adaptive v1.12.5".

Editing the plugin.js file

Like other customizations for the Adaptive Plugin, it's required to make changes to the plugin.js file that holds any player-specific requirements. Documentation for how to set that up can be found here: Custom Adaptive Plugin.

The two following changes to the plugin.js file are required for "carousel_recs":

1. The client will need to add" "carousel_recs":true to the "options" section. Here's an example of that option added to existing plugin settings:

     settings: {
       client_token: alj9890an,
       platform: videojs,
   	carousel_recs:true,
       ssl: true, 
       platform_id: 4651213, 
       player_id: player_9810, 
       start_up_next: true, 
       start_up_next_text: "UP NEXT:",
       end_up_next: true, 
       end_up_next_text: "UP NEXT:", 
     },

2. The client will need the following code to that same plugin.js file

   IrisEngine.addCallback.watch(function(data) {
               if (options.settings.carousel_recs) {
                   var iris_watch = new CustomEvent('iris_watch', {
                       detail: data
                   });
                   window.dispatchEvent(iris_watch);
               }
           });
   
           IrisEngine.addCallback.next(function(data) {
               if (options.settings.carousel_recs) {
                   var iris_next = new CustomEvent('iris_next', {
                       detail: data
                   });
                   window.dispatchEvent(iris_next);
               }
           });

Pulling Recommendations and Updating the Carousel

Once the code is implemented in the plugin.js file, the client should then code to their page to populate recommendation updates to the carousel. Here's an example of that code:

window.addEventListener('iris_watch', function (e) {
            updateCarousel("myPlayer", e.detail);
        });

        window.addEventListener('iris_next', function (e) {
            updateCarousel("myPlayer", e.detail);
        });