Skip to contentSkip to navigationSkip to topbar
Rate this page:
On this page

Integrate Flex with Glance Cobrowse


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.

Glance Overview.

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 agent video to personalize the Glance Cobrowse experience.


Prerequisites

prerequisites page anchor

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

Example of the Glance Cobrowse script tag:


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


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

  1. Set up authentication.
  2. Install the Glance Cobrowse Component from NPM.
  3. Add the Glance Cobrowse Component to the Flex interface.
  4. Install Flex WebChat and add Glance.
  5. (Optional) Enable Glance Agent Video.

In order to connect to Glance from Flex, you need to set up authentication. Glance uses the same user ID from the identity provider to call a Twilio Function to authenticate into Glance.

Prerequisites

prerequisites-2 page anchor
  • 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:

To set up authentication:

  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.


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

  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 .

Install the Glance Cobrowse Component from NPM

install-the-glance-cobrowse-component-from-npm page anchor

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


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

If you are using Yarn, run the following instead:


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

For more information, see the ReadMe(link takes you to an external page).


Add the Glance Cobrowse Component to Flex

add-the-glance-cobrowse-component-to-flex page anchor

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 autocreated when you make the file) or .jtx file, add the following to the first line:


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

Example of the Glance Cobrowse Component inside the task canvas header:


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

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.


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

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:

PropertyTypeDefinition
keystringRequired. React component key(link takes you to an external page). User-defined unique string.
groupidintegerRequired. Enter your Glance Group ID (unique ID assigned to your company by Glance).
authurlstringRequired. 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
opentypestringOptional. 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.
presencebooleanOptional. 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
glancebaseurlstringRequired. 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
puidRequired. Set to: {flex.Manager.getInstance().user.identity}

Install Flex WebChat and Add Glance

install-flex-webchat-and-add-glance page anchor

You must consume Flex WebChat from the CDN. Glance does not have a NPM package, which is necessary if deploying in a React application.

  1. Install Flex WebChat .
  2. The following code example contains Flex WebChat and Glance Presence functionality. Update the code with your Account SID and Flex Flow SID:


    _47
    <script>
    _47
    const appConfig = \{
    _47
    accountSid: "[YOUR_TWILIO_ACCOUNT_SID]",
    _47
    flexFlowSid: "[YOUR_FLEX_FLOW_SID]",
    _47
    context: \{
    _47
    friendlyName: "[YOUR_FIRENDLY_NAME]",
    _47
    \},
    _47
    startEngagementOnInit: true
    _47
    \};
    _47
    let sessionid = undefined;
    _47
    _47
    Twilio.FlexWebChat.createWebChat(appConfig)
    _47
    .then(webchat => \{
    _47
    const \{ manager \} = webchat;
    _47
    _47
    Twilio.FlexWebChat.Actions.on("afterSendMessage", () => \{
    _47
    const {channelSid} = manager.store.getState().flex.session;
    _47
    if (!sessionid || sessionid !== channelSid) \{
    _47
    manager
    _47
    .chatClient.getChannelBySid(channelSid)
    _47
    .then(channel => \{
    _47
    let visitor = new GLANCE.Presence.Visitor(\{
    _47
    groupid: document.getElementById("glance-cobrowse").getAttribute("data-groupid"),
    _47
    visitorid: channel.sid
    _47
    \});
    _47
    visitor.onerror = function (e) \{
    _47
    console.log("presence error:", e);
    _47
    \};
    _47
    visitor.presence(\{
    _47
    onsuccess: function () \{
    _47
    console.log("presence success");
    _47
    \}
    _47
    \});
    _47
    visitor.onsignal = function (msg) \{
    _47
    console.log("received signal:", msg);
    _47
    \};
    _47
    visitor.connect();
    _47
    _47
    \});
    _47
    sessionid = channelSid;
    _47
    \}
    _47
    \});
    _47
    _47
    webchat.init();
    _47
    _47
    \});
    _47
    </script>

  3. Set up a Flow(link takes you to an external page) for Flex WebChat:

    • From the Twilio Console > Studio > Manage Flows , select Webchat Flow .
    • In the Widget Library > Flow Control , select and drag Set Variables onto the canvas. Click the widget to edit.
    • Click the plus sign on the right side of Variables.
    • For Key , input glance_visitor_id .
    • For Value , input {{trigger.message.ChannelSid}} .
    • Save the variable.
    • 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.
    • For Workflow , select Assign to Anyone .
    • For Channel , select Programmable Chat .
    • For Attributes , input {"name": "{{trigger.message.ChannelAttributes.from}}", "channelType": "{{trigger.message.ChannelAttributes.channel_type}}", "channelSid": "{{trigger.message.ChannelSid}}", "glance_visitor_id": "{{flow.variables.glance_visitor_id}}"}
    • Save the widget.
    • Wire the widget to the Set Variable Widget that you just created.
    • Select Publish.

      Studio Flow for Glance.

Modify the Position of the Glance Cobrowse Button

modify-the-position-of-the-glance-cobrowse-button page anchor

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(link takes you to an external page) .
  2. Go to Settings > Button Customization and add the following CSS under the Custom CSS section:


    _10
    #glance_cobrowse_btn{
    _10
    left: 20px !important;
    _10
    right: auto !important;
    _10
    }


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(link takes you to an external page) .
  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.

(information)

Info

For more information on Glance Cobrowse sessions, see the Glance Cobrowse Guide(link takes you to an external page).


Rate this page: