Glance with Chat in Lightning Console

Glance's integration with Live Agent Snap-in Chat allows your agent to offer a Cobrowse session to a customer during a chat session with just one click.

NOTE: This section does not cover how to set up Live Agent Snap-in Chat. You will need to have Snap-in Chat already set up and working to complete these steps.

What You Need

  • Glance for Salesforce 2.92+ base package and the Glance for Salesforce Live Agent Extension package 1.17+ (get packages from this page).
  • Glance for Salesforce Setup (See this section).
  • Salesforce Live Agent license.
  • Access to your web site with Chat set up.
  • A Glance Cobrowse script tag on your web pages with Presence set to API (See this section).

How Glance for Chat Works

Glance offers a Presence service to allow an agent to connect to the customer with 1-Click over voice calls. By adding Glance’s listener script to your Live Agent Snap-in script, Glance can detect when a chat session is running and publish that Chat ID as the Glance visitor ID to Presence. If you are already using 1-Click Connect for voice interactions, this will not affect that implementation.

NOTE: Logging Glance Session records from Chat Transcripts in Salesforce is not supported.

At a high level, this is the workflow for integrating Glance in your Salesforce Chat:

  1. Add the Glance join button to the live chat transcript lightning record.
  2. Verify the Glance Cobrowse script position.
  3. Follow the instructions depending on which type of chat you are using:
    • Glance for Snap-in Chat
    • Glance for Classic Chat

Add the Glance Join Button to the Live Chat Transcript Lightning Record

To add the Glance Join button to the Chat Transcript Lightning record:

  1. From Setup, go to Object Manager.
  2. Choose Live Chat Transcript.
  3. On the left, choose Lightning Record Pages.
  4. Click on the Lightning Record your chat agents will use with Glance.
  5. Click Edit to go to the Lightning App Builder.
  6. In the Builder, drag a Visualforce component onto the page. We recommend placing it somewhere close to the top of the page. It won’t take much room.
  7. On the right sidebar under Visualforce Page Name, select GlanceFromChat.
  8. Under Label, enter Glance.
  9. Under Height, enter 40.
  10. Click Save.

Now when the agent is chatting with a customer, the Join button will light up orange to indicate they can connect with one click. When the customer accepts the Cobrowse session, a viewer will open in a new browser tab.

Verify the Glance Cobrowse Script Position

On your website, find this line in a code snippet:

<script type='text/javascript'
src='https://service.force.com/embeddedservice/5.0/esw.min.js'></script>

Make sure the Glance Cobrowse script tag comes before this script tag on your web pages. In general, we encourage you to place the Glance Cobrowse script in the header of your web pages.

The tag must have data-presence set to “api.” Here is an example:

<script id="glance-cobrowse" type="text/javascript"
src="https://www.glancecdn.net/cobrowse/CobrowseJS.ashx?group=<<your group id here>>&site=production"
data-inputevents='{"ctrl-13":"showButton","shift-13":"startSession"}'
 data-groupid="<<your group id here>>" data-site="production"
data-presence="api" charset="UTF-8"></script>

Glance for Snap-in Chat

To integrate Glance into your Lightning Console using Snap-in Chat, follow these steps:

Prerequisites

  • Snap-in Chat in Salesforce is set up
  • You added the Glance join button to the live chat transcript lightning record
  • You verified the Glance Cobrowse script position
  • Your site is externally facing and implemented with cobrowse

Retrieve Your Live Agent Snap-in Script

If you need to get your Live Agent Snap-In Chat script again, you can retrieve it with these steps:

  1. Under Setup, search for Snap-ins.
  2. In the row with your Snap-In deployment, click the down arrow on the right and click View.
  3. In the box for Snap-in code snippets, click Get Code on the right.

Add the Glance Chat Listener Script

In the Live Agent Snap-in 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 in two places, marked ‘<< your group id here >>’.

<script type="text/javascript">
	function messageListener(e) {
		console.log('message', e);

		if (e.data && typeof e.data === 'string') {
			if (e.data.indexOf('ChatEstablished') != -1) {
				console.log('ChatEstablished');

				var message = {
					type: 'ChatEstablished',
					chatKey: liveagent.chasitor.getChatKey()
				};

				window.opener.top.postMessage(message, '*');
			}

			else if (e.data.indexOf('ChatEnded') != -1) {
				console.log('ChatEnded');

				var message = {
					type: 'ChatEnded',
					chatKey: liveagent.chasitor.getChatKey()
				};

				window.opener.top.postMessage(message, '*');

				console.log('ChatEnded');
			}
		}
	}

	if (window.addEventListener) {
		addEventListener('message', messageListener, false);
	} else {
		attachEvent('onmessage', messageListener);
	}
</script>

This code intercepts Salesforce chat messages, and looks for ChatEstablished and ChatEnded messages. When those messages are received, the code uses a postMessage call to inform the page that launched the chat of those events.

  1. Add the Glance presence script to the page that launches the chat.
  2. Add the code below to listen for messages from the custom chat window, and to invoke presence (start / end).

    var visitor;
    
    function messageListener(e) {
    	console.log('message', e);
    
    	if (e.data) {
    		// Chat Started
    		if (e.data.type == 'ChatEstablished') {
    			var visitorid = e.data.chatKey.replace(/-/g, '');
    
    			console.log('Chat Start - visitorid=' + visitorid);
    
    			visitor = new GLANCE.Presence.Visitor({
    				groupid: <<your group id here>>,
    				visitorid: visitorid
    			});
    
    			visitor.connect();
    		}
    
    		// Chat Ended
    		else if (e.data.type == 'ChatEnded') {
    			if (visitor) {
    				console.log('Chat End');
    
    				visitor.disconnect();
    				GLANCE.Cobrowse.Visitor.stopSession();
    			}
    		}
    	}
    }
    
    if (window.addEventListener) {
    	addEventListener('message', messageListener, false);
    } else {
    	attachEvent('onmessage', messageListener);
    }

Glance for Classic Chat

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

Prerequisites

  • Classic Chat in Salesforce is set up
  • You added the Glance join button to the live chat transcript lightning record
  • You verified the Glance Cobrowse script position
  • Your site is externally facing and implemented with cobrowse
  1. Create a classic custom chat page, and add the following code to it. This code intercepts Salesforce chat messages, and looks for ChatEstablished and ChatEnded messages. When those messages are received, the code uses a postMessage call to inform the page that launched the chat of those events:

    <script type="text/javascript">
    	function messageListener(e) {
    		console.log('message', e);
    
    		if (e.data && typeof e.data === 'string') {
    			if (e.data.indexOf('ChatEstablished') != -1) {
    				console.log('ChatEstablished');
    
    				var message = {
    					type: 'ChatEstablished',
    					chatKey: liveagent.chasitor.getChatKey()
    				};
    
    				window.opener.top.postMessage(message, '*');
    			}
    
    			else if (e.data.indexOf('ChatEnded') != -1) {
    				console.log('ChatEnded');
    
    				var message = {
    					type: 'ChatEnded',
    					chatKey: liveagent.chasitor.getChatKey()
    				};
    
    				window.opener.top.postMessage(message, '*');
    
    				console.log('ChatEnded');
    			}
    		}
    	}
    
    	if (window.addEventListener) {
    		addEventListener('message', messageListener, false);
    	} else {
    		attachEvent('onmessage', messageListener);
    	}
    </script>
  2. Add the Glance presence script to the page that launches the chat.

  3. Add the code below to listen for messages from the custom chat window, and to invoke presence (start / end).

    var visitor;
    
    function messageListener(e) {
    	console.log('message', e);
    
    	if (e.data) {
    		// Chat Started
    		if (e.data.type == 'ChatEstablished') {
    			var visitorid = e.data.chatKey.replace(/-/g, '');
    
    			console.log('Chat Start - visitorid=' + visitorid);
    
    			visitor = new GLANCE.Presence.Visitor({
    				groupid: <<your group id here>>,
    				visitorid: visitorid
    			});
    
    			visitor.connect();
    		}
    
    		// Chat Ended
    		else if (e.data.type == 'ChatEnded') {
    			if (visitor) {
    				console.log('Chat End');
    
    				visitor.disconnect();
    				GLANCE.Cobrowse.Visitor.stopSession();
    			}
    		}
    	}
    }
    
    if (window.addEventListener) {
    	addEventListener('message', messageListener, false);
    } else {
    	attachEvent('onmessage', messageListener);
    }

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