Let's Chat?

Twilio Flex

Glance for Twilio Flex

Glance Cobrowse gives agents the ability to instantly join customers in viewing your app or website. Agents can guide customer navigation, answer questions, and assist with completing transactions. You can launch a Glance Cobrowse session from the Twilio Flex platform with the click of a button — no need for the customer to download or install a screen sharing app.

Twilio

Through the Glance 1-Click Connect capability, agents receive alerts when customers are present on your website and can connect with just one click. You can also enable one-way or multi-way video to personalize the Glance Cobrowse experience.

Prerequisites

To integrate the Glance Cobrowse Component with Flex, you need the following:

  • Twilio Account and Flex Project using the 2.x version. If you are on the older version of Flex, see this guide.
  • Glance Account that has the Flex domain added to the allowlist. To add the Flex domain to the allowlist:
    • Log in to your Glance Account.
    • Go to Settings > Cobrowse Settings > CRM and Chat Integration.
    • Enter flex.twilio.com to the domain and select Add.
  • Site that is configured with the Glance Cobrowse script tag. Ensure that you:
    • Set data-presence to api.
    • Set data-cookiedomain to the URL for your website domain.

Example of the Glance Cobrowse script tag from Glance’s CDN:

<script id = "glance-cobrowse"
type = "text/javascript"
src = "https://[cdnname].glancecdn.net/cobrowse/CobrowseJS.ashx?group=[groupid]&site=[production|staging]"
data - groupid = "[groupid]"
data - site = "[production|staging]"
data - inputevents = '{...}'
data - termsurl = "[terms and conditions url]"
data - cookiedomain = "[session cookie domain]"
data - cookietype = "[normal|ls|dual|secure]"
charset = "UTF-8"
data - presence = "api" > < /script>

Example loading the Glance Cobrowse script if using a framework like React:

let script = document.createElement("script");
        script.id = 'glance-cobrowse';
        script.type = 'text/javascript';
        script.src = 'https://beta.glancecdn.net/cobrowse/CobrowseJS.ashx?group=<groupid>&site=production';
        script.setAttribute('data-inputevents', '{"ctrl-13":"showButton","shift-13":"startSession"}');
        script.setAttribute('data-groupid',<groupid>);
        script.setAttribute('data-site', 'production');
        script.setAttribute('data-presence', 'on');
        script.setAttribute('agentvideo', '1');
        script.setAttribute('data-cookiedomain', 'd1zkpnp2hvs8pz.cloudfront.net');
        script.charset = 'UTF-8';
        document.head.appendChild(script);

Integration Overview

To integrate the Glance Cobrowse Component with Flex, you must:

  1. Install the Glance Cobrowse Component from NPM.
  2. Set up authentication.
  3. Add the Glance Cobrowse Component to the Flex interface.
  4. Install Web Chat and add Glance.
  5. Test out your Cobrowse sessions.
  6. (Optional) Enable Glance Video.

Install the Glance Cobrowse Component from NPM

You must add the Glance Cobrowse Component to either an existing or a new Flex Plugin. In your terminal, run:

npm install @glance-networks/twilio-flex-component

If you are using Yarn, run the following instead:

yarn add @glance-networks/twilio-flex-component

For more information, see the ReadMe.

Add the Glance Cobrowse Component to Flex

After installing the Glance Cobrowse Component, choose where you want the button to display inside Flex. Learn how to customize Flex UI Components.

Import the component inside your Flex project. In _glanceplugin.js _(note: the name of the plugin is auto-created when you make the file) or .jtx file, add the following to the first line:

import {TwilioFlexGlance} from @glance-networks/twilio-flex-component;

You can control where the glance buttons display inside of the Flex application. Below is an example of the Glance Cobrowse Component inside the task canvas header. Note: if you use this option you cannot embed glance sessions in an iframe, you can only open sessions in a new tab or window.

Below is an example of the Glance Component inside the CRM Container. Note: If you are opening sessions inside the iframe, you must use the CRM Container. You should not use this option if you need this panel for other content, as it will fill the contents of the entire panel with the Glance Cobrowse session.

Iframe Option Example

flex.CRMContainer.Content.replace(
  <TwilioFlexGlance key={[yourkey]}
  groupid={[yourgroupid]}
  authurl={[yourauthurl]}
  authtoken={flex.Manager.getInstance().user.token}
  openlocation={'flex'} presence={true} glancebaseurl={'beta|staging|production'} puid={flex.Manager.getInstance().user.identity} debugmode={true|false} />, {options} );

New Tab or Window Example

