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

Installing and using Flex WebChat 2.0


(information)

Info

This guide is for Flex UI 1.x.x and channels that use Programmable Chat and Proxy. If you are using Flex UI 2.x.x or you are starting out, we recommend that you build with Webchat 3.0.

(information)

Info

Auto-Generated Documentation for the Flex Webchat UI(link takes you to an external page) is now available as a Public Beta distribution. The auto-generated documentation is accurate and comprehensive but may differ from what you see in the official Flex Webchat UI documentation.

(information)

Info

Flex WebChat is not supported on mobile devices.


What is Flex WebChat?

what-is-flex-webchat page anchor

Flex WebChat 2.0 is a chat widget that you can embed on your website. The widget helps your customers chat with an agent without needing to leave your webpage. It is natively integrated with the Flex Contact Center.


What can you do with WebChat?

what-can-you-do-with-webchat page anchor

The Flex WebChat experience is fully customizable. WebChat can be customized in the following ways:

(warning)

Warning

The following WebChat documentation applies to WebChat version 2.0.0 or higher. Please refer to the release notes to see what has changed since version 2.0.0.


Getting started with WebChat

getting-started-with-webchat page anchor

There are currently two ways to consume Flex WebChat:


To get access and set up Flex WebChat, you will need to complete the Flex Quickstart first.


There are 2 ways to add Flex WebChat from CDN:

Option 1

option-1 page anchor

The following steps are the quickest way to add Flex WebChat to your app. However, a CDN setup will not allow for more advanced programmability of the initialization flow for Flex WebChat.

  1. Add the following script tag to the index.html head tag to include WebChat bundle from CDN.

You can optionally include an integrity token(link takes you to an external page) to verify that Flex WebChat is delivered without unexpected manipulation. If so, make sure to include "integrity" and "crossorigin" keys in the script.


_10
<script src="https://assets.flex.twilio.com/releases/flex-webchat-ui/2.9.1/twilio-flex-webchat.min.js" integrity="sha512-yBmOHVWuWT6HOjfgPYkFe70bboby/BTj9TGHXTlEatWnYkW5fFezXqW9ZgNtuRUqHWrzNXVsqu6cKm3Y04kHMA==" crossorigin></script>

The following table displays the integrity tokens of previous versions (starting from v2.2.0).

VersionIntegrity Token
2.9.3sha512-lL9Ihx5WpKGmP1wzno3O9BMWAnKJDxfNfoE7/HnVfESbtBAzA6jUhAOU+b4Nq3WvZthSf7mOH3SNo7+zVP7BVQ==
2.9.2sha512-tJ0ckYeprEDAU9/Lx+11oITGmYQvu9eIyhzNtYrmWcOHYW0Wexkry26dvl0Z+3ypj9ErNuv3o8x7OeSMtaGZnw==
2.9.1sha512-yBmOHVWuWT6HOjfgPYkFe70bboby/BTj9TGHXTlEatWnYkW5fFezXqW9ZgNtuRUqHWrzNXVsqu6cKm3Y04kHMA==
2.9.0sha512-gfk5re40mGDic7co5dfTc4ZVtL2sQ0xFrzsJsMg1QbDisA3UyQB5Crd7Yyk7AOeGvdX1pltln7pq/aADzTJD4g==
2.8.1sha512-KzpB56iRohSbDOkfM/V0PTp9DGHMno2EJJx6Zg8Ul3byOV3xtAurIZ+NibcO+cc0SEDvodI/5SKMSv2p+gwSYw==
2.8.0sha512-442DGR3EEEkHK5QAlm+JpfehHr8+x3wq5TAbypQRbmEE5oHl0LeAtCVk3xfZ6bV+QjrlwKGkbT51zQ+v1A2Ueg==
2.7.1sha512-uxirrFUoGuvGOOIkCX5ZzQ5WfEuDqRwtherlm5QjZxNeVoFgzL3KZXA98NHV8RsAdR2awLmOmBN1r/QCgEFvhA==
2.7.0sha512-DWeN99d0UwyKwY/cBk9bMrjwdU6XFWynM4kQ+Yee6dZNwf0ZVzLJhJs2d6GbG/W3VOw6mUVS0JhSw4WI2wVeyA==
2.6.1sha512-cQHsT9wKBmSjqHJxF85LdMKQiTXW6Bvmvq8mgg05lvcq0RMZmIdAe/hBjlmwZR1WgZVbq1CW2e+8DWfifDdiLw==
2.6.0sha512-E1OX3Cyq3KaDo4WM6fITGRv2eiGQbK40AJxNdsvC6BRxkUGp7f4RchZeOAVXHTTA3+4KjSeZDJB1cFpikR5EVw==
2.5.1sha512-PtzV20UxBmoawZw6NrwzeHTrGYUBTVOe2dRO1PFnhilM48HKgbQ6BId5QURWoK3d3Fjgw03h8xTl3YvBvqzIuQ==
2.5.0sha512-aJbAHiYQxwqK+Hi32EnFKywUXDp8bPtKNwm/pSgd5Eie7OW28RQlKxmKqvDhiekVRD0reJNSbzF5wjK4VG85sQ==
2.4.0sha512-sJe2ZYbixQ0qDkEDC0c0DWjEAo6a5+fwPjCVQ4uWAj89hnFsYZgwbG/AFWlbNzFKkue7lM5oWqXjMp7p6Fi0KQ==
2.3.1sha512-v+iq1pWN5HHQtNoUKDnQCVJhTgmbozCgRKkIdCI4Ub8bKuXs7TmPDoEAtPZJXExY+0CNw4vU+TlosD6MEvNn+g==
2.3.0sha512-G4oFESS6nt1URwN23X670e1N7UIgiGJyINEsyrexNp28GSSrJ6GVwJCDElIDaZUIHOJiEwoJPdi2iT5S03XzKw==
2.2.1sha512-q5oRRUPjLeW69a3nlGBt0iR4V5yBY/7ALQ85veEPFRh1xfp8LPy6/JwITfHJVqfNnDOqXpvnyiijNGWYlK8dSw==
2.2.0sha512-bOmqok+FZdtlOKVEy830tV9tNvTm7dknDYWwZLcB/O4q3Cg5oS7jDoZO4zzHL2nAjlc5Im4Ws+4RZNemvetSHA==
  1. Add the following script tag to the index.html body tag to initialize WebChat.

