Glance Cobrowse for Lightning Communities

This document outlines the process to implement Glance Cobrowse features on the Salesforce Lightning Communities framework.

Prerequisites

Before you begin, ensure that:

• You have a Glance Account.
• You have set up a Salesforce Community, and the community is enabled in your org. To enable a community, go to Setup, enter Community in the search bar, and select Communities Settings.

Create a Cobrowse Button

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

1. Log into the Salesforce Org as the system admin.
2. Navigate to Setup and enter All Communities into the Quick Find bar.
3. Select All Communities from the returned results on the left menu bar.
4. Locate the Lightning Community where you want to add Glance Cobrowse, and select Builder.
5. Create a new lightning component button where you will initiate cobrowse. Note you are creating a default button, not using a lightning button.
6. Go to the gear icon (settings)>Developer and click the Developer Console button in the top-right corner.
7. Select File> New > Lightning Component.
8. Enter a name and description and click Submit.

9. 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>

   10. On the right-hand side, click Controller to open the buttoncontroller.js file.

   11. Paste the following code and save the file:

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

12. Add the button to your Lightning Community page.

Tag the Lightning Community

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

1. Log in as the system Admin and open the Community Builder.
2. Click the gear icon(Settings) from the left-side menu.
3. Go to the Security tab, and complete the following steps:
   1. For Script Security Level, select Allow Inline Scripts and Script Access to Whitelisted Third-party Hosts.
   2. Under Trusted Sites for Scripts, add the following sites:
      • https://s3.amazonaws.com/glancecdn/
      • https://www.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://s3.amazonaws.com
      • https://www.glancecdn.net
      • https://*.glance.net
4. Select the Advanced tab and click Edit Head Markup.
5. Add the Glance Cobrowse JavaScript Loader Tag in the Head Markup to allow the cobrowse session to happen on the lightning community. This is an example of the script tag; 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=staging" data-groupid="<!--your id here-->" data-inputevents='{"shift-13":"startSession"}' data-site="staging" charset="UTF-8" ></script>
<script>
    window.onload = function(){
   document.addEventListener("DOMContentLoaded", function(event) {
document.getElementById("glancestartbutton").onclick = function ()
{ //Here we are calling the ID that was used on the button

GLANCE.Cobrowse.Visitor.startSession();
};
});
};
</script>

6. Add the following code after the script tag:

<script>
    window.addEventListener("message", startGlanceSession, false);
    function startGlanceSession(event) {
        if (event.origin !== 'https://' + window.location.hostname) {
            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 community has finished publishing.

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