flex.CRMContainer.Content.replace( <TwilioFlexGlance key={[yourkey]} groupid={[yourgroupid]}
authurl={[yourauthurl]}
authtoken={flex.Manager.getInstance().user.token}
openlocation={'flex'} presence={true} glancebaseurl={'beta|staging|production'} puid={flex.Manager.getInstance().user.identity}
debugmode={true|false} />, {options} );

Important: In the cases above, AgentDesktopView.Panel2 is open or closed depending on how you set the default properties.

The following table describes the properties inside the component:

Property Type Definition
key string Required. React component key. User-defined unique string.
groupid integer Required. Enter your Glance Group ID (unique ID assigned to your company by Glance).
authurl string Required when using loginkey. Not used if you are using SAML. Enter the URL to your login key function. This is the function you created above in the “Set Up Authentication” section: https://YOURCOMPANYNAME-glance-####/getloginkey
opentype string Optional. If undefined, defaults to flex. Accepted values are:
  • window: opens agent viewer in new browser window.
  • tab: opens agent viewer in new tab.
  • flex: opens agent viewer inside the Flex interface.

    Note: Selecting flex or leaving undefined takes over AgentDesktopView.Panel2. If you are already customizing this component in your Flex implementation, it is suggested that you set opentype to window or tab.

presence boolean Optional. Determines if presence is enabled. If undefined, presence is set to off. If you are implementing Glance with Flex WebChat, you must set presence to true.
  • true = presence on
  • false = presence off
glancebaseurl string Required. Determines which Glance environment servers the session points to. Set to production unless explicitly directed otherwise by Glance Customer Success.
  • staging: points to Glance’s staging servers
  • beta: points to Glance’s beta servers
  • production: points to Glance’s production servers
puid Required. Must be set to:

{flex.Manager.getInstance().user.identity}

authmethod string Optional. Defaults to loginkey.

Set Up Authentication

Prerequisites

  • You have configured SSO with an identity provider (such as Okta) for Flex.
  • You have a Glance Admin account.
  • If you are setting up Glance Cobrowse for multiple agents, each agent has a Glance Account.
  • You have set the Partner User ID (PUID) field in Glance to match the user ID in your identity provider. To set your user ID:
    • Log in to your Glance account.
    • Go to Portal > Edit Users.
    • For Parter UID, enter the user ID from your identity provider.
    • Select Update User.

There are two different methods for authenticating users, a Glance Loginkey, a time-limited token issued by a customer, or SAML. Follow the instructions below depending on your implementation. The properties set in the plugin depend on the authentication method you are using.

Loginkey Setup

