Menu

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

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

  • Twilio Account and Flex Project
  • Glance Account that has the Flex domain added to the allowlist.
    To add the Flex domain to the allowlist:
    1. Log in to your Glance Account.
    2. Go to Settings > Cobrowse Settings > CRM and Chat Integration.
    3. 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:

<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>

Integration Overview

To integrate the Glance Cobrowse Component with Twilio 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 Twilio Flex WebChat and add Glance.
  5. (Optional) Enable Glance Agent Video.

Set Up Authentication

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

  • 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:
    1. Log in to your Glance account.
    2. Go to Portal > Edit Users.
    3. For Parter UID, enter the user ID from your identity provider.
      My Glance Account
    4. Select Update User.

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 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. Press 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.

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 your terminal, run:

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

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

flex.TaskCanvasHeader.Content.add (
  <Glance key={'[yourkey]'}
          	groupid={[yourgroupid]}
          	authurl={'[yourauthurl]'}
          	opentype={'ptab|window|flex]'}
          	presence={true}
  />, {options}
);

Example of the Glance Component inside the CRM Container:

Note: 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.

flex.CRMContainer.Content.replace(
  <Glance key={'[yourkey]'}
          	groupid={[yourgroupid]}
          	authurl={'[yourauthurl]'}
          	opentype={'[flex]'}
          	presence={true}
  />, {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. 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 Twilio Flex WebChat, you must set presence to true.
  • true = presence on
  • false = presence off

Install Twilio Flex WebChat and Add Glance

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

  1. Install Twilio Flex WebChat.
  2. The following code example contains Twilio Flex WebChat and Glance Presence functionality. Update the code with your Account SID and Flex Flow SID:
    <script>
      const appConfig = {
        accountSid: "[YOUR_TWILIO_ACCOUNT_SID]",
        flexFlowSid: "[YOUR_FLEX_FLOW_SID]",
        context: {
          friendlyName: "[YOUR_FIRENDLY_NAME]",
        },
        startEngagementOnInit: true
      };
      let sessionid = undefined;
    
     Twilio.FlexWebChat.createWebChat(appConfig)
        .then(webchat => {
            const { manager } = webchat;
    
            Twilio.FlexWebChat.Actions.on("afterSendMessage", () => {
              const {channelSid} = manager.store.getState().flex.session;
              if (!sessionid || sessionid !== channelSid) {
               manager
                .chatClient.getChannelBySid(channelSid)
                .then(channel => {
                 let visitor = new GLANCE.Presence.Visitor({
                  groupid: document.getElementById("glance-cobrowse").getAttribute("data-groupid"),
                  visitorid: channel.sid
                 });
                 visitor.onerror = function (e) {
                  console.log("presence error:", e);
                 };
                 visitor.presence({
                  onsuccess: function () {
                   console.log("presence success");
                  }
                 });
                 visitor.onsignal = function (msg) {
                  console.log("received signal:", msg);
                 };
                 visitor.connect();
    
                });
               sessionid = channelSid;
              }
             });
    
             webchat.init();
    
            });
    </script>​
  3. Set up a Flow for Twilio Flex WebChat:
    1. From the Twilio Console > Studio > Manage Flows, select Webchat Flow.
    2. In the Widget Library > Flow Control, select and drag Set Variables onto the canvas. Click the widget to edit.
    3. Click the plus sign on the right side of Variables.
    4. For Key, input glance_visitor_id.
    5. For Value, input {{trigger.message.ChannelSid}}.
    6. Save the variable.
    7. Save the widget.
    8. Wire the widget to the Incoming Message Trigger.
    9. In the Widget Library > Connect Other Products, select and drag Send to Flex onto the canvas. Click the widget to edit.
    10. For Workflow, select Assign to Anyone.
    11. For Channel, select Programmable Chat.
    12. 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}}"}
    13. Save the widget.
    14. Wire the widget to the Set Variable Widget that you just created.
    15. Select Publish.

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 Twilio 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 !important;
       right: auto !important;
    }​

Enable Glance Agent Video

Personalizing a Glance Cobrowse session with Glance Agent Video lets your agents build trust, confidence, and credibility with customers.

  1. Log in to your Glance account.
  2. From Settings, select Use Agent Video during sessions.

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

For more information on Glance Cobrowse sessions, see the Glance Cobrowse Guide.

Rate this page:

Thank you for your feedback!

We are always striving to improve our documentation quality, and your feedback is valuable to us. How could this documentation serve you better?

Sending your feedback...
🎉 Thank you for your feedback!
Something went wrong. Please try again.

Thanks for your feedback!

Refer us and get $10 in 3 simple steps!

Step 1

Get link

Get a free personal referral link here

Step 2

Give $10

Your user signs up and upgrade using link

Step 3

Get $10

1,250 free SMSes
OR 1,000 free voice mins
OR 12,000 chats
OR more