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

Inbound Messages with Flex WebChat UI

(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 Flex Conversations.

Webchat is a common channel that customers use to communicate with a Flex agent. The Flex Webchat UI offers you a simple way to embed chat on your website and seamlessly manage messaging orchestration.

Any inbound messages sent with the Webchat widget get passed through to your contact center. The end user using the widget is generally unauthenticated, or anonymous. You can gather information through a pre-engagement form before presenting the chat interface and pass the gathered meta-data to Studio, Flex, or your internal systems for validation and personalization.

In this use case, the Flex Flow and Studio Flow are available by default with standard Flex setup. The Flex Flow will be specified when configuring the Flex Webchat UI.

(information)

Info

The event flow detailed below is automatically handled by Twilio Webchat UI and requires no further integration. It is provided to show how the data passed from the Webchat UI is used when creating the Flex ChatChannel.

How Inbound Webchat with Flex Works

how-inbound-webchat-with-flex-works page anchor

First, Twilio creates an access token for the guest user.

  • Flex Webchat UI uses standard Twilio token generation

    • Auto-generated token expires after one hour
    • The Flex Webchat UI will automatically renew this token before it expires

This doesn't require any coding on your part. Once the access token is created, Twilio orchestrates the relevant Chat engagement and Chat Channel, connects the Integration Type, and places the User into the Chat Channel. Twilio ensures other parts of the defined Message Handler are set.

  • Channels are generated via the following endpoint: https://flex-api.twilio.com/v1/WebChannels
  • This request uses the Access Token that the Webchat UI generated in the first step

If you have configured a pre-engagement with the Webchat UI, Flex will pass the pre-engagement data as a part of this request.

How Flex Creates the Webchannel

how-flex-creates-the-webchannel page anchor
Node.js
Python
C#
Java
Go
PHP
Ruby
twilio-cli
curl

_21
// Download the helper library from https://www.twilio.com/docs/node/install
_21
const twilio = require("twilio"); // Or, for ESM: import twilio from "twilio";
_21
_21
// Find your Account SID and Auth Token at twilio.com/console
_21
// and set the environment variables. See http://twil.io/secure
_21
const accountSid = process.env.TWILIO_ACCOUNT_SID;
_21
const authToken = process.env.TWILIO_AUTH_TOKEN;
_21
const client = twilio(accountSid, authToken);
_21
_21
async function createWebChannel() {
_21
const webChannel = await client.flexApi.v1.webChannel.create({
_21
chatFriendlyName: "ChatFriendlyName",
_21
customerFriendlyName: "CustomerFriendlyName",
_21
flexFlowSid: "FOaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
_21
identity: "Identity",
_21
});
_21
_21
console.log(webChannel.accountSid);
_21
}
_21
_21
createWebChannel();

Output

_10
{
_10
"flex_flow_sid": "FOaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
_10
"account_sid": "ACaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
_10
"sid": "CHaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
_10
"date_created": "2016-08-01T22:10:40Z",
_10
"date_updated": "2016-08-01T22:10:40Z",
_10
"url": "https://flex-api.twilio.com/v1/WebChannels/CHaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
_10
}

Subsequent messages exchanged are now being passed using the Chat SDK from the Webchat UI.

Rate this page: