Using Glance with Messaging In-App Web (MIAW)

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.

Warning

Glance with Messaging In-App Web is only available in Lightning Experience and using our 1-Click Connect.

For instructions on enabling legacy chat, see the help docs here.

Configure Salesforce for Glance with Messaging in-App Web

Note

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

High-Level Steps

  1. Set up a Visitor ID formula field on Chat Transcript.
  2. Add a Chat Transcript Lookup Field to the Glance Session Object.
  3. Move the new Chat Transcript field in the Glance Session Page Layout.
  4. Configure the Glance Buttons for Chat Transcript.
  5. Add the Glance Buttons to Chat Transcript Lightning Record Page.
  6. Configure your website for Glance with Chat.
  7. Verify the Glance Cobrowse Script Position.

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, input Messaging Session, then click on Messaging Session.
  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(Conversation.ConversationIdentifier, '-', '')
  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, input 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 Messaging Session 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 Messaging Session field from the Information section into the Related Records section.
  3. Click Save. Chat Chat

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 Messaging Session.
  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: Chat Chat

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, input Messaging Session, then click Messaging Session.
  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

You also need to configure your website to use the Chat ID as the Glance Visitor ID.

Verify the Glance Cobrowse Script Position

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.

In the Embedded Services Chat generated code, add the following script after your Glance Cobrowse script.

Here is an example of the Cobrowse script tag and the glance chat listener script.

Warning

You need to enter your group ID where indicated <<your group id here>>.

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

// Chat started.
window.addEventListener('onEmbeddedMessagingConversationStarted', (event) => {
    if (event?.detail?.conversationId) {
        var visitorid = event.detail?.conversationId.replace(/-/g, '');

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

        visitor = new GLANCE.Presence.Visitor({
            groupid: '<< your group id here >>',
            visitorid: visitorid
        });

        visitor.presence();
    }
});

// Chat restarted.
window.addEventListener('onEmbeddedMessagingConversationOpened', (event) => {
    if (event?.detail?.conversationId) {
        var visitorid = event.detail?.conversationId.replace(/-/g, '');

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

        visitor = new GLANCE.Presence.Visitor({
            groupid: '<< your group id here >>',
            visitorid: visitorid
        });

        visitor.presence();
    }
});

// Chat ended.
window.addEventListener('onEmbeddedMessagingConversationClosed', (event) => {
    if (event?.detail?.conversationId) {
        var visitorid = event.detail?.conversationId.replace(/-/g, '');

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

        visitor.disconnect();
        GLANCE.Cobrowse.Visitor.stopSession();
    }
});
</script>

This will connect Glance to Messaging In-App Web 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.