Add the Live Experience Widget Code to the DCS Application

To add the Live Experience widget to all pages in your application, you can add the Live Experience widget code to the shell Root Page.

1. In the Web Apps pane, expand Root Pages, and click shell.
2. In the shell page, click the JavaScript tab.
3. Replace define([], function() { with this REST dependency code:

   define([
     'ojs/ojcore',
     'vb/helpers/rest'
   ], function(
     oj,
     Rest
   ) {
   

4. Add this code to the PageModule prototype:

   PageModule.prototype.generateString = function(length) {
       const possibles = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
       const possiblesLen = possibles.length;
       let result = "";
       for (let i = 0; i < length; i++) {
         result += possibles.charAt(Math.floor(Math.random() * possiblesLen));
       }
       return result;
   };
    
   PageModule.prototype.lxStart = function(appPathVar, lxTenant, user) {
    
       return new Promise((resolve, reject) => {
    
         // get auth token from the VB service which queries LX auth server
         const getAuthToken = async (callback) => {
              
           // init the Service Connection using VB Rest Helper utility
           const endpointId = 'lxAuthApi/getAccessToken';
           const endpoint = Rest.get(endpointId);
    
           // set Dynamic Query Parameters
           endpoint.parameters({ "nonce": Math.floor(Math.random() * 999999), "state": this.generateString(9) });
    
           try {
             const response = await endpoint.fetch();
             callback(response.body.access_token, response.body.expires_in);
           }
           catch (error) {
             console.error(error);
             // return false up to the Action Chain
             resolve(false);
           }
         };
    
         var lxRequire = require.config({
           context: "lx",
           baseUrl: appPathVar + "resources/lxsdk/js",
           waitSeconds: 60,
           paths: {
             jquery: "../lib/jquery",
             text: "oracle.live.api",
             css: "oracle.live.api",
             "oracle.live.api": "oracle.live.api",
             "oracle.live.style": "oracle.live.style",
             "oracle.live.button": "oracle.live.api",
             "oracle.live.messages": "oracle.live.api",
             "oracle.live.sdk": "oracle.live.api"
           },
           shim: {
             jquery: {
               exports: ["jQuery", "$"]
             }
           }
         });
    
         lxRequire(["oracle.live.api"], (liveApi) => {
    
           getAuthToken((myAuthToken, myTokenExpiry) => {
    
             var email = user && user.email && user.email.length ? user.email : "[e-mail]";
             var fullName = user && user.fullName && user.fullName.length ? user.fullName : "Anonymous";
    
             // TODO: LX service properties
             liveApi.controller.service.userID = email;
    
             // TODO: update LX tenant
             liveApi.controller.service.tenantID = lxTenant;
    
             liveApi.controller.service.authToken = myAuthToken;
    
             // the callback should update the authToken property with the refreshed token
             liveApi.controller.service.authRefresh(myTokenExpiry, () => {
               getAuthToken((jwt) => { liveApi.controller.service.authToken = jwt; });
             });
    
             // set Engagement Scenario
             liveApi.controller.contextAttributes.set("appLocation", "Collaboration");
    
             // optional context attributes...
             liveApi.controller.contextAttributes.set("email", email);
             liveApi.controller.contextAttributes.set("fullName", fullName);
    
             liveApi.controller.addComponent();
    
             // return true up to the Action Chain
             resolve(true);
    
           }); //getAuthToken
    
         }); //oracle.live.api
    
       }); //Promise
    
   }; //lxStart