Twilio Flex WebChat

Flex WebChat must be loaded from the CDN. Glance does not provide an NPM package, which is required for React deployments.

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

  1. Set up a Flow for 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.

twilio twilio