Link Live Experience Events to the Siebel Business Service

Create a JavaScript message handler file to capture important Live Experience events and communicate them to the Siebel simple business service.

The message handler file also adds functionality to the LX button. The Live Experience Associate Desktop creates JavaScript events for the following Live Experience events.

Live Experience Events Created by JavaScript Events

Event	Description
AgentStatusChange	The event is created whenever the associate's availability in the Live Experience Associate Desktop changes, such as log in, log out, answering a call, or marking themselves as unavailable.
StartDiagnostics	The event is created whenever the diagnostics check starts.
QueueChange	The event is created whenever the associate call queue changes state. The event includes details of the current queue status. This could be used to show a ringing icon on the screen, for example.
StartCall	The event is created whenever the associate starts a call. The event includes the context details of the call, which could be used to populate Siebel activity and contact data. The Context details are configurable in the Live Experience Admin Console, are visible in the Live Experience Associate Desktop during the call, and can include anything configured in the Live Experience client. For example, details could include call start and stop times, associate and client names, client physical and webpage or app locations, and client device details.
EndCall	The event is created whenever the associate ends a call. The event includes the context details of the call, which could be used to populate Siebel activity and contact data.

1. Create a JavaScript file called LXHandler.js.
   The following reference message handler file is only concerned with capturing StartCall and EndCall events and communicating specific information from Live Experience to the Siebel business service.

   top.addEventListener("message",handleLXMessage,false);
   function handleLXMessage(messageEvent) {
    console.log("IN LX HANDLER");
    event=messageEvent.data;
    switch(event.eventName) {
    case "QueueChange":
    console.log("HANDLE QUEUE CHANGE");
    console.log(event.eventData);
    break;
    case "StartCall":
    callDetails=event.eventData.callDetails;
    if (typeof callDetails.email != "undefined") {
    emailAddress=callDetails.email.value;
    } else {
    emailAddress="Unavailable";
    } 
    if (typeof callDetails.phone != "undefined") {
    phone=callDetails.phone.value;
    } else {
    phone="Unavailable";
    }
    console.log("HANDLE CALL START WITH EMAIL: " + emailAddress + " PHONE: " + phone);
    console.log(event.eventData);
    businessService=SiebelApp.S_App.GetService("LXHandlerService");
    inPS=SiebelApp.S_App.NewPropertySet();
    inPS.SetProperty("emailAddress", emailAddress);
    inPS.SetProperty("phone", phone);
    outPS = businessService.InvokeMethod("CallStart",inPS).childArray[0];
    break;
    case "EndCall":
    callDetails=event.eventData.callDetails;
    if (typeof callDetails.email != "undefined") {
    emailAddress=callDetails.email.value;
    } else {
    emailAddress="Unavailable";
    } 
    if (typeof callDetails.phone != "undefined") {
    phone=callDetails.phone.value;
    } else {
    phone="Unavailable";
    }
    if (typeof callDetails.appLocation != "undefined") {
    appLocation=callDetails.appLocation.value;
    } else {
    appLocation="Unavailable";
    }
    if (typeof callDetails.location != "undefined") {
    callLocation=callDetails.location.value;
    } else {
    callLocation="Unavailable";
    }
    if (typeof callDetails.appName != "undefined") {
    appName=callDetails.appName.value;
    } else {
    appName="Unavailable";
    }
    startTime = event.eventData.callStartTime;
    endTime = event.eventData.callEndTime;
    console.log("HANDLE CALL END WHICH WAS " + (endTime-startTime) + " SECONDS LONG");
    console.log(event.eventData);
    businessService=SiebelApp.S_App.GetService("LXHandlerService");
    inPS=SiebelApp.S_App.NewPropertySet();
    inPS.SetProperty("emailAddress", emailAddress);
    inPS.SetProperty("phone", phone);
    inPS.SetProperty("startTime", startTime);
    inPS.SetProperty("endTime", endTime);
    inPS.SetProperty("appLocation", appLocation);
    inPS.SetProperty("location", callLocation);
    inPS.SetProperty("appName", appName);
    outPS = businessService.InvokeMethod("CallEnd",inPS).childArray[0];
    break;
    default:
    console.log(event.eventName);
    break;
    }
    console.log(messageEvent.data.eventName);
   }
   var performResize = function(e) {
    var newWidth = e.clientX;
    // console.log("Resize Performed at " + newWidth);
    if (newWidth > window.innerWidth - 7) {
    newWidth = window.innerWidth - 7;
    // console.log("stopping at max width of " + newWidth);
    }
    if (newWidth > 1000) {
    newWidth = 1000;
    // console.log("stopping at max width of " + newWidth);
    }
    if (newWidth < 250) {
    newWidth = 250;
    // console.log("stopping at min width of " + newWidth);
    }
    document.getElementById("LXPanelContainer").style.width = newWidth + "px";
   };
   var finaliseResize = function(e) {
    console.log("Resize Finished at " + e.clientX);
    window.removeEventListener("mouseup", finaliseResize, false);
    window.removeEventListener("mousemove", performResize, false);
    document.getElementById("LXFrame").style.pointerEvents = "auto";
    // Send a resize event so that any changed Siebel views know to redraw.
    window.dispatchEvent(new Event('resize'));
   };
   var initialiseResize = function() {
    console.log("Resize Started");
    document.getElementById("LXFrame").style.pointerEvents = "none";
    window.addEventListener("mouseup", finaliseResize, false);
    window.addEventListener("mousemove", performResize, false);
   };
   window.setTimeout(createClickHandler,500);
   function createClickHandler () {
    var haveButton = $(".lx").length>0;
    var havePanel = $("#LXPanelContainer").length>0;
    var haveHandler = $("#LXResizeHandler").length>0;
    if (haveButton && havePanel && haveHandler) {
    $(".lx").on("click",function() {
    // button click handler
    $("#LXPanelContainer").toggleClass("forcehide");
    $("#LXResizeHandler").toggleClass("forcehide");
    // Send a resize event so that any changed Siebel views know to redraw.
    window.dispatchEvent(new Event('resize'));
    });
    currentSRC=$("iframe").attr('src');
    if (currentSRC=="") {
    // Determine the tenant source from logged in User attributes.
    lxTenant=SiebelApp.S_App.GetProfileAttr('Email Address');
    userName=SiebelApp.S_App.GetUserName();
    if (lxTenant.includes("@") || lxTenant=="") {
    lxTenant="oracle-internal-integration";
    }
    userName = userName + "_" + lxTenant;
    $("iframe").attr('src','https://ignite.oraclecloud.com/dae/?tenant='+lxTenant+'#embed=y'+"&ext_session="+userName);
    }
    document.getElementById("LXResizeHandler").addEventListener("mousedown", initialiseResize, false);
    } else {
    setTimeout(createClickHandler,500);
    }
   }

2. Save LXHandler.js and add it to the Siebel CRM system, register it as a Manifest File, and add it to the Siebel PLATFORM INDEPENDENT loadout with no expression for simplicity.