To set up authentication with a Loginkey you must first create a Twilio Function for the Loginkey that you will reference in your plugin code. Glance uses the same user ID from the identity provider to call a Twilio Function to authenticate into Glance.

  1. From the Twilio Console > Functions > Services, select Create Service.

  2. Enter a Service Name then select Next. For example: yourcompanyname-glance. Note: Remember this Service Name to use it later when adding the Glance Cobrowse Component to Flex.

  3. Select Add+ > Add Function. A new field appears.

  4. Remove the default name /path_1 and input getloginkey. Click enter to generate the function.

  5. Click the drop-down next to Protected to set the visibility to Public.

  6. In the text editor on the right, paste the code below then select Save.

    const TokenValidator = require('twilio-flex-token-validator').functionValidator;
     exports.handler = TokenValidator(function(context, event, callback) {
       const response = new Twilio.Response();
       response.appendHeader('Access-Control-Allow-Origin', '*');
       response.appendHeader('Access-Control-Allow-Methods', 'GET', 'POST');
       response.appendHeader('Access-Control-Allow-Headers', 'Content-Type');
       response.appendHeader('Content-Type', 'application/json');
       try {
           const version = 1;
           const expires = (Math.round((new Date()).valueOf() / 1000)) + parseInt(context.GLANCE_EXPIRATION, 10);
           const keystring = context.GLANCE_GROUP_ID + event.partneruserid + version + expires;
           const CryptoJS = require('crypto-js');
           const hmac = CryptoJS.HmacSHA256(keystring, context.GLANCE_API_KEY);
           const hmacb64 = hmac.toString(CryptoJS.enc.Base64)
           const loginkey = "$" + version + "$" + expires + "$" + hmacb64.substr(0, 43).replace(/\+/g, '-').replace(/\//g, '_');
           response.setBody({
               'loginKey': loginkey,
               'groupId': context.GLANCE_GROUP_ID,
               'expiration': expires,
               'apiKey': context.GLANCE_API_KEY
           });
           response.setStatusCode(200);
           callback(null, response);
       } catch(error) {
           response.setStatusCode(404);
           callback(null, response);
       }
    });
    
  7. In Settings > Environment Variables, add the following Environment Variables:

    • Add GLANCE_API_KEY and set the value to your Glance API Key. To find your Glance API Key, log in to your Glance account. Go to Settings > API Key.
    • Add GLANCE_EXPIRATION and set the value to a length of time (in seconds) when you want the session to expire. We recommend 3600
    • Add GLANCE_GROUP_ID and set the value to the Glance group ID for your company. Note: The Glance group ID is a unique ID assigned to your company by Glance. You can find this in the Glance portal in the top-right corner of every page.
  8. In Settings > Dependencies, add the following dependencies without a version number:

    • twilio-flex-token-validator
    • crypto-js
  9. Select Deploy All.

  10. This function will be used for the authurl later when you install the plugin.

SAML Setup

  1. Set up SAML with Glance in your identity provider.
  2. Make sure you have set the authmethod to SAML in the TwilioFlexGlance component (add link to readme). You do not need to set an authurl for this method.

<TwilioFlexGlance authmethod={‘SAML’}/>

Install Flex WebChat and Add Glance 1-Click Connect

To enable Glance’s 1-Click Connect feature, you need to append Glance presence code to the Twilio chat code. Although you can implement this feature using a custom chat solution, below is an example implementation of 1-click connect using the chat example project provided by Twilio.

  1. Build a Twilio Chat React app with Flex Conversations.
  2. Add the following code in the PreEngagementFormPhase.tsx file:
  3. Set up a Flow for Flex WebChat:
    • From the Twilio Console> Studio> Manage Flows, select Chat Flow.
    • In the Widget Library >Connect to Other Products, select and drag Send to Flex onto the canvas. Click the widget to edit.
      1. For Name, enter SendMessageToAgent
      2. For Workflow, select Assign to Anyone.
      3. For Task Channel, select Chat.
      4. For attributes, input: {"name": "{{trigger.message.ChannelAttributes.from}}", "channelType": "{{trigger.message.ChannelAttributes.channel_type}}", "channelSid": "{{trigger.message.ChannelSid}}"}
    • Save the widget.
    • Wire the widget to the Incoming Message Trigger.
    • In the Widget Library > Connect Other Products, select and drag **Send to Flex ** onto the canvas. Click the widget to edit. 5. For Name, enter SendConversationToAgent. 6. For Workflow, select Assign to Anyone.
    • For Channel, select Chat.
    • For Attributes, input {"from": "{{trigger.conversation.ChannelAttributes.pre_engagement_data.friendlyName}}", "glance_visitor_id": "{{trigger.conversation.ConversationSid}}"}
    • Save the widget.
    • Wire the widget to the Incoming Conversation trigger.
    • Select Publish.

Example of the Chat Flow Twilio

Optional: You can set up the same flow for the Messaging flow to join sessions from inbound SMS messages.

Starting Glance Sessions from 1-Click Connect

Glance’s 1-Click Connect feature allows agents and visitors to get connected to each other in just one click, no key exchange or downloads required.

To start a session with 1-click connect:

  1. Enter a chat message on the site configured with Chat and the Glance Cobrowse script tag.
  2. On the Flex side, accept the inbound chat request.
  3. The Glance Join button will light up orange, signifying the customer can receive a request to Cobrowse the website.
  4. The agent clicks the orange join button to send the request for Cobrowse.
  5. The visitor accepts, and the agent joins the session.

Starting Glance Sessions from Code Entry

If your organization is not using 1-click connect, or if the agent and visitor have trouble getting connected using the 1-click connect feature, there is a code-entry fallback method where the visitor clicks a link or button to generate a key, which is provided to the agent to start the session.

  1. Enter a chat message on the site configured with Chat and the Glance Cobrowse script tag.
  2. On the Flex side, accept the inbound chat request.
  3. On the website, the visitor clicks the Cobrowse link or button to generate the session key.
  4. The visitor tells the agent the key.
  5. The agent enters the key to join the session.

Modify the Position of the Glance Cobrowse Button

You may want to move the location of the Glance Cobrowse button on your website so that it does not interfere with Flex WebChat.

  1. Log in to your Glance Account.
  2. Go to Settings > Button Customization and add the following CSS under the Custom CSS section:
#glance_cobrowse_btn{ left: 20px <strong>!important</strong>; right: auto <strong>!important</strong>; }

Enable Video

Personalizing a Glance Cobrowse session with Glance Video lets your agents build trust, confidence, and credibility with customers. You can enable either one-way agent video, or multi-way video where the customer will be prompted to optionally share their video during the session.

  1. Log in to your Glance account.
  2. From Settings, select one of the following options depending on the video experience you want:
    • Add one-way video during screenshare or cobrowse sessions
    • Add multi-participant video during cobrowse sessions

Once enabled, Glance Video starts with the Glance Cobrowse session. To pause Glance Video, click the Video button in the agent viewer.

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