Glance Cobrowse for Lightning Digital Experiences (Communities)

This document outlines the process to implement Glance Cobrowse features on Salesforce Lightning Digital Experiences.

NOTE: Salesforce has renamed Communities to Digital Experiences. More information is available here.

Prerequisites

Before you begin, ensure that:

You have a Glance Account.
You have set up a Salesforce Digital Experience, and the Digital Experience is enabled in your org. To enable a Digital Experience, go to Setup, enter Digital Experiences in the search bar, and select All Sites> New.

NOTE: If you want to enable Glance's 1-Click Connect capability from chat in a Digital Experience, see this section.

Create a Cobrowse Button

First, you will create a button where you will initiate Cobrowse sessions.

Log into the Salesforce Org as the system admin.
Navigate to Setup and enter All Sites into the Quick Find bar.
Select All Sites from the returned results on the left menu bar.
Locate the Site where you want to add Glance Cobrowse, and select Builder.
Create a new lightning component button where you will initiate cobrowse. Note you are creating a default button, not using a lightning button.
Go to the gear icon (settings)>Developer and click the Developer Console button in the top-right corner.
Select File> New > Lightning Component.
Enter a name and description and click Submit.
Open the .cmp file that was created, and paste in this code:

  <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickActionWithoutHeader" access="global">
      <button onclick="{! c.startCobrowse }"> Cobrowse </button>
 </aura:component>

Save the .cmp file.
On the right-hand side, click Controller to open the buttoncontroller.js file.
Paste the following code and save the file:

 ({
     startCobrowse: function(cmp, event) {
         window.postMessage("startCobrowse", "*");
     }
 })

Go to the lightning icon (Components) and scroll down to Custom Components to find the Cobrowse button you created.
Drag the button onto your page.

Tag the Digital Experience Site

Next, modify the security settings and add the Cobrowse script tag.

Log in as the system Admin.
Click the gear icon(Settings) from the left-side menu.
Select the Security and Privacy tab.
Update the Content Security Policy (CSP):
1. For Security Level, select Relaxed CSP: Permit Access to Inline Scripts and Allowed Hosts.
2. Under Trusted Sites for Scripts, click the Add Trusted Site button and add the following sites:
  - https://*.glancecdn.net
  - https://*.glance.net
3. Click the CSP Trusted Sites link in the descriptive text of the section.
4. Click New Trusted Site to add the following sites:
  - https://*.glancecdn.net
  - https://*.glance.net
  - If you are using 1-Click Connect from Chat or a button, wss://*.glance.net
    
    NOTE: If the New Trusted Site button does not display, click the Setup gear icon in the top right corner and choose Setup. Input CSP in the Quick Find Bar and select CSP Trusted Sites.
5. Under CSP Directives, select all of the directives:
  - Allow site for connect-src
  - Allow site for font-src
  - Allow site for frame-src
  - Allow site for ing-src
  - Allow site for media-src
  - Allow site for style-src
6. Click Save
Select the Advanced tab and click Edit Head Markup.
Add the Glance Cobrowse JavaScript Loader Tag in the Head Markup to allow the cobrowse session to happen on the site. This is an example of the script tag and includes the cobrowse script tag and listener script; replace your group ID where specified:

<script
  id="glance-cobrowse"
  type="text/javascript"
  src="https://www.glancecdn.net/cobrowse/CobrowseJS.ashx?group=<!--your id here->&site=production"
  data-groupid="<!--your id here-->"
  data-site="production"
  data-presence="on"
  charset="UTF-8"
></script>
<script>
    window.onload = function() {
        document.addEventListener("DOMContentLoaded", function(event) {
            document.getElementById("glancestartbutton").onclick = function () {
                GLANCE.Cobrowse.Visitor.startSession();
            };
        });
    };
window.addEventListener("message", startGlanceSession, false);
    function startGlanceSession(event) {
        if (event.origin !== 'https://' + window.location.hostname) {
            return;
        }
        if(event.data !== "startCobrowse") {
            return;
        }
        GLANCE.Cobrowse.Visitor.startSession();
    }
</script>

7. Click Save at the bottom of the page, and click Publish. You will receive an email message after the site has finished publishing.

8. Check and confirm that the cobrowse functionality is performing as expected on the site pages by clicking the Cobrowse button.

Set Up 1-Click Connect with Chat in Digital Experiences

You may want to enable 1-click connect from chat in your digial experience, to allow agents to join sessions from a digital experience via chat.

Prerequisites

You have a Glance Account
You have set up a Salesforce Digital Experience, and the Digital Experience is enabled in your org.
You have enabled chat in your Digital Experience site.

Click the gear icon(Settings) from the left-side menu.
Select the Advanced tab and click Edit Head Markup.
Paste this code, replacing the Group ID (1234) with your Glance Group ID.

<script
  id="glance-cobrowse"
  type="text/javascript"
  src="https://www.glancecdn.net/cobrowse/CobrowseJS.ashx?group=1234&site=production"
  data-groupid="1234"
  data-site="production"
  data-presence="on"
  charset="UTF-8"
></script>
<script>

var visitor;

function messageListener(e) {

  if (typeof e.data === 'string' && e.data.indexOf('startSession') == 0) {
    var key = e.data.split(':')[1];

    GLANCE.Cobrowse.Visitor.startSession(key);
  }

  if (e.data) {
    if (e.data.data) {
      // Chat started.
      if (e.data.data.event == 'chasitorChatEstablished') {
        if (e.data.data.chasitorData) {
          var visitorid = e.data.data.chasitorData.chatKey.replace(/-/g, '');

          console.log('Chat Start - visitorid=' + visitorid);

          visitor = new GLANCE.Presence.Visitor({
            groupid: 1234 ,
            visitorid: visitorid
          });

          visitor.presence();
        }
      }

      // Chat restarted.
      else if (e.data.method == 'liveagent.restored') {
        if (e.data.data.chasitorSessionData) {
          var visitorid =
            e.data.data.chasitorSessionData.chatKey.replace(/-/g, '');

          console.log('Chat Restart - visitorid=' + visitorid);

          visitor = new GLANCE.Presence.Visitor({
            groupid: 1234 ,
            visitorid: visitorid
          });

          visitor.presence();
        }
      }

      // Chat timed out.
      else if (e.data.data.event == 'chasitorIdleTimeout') {
        if (visitor) {
          visitor.disconnect();
          GLANCE.Cobrowse.Visitor.stopSession();
        }
      }

      // Chat ended.
      else if (e.data.data.event == 'chasitorAgentChatEnded' || e.data.data.event == 'chasitorChasitorChatEnded') {
        if (visitor) {
          console.log('Chat End');

          visitor.disconnect();
          GLANCE.Cobrowse.Visitor.stopSession();
        }
      }
    }
  }
}

if (window.addEventListener) {
  addEventListener('message', messageListener, false);
} else {
  attachEvent('onmessage', messageListener);
}
</script>
<script>
    window.onload = function() {
        document.addEventListener("DOMContentLoaded", function(event) {
            document.getElementById("glancestartbutton").onclick = function () {
                GLANCE.Cobrowse.Visitor.startSession();
            };
        });
    };
window.addEventListener("message", startGlanceSession, false);
    function startGlanceSession(event) {
        if (event.origin !== 'https://' + window.location.hostname) {
            return;
        }
        if(event.data !== "startCobrowse") {
            return;
        }
        GLANCE.Cobrowse.Visitor.startSession();
    }
</script>

Updated on 13 Jul 2022