_10
<script>
_10
const appConfig = {
_10
accountSid:"AC...",
_10
flexFlowSid:"FO..."
_10
};
_10
Twilio.FlexWebChat.renderWebChat(appConfig);
_10
</script>

The following steps will allow you to customize the FlexWebChat initialization flow before you render the WebChat, as it consists of two parts: initialize and render. This option allows you to tap into customization before the render method executes.


_20
Twilio.FlexWebChat.createWebChat(appConfig).then(webchat => {
_20
const { manager } = webchat;
_20
_20
// Posting question from preengagement form as users first chat message
_20
Twilio.FlexWebChat.Actions.on("afterStartEngagement", (payload) => {
_20
const { question } = payload.formData;
_20
if (!question)
_20
return;
_20
_20
const { channelSid } = manager.store.getState().flex.session;
_20
manager
_20
.chatClient.getChannelBySid(channelSid)
_20
.then(channel => channel.sendMessage(question));
_20
});
_20
// Changing the Welcome message
_20
manager.strings.WelcomeMessage = "New text for welcome message";
_20
_20
// Render WebChat
_20
webchat.init();
_20
});

While logged into Flex as an administrator, you can find the flexFlowSid and accountSid in the Flex admin(link takes you to an external page) (https://flex.twilio.com/admin/developers). You can learn more about Projects in the Twilio Support Documentation(link takes you to an external page).


Consuming from NPM and running locally

consuming-from-npm-and-running-locally page anchor

To get you started with consuming the @twilio/flex-webchat-ui package from npm, we provide a sample project(link takes you to an external page) based on create-react-app(link takes you to an external page).

Run the following steps to get started using the sample project:

  1. Clone the sample project from GitHub.

_10
git clone https://github.com/twilio/flex-webchat-ui-sample.git

  1. Change into the flex-webchat-ui-sample directory, then install dependencies.

_10
cd flex-webchat-ui-sample
_10
npm install

  1. Copy the sample configuration and edit webchat-appConfig.js accordingly to your Twilio account.

_10
cp public/assets/webchat-appConfig.sample.js public/assets/webchat-appConfig.js

  1. Start the test server.

_10
npm start

  1. Your local Flex UI will be running on http://localhost:8081 .

WebChat default behavior

webchat-default-behavior page anchor
WebChat.

Out of the box, the WebChat is configured to initiate chat (trigger startEngagement action) on user entryPoint click. The following steps happen on start of the engagement:

  • Token is issued
  • Chat channel is created
  • Programmable chat user is created with default friendlyName and added as a member to the channel
  • MessagingCanvas is loaded with the created channelSid
  • A predefined message is shown to the user as a call to action.

WebChat is one of the channels that is integrated with Flex out of the box. When an incoming message is sent to the chat channel, it triggers a Studio Flow. By default, this is the Webchat Flow, which you can customize within the Twilio Console(link takes you to an external page).

The first incoming message on the chat channel will trigger a new execution on the Studio Flow. Here you can automate a conversation using the Send & Wait for Reply widget before passing the conversation directly to an agent with the Send to Flex widget.

The Send to Flex widget then creates a TaskRouter task with the attributes provided, and removes the chat channel webhook so that future incoming messages won't retrigger the Studio flow.

Pre-engagement data can be accessed by Studio's Liquid syntax. For example, you could include in the Send to Flex widget:


_10
{"question": "{{trigger.message.ChannelAttributes.pre_engagement_data.question}}"}


Now that you are all set up and got WebChat running, you can:

and much more!


Rate this page: