Optional: Lightning Communities Setup

After you complete the initial set up, you may want to configure 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("startCobrowse", "*");
        }
    })
    

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:
    3. Click the CSP Trusted Sites link in the descriptive text of the section. The csp settings.
    4. Click New Trusted Site to add the following sites:
  4. Select the Advanced tab and click Edit Head Markup.
  5. Add the following code in the Head Markup to allow the cobrowse session to happen on the lightning community:
<script
  id="glance-cobrowse"
  type="text/javascript"
  src="https://www.glancecdn.net/cobrowse/CobrowseJS.ashx?group=20211&site=production"
  data-groupid="20211"
  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 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.

Optional: Configure Salesforce for Glance with Chat

After you complete the initial set up, you may want to configure Glance Cobrowse features for Salesforce Chat.

Glance leverages Presence to enable 1-Click Connect during chat sessions using the Chat ID as the Glance Visitor ID. The following steps are to set this up.

NOTE: Glance with Chat is only available in Lightning Experience.

First you need to set up a field for the Glance Visitor ID, and then configure the Glance Buttons to use it during Chat sessions.

Set up a Visitor ID formula field on Chat Transcript

Glance Presence only accepts alphanumeric strings as a Visitor ID, so the first step is to create a formula field that strips the hyphens from the Chat ID. This field will be used as the Visitor ID in Glance Buttons settings.

  1. From Setup, go to Object Manager.
  2. In Quick Find, type Chat Transcript, then click on Chat Transcript.
  3. On the left, click Fields and Relationships.
  4. At the top, click New.
  5. At Step 1, choose Formula and click Next.
  6. At Step 2, set Field Label to Glance Chat Visitor ID. Let Field Name auto-populate.
  7. Below, select Text, and then click Next.
  8. At Step 3, copy the following text and paste it into the formula editor: SUBSTITUTE(ChatKey, '-', '')
  9. Click Next.
  10. Click Save.

Add a Chat Transcript Lookup Field to the Glance Session Object

A Lookup field defines a relationship between a Glance Session record and a Chat Transcript record. This makes it possible to log Glance Sessions related to custom object records and appear in a Related List on that object.

  1. From Setup, go to Object Manager.
  2. In Quick Find, type Glance Session, then click on Glance Session.
  3. On the left, click Fields & Relationships.
  4. Click New.
  5. At Step 1, select Lookup Relationship and click Next.
  6. At Step 2, in the dropdown, choose Chat Transcript and click Next.
  7. At Step 3, under Field Label, set it to Glance_Chat_Transcript. Let Field Name auto-populate. Then click Next.
  8. At Step 4, set field-level security if you like, then click Next.
  9. At Step 5, click Next to add the field to the default Page Layout.
  10. At Step 6, click Save to create the field.

Move the new Chat Transcript field in the Glance Session Page Layout

This step makes it easier to find related Chat records from Glance Session records.

  1. On the left, click Page Layouts, and then Glance Session Layout.
  2. Move the newly-created Chat Transcript field from the Information section into the Related Records section.
  3. Click Save.
the page layout

Configure the Glance Buttons for Chat Transcript

With the Lookup relationship in place, you can now configure the Glance Buttons.

  1. Return to Glance Company Settings from the App Launcher or from the Glance app.
  2. At the top, click Edit.
  3. In the Glance Buttons section, click Add.
  4. In the new row where it says –None–, click the dropdown and select Chat Transcript.
  5. In the row, disable Show and View, but make sure that Join is enabled.
  6. Under Visitor ID Object, select Chat Transcript.
  7. Under Visitor ID Field, select Glance Chat Visitor ID.
  8. Scroll back to the top and click Save.
  9. It should look something like this:
the glance buttons

Add the Glance Buttons to Chat Transcript Lightning Record Page

After the relationship is defined and the buttons are configured, the last step is to actually add the buttons to the Lightning Record Page for your users to access.

  1. From Setup, go to the Object Manager.
  2. In Quick Find, type Chat Transcript, then click Chat Transcript.
  3. On the left, click Lightning Record Pages and choose the page your agents use during Chat Sessions.
  4. When the builder loads up, on the left sidebar, under Custom – Managed, click and drag Glance over onto the console wherever you want Glance to be placed. We recommend placing it somewhere easy to see without scrolling.
  5. Click Save
  6. If prompted, click Activate.
  7. You might be prompted to assign the record page.
  8. After you assign the record page, click Save.
  9. In the top right corner, click Back to return to Setup.

Configure your website for Glance with Chat

To integrate Glance into your Lightning Console using Embedded Services Chat, follow these steps:

Prerequisites

  • Embedded Services Chat in Salesforce is set up
  • You added the Glance join button to the live chat transcript lightning record
  • Your site is externally facing and implemented with cobrowse

Add the Glance Chat Listener Script

In the Embedded Services Chat generated code, find this line: embedded_svc.settings.entryFeature = 'LiveAgent';

Then, paste the following Glance Chat Listener Script after that line.

NOTE: You need to enter your group ID (20211) in two places, marked ‘<>’.

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: << your group id here >> ,
            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: << your group id here >> ,
            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);
}

This will connect Glance to Live Agent Chat on your website.

Try it Out

Once you have completed the steps, complete a chat session on your website. Once the chat view loads in the agent console, the Join button should light up orange, and you should be able to connect to a Cobrowse session with one click.

By continuing to use the site, you agree to the use of cookies. Learn More