Screenpop Data
    • Dark
      Light

    Screenpop Data

    • Dark
      Light

    Article summary

    This section contains details about configuring the Agent Workspace in the CRM container and the code to populate screenpop data (customer data) on the agent Workspace for each call that an agent receives.

    Configuring Agent Workspace in CRM Container

    Note:

    This is an optional configuration.

    Perform the following steps:

    1. Workspace URL is configured with the .env file that is available with the Plug-in.

    2. Add a new entry REACT_APP_SERVICE_AGENTCLIENT_URL and configure it with the Workspace URL.

    3. Include the Populating Screenpop Data in Twilio Flex Plug-in to show the Workspace in the

      Twilio Flex CRM Container.

    Populating Screenpop Data

    The screen pop data has to be populated on the Workspace for every call. To facilitate this, fetch the LCMKey value and pass it on to the CRM Container as a PostMessage. Following is the sample code snippet populating the screen pop data. This is handled in the reservationCreated event.

    manager.workerClient.on("reservationCreated", (reservation) => {
        FillScreenPopData(reservation); 
    });
    
    function FillScreenPopData(reservation) {
            var AgentID = "";
            var LCMKey = "";
            var ReservationSID = "";
            var payloadObj;
            var AccountSID = "";
            var isNailedConnection = false;
            var reservationObj = "";
            //currenttask = reservation.task;
            LCMKey = reservation.task.attributes.LCMKey;
            AgentID = manager.store.getState().flex.worker.
            activity._worker.sid;
            console.log("CurrentWorkerID" + AgentID);
            ReservationSID = reservation.sid;
            payloadObj = reservation.task;
            var taskObj = [];
            AccountSID = reservation.task.attributes.account_sid;
            taskObj.push(reservation.task.attributes);
            taskObj[0]["ReservationSID"] = reservation.sid;
            taskObj[0]["callType"] = "Outbound";
            taskObj[0]["TaskSID"] = reservation.task.sid;
            taskObj[0]["AccountSID"] = AccountSID;
            isNailedConnection =
              reservation.task.attributes.IsNailedConnectionEnabled;
    
            isSkipCall = false;
            PreviewTimerCount = 0;
            AutoAcceptTimer = 0;
    
            stopPreviewAutoAcceptTimer();
            stopCountTimer();
            if (AgentID != "" && AgentID != undefined && AgentID != null) {
              var Prefix = "WK";
              if (AgentID.indexOf(Prefix) != 1) {
                AgentID = AgentID.replace(Prefix, "");
                console.log("CurrentWorkerID after prefix removal " + AgentID);
              }
            }
            reservationObj = reservation.task.attributes;
            if (isNailedConnection == false) {
              if (reservationObj.hasOwnProperty("Mode")) {
                if (
                  reservationObj.Mode.toLowerCase() == "progressive" ||
                  reservationObj.Mode.toLowerCase() == "predictive" ||
                  reservationObj.Mode.toLowerCase() == "progressive ivr"
                ) {
                  //Auto Accept will not happen for Consult and Transfer Calls
                  if(!reservation.hasOwnProperty("transfer")){
                    if(REACT_APP_SERVICE_PLUGINAUTOACCEPTCALL.toLowerCase()=="true")
                    {
                      AutoAcceptForNonPreview(reservation);
                    }
                  }
                  
                } else if (reservationObj.Mode.toLowerCase() == "preview" && reservation.task.taskChannelUniqueName.toLowerCase()!="voice") {              
                  AutoAcceptForPreview(reservation);              
                }
                
              }
            }
    
            //Post the LCMKey on Reservation Create to populate the Screenpop data
            var win = document.getElementsByTagName("iframe")[0].contentWindow;
            if (win != undefined) {
              win.window.postMessage(
                "FlexLCMKey~" +
                  LCMKey +
                  "~AgentID~" +
                  AgentID +
                  "~ReservationSID~" +
                  ReservationSID +
                  "~CallVariables~" +
                  JSON.stringify(taskObj) +
                  "~TaskAttributes~" +
                  JSON.stringify(reservation.task.attributes),
                "*"
              );
            }
          }

    Clearing Screenpop Data

    The screen pop data populated on the Workspace must be cleared after every call. Following is the sample code snippet to clear the screen pop data:

    function clearScreenPop()
          {
            if (REACT_APP_SERVICE_CLEARSCREENPOP.toLowerCase()=="true") {
              //to clear the screenpop
              var win = document.getElementsByTagName("iframe")[0].contentWindow;
              if (win != undefined) {
                win.window.postMessage("ClearScreenPop", "*");
                console.log('ClearScreenPop Completed ');
              }
            }
          }


    Was this article helpful?

    Changing your password will log you out immediately. Use the new password to log back in.
    First name must have atleast 2 characters. Numbers and special characters are not allowed.
    Last name must have atleast 1 characters. Numbers and special characters are not allowed.
    Enter a valid email
    Enter a valid password
    Your profile has been successfully updated.
    ESC

    Eddy AI, facilitating knowledge discovery through conversational intelligence