On this page

WebChats Resource

Flex Webchats is an endpoint that simplifies orchestrating a Conversation for a guest user: It creates a conversation, adds a randomly generated user identity to this conversation, and configures the Conversation based on the Address SID you provide. To get started with this endpoint, please refer to the web chat React-based demo app.

(information)

Info

Webchat 3.0 (currently in Public Beta) provides a secure way to add a Twilio-hosted chat widget to your website. Before deciding to use the Webchat React App, you may want to consider using Webchat 3.0. For a comparison between these apps, see Migrate to Webchat 3.0.

WebChat Properties

Property nameTypeRequiredDescriptionChild properties

conversation_sidSID<CH>Optional

Not PII

The unique string representing the Conversation resource created.

Pattern: ^CH[0-9a-fA-F]{32}$Min length: 34Max length: 34

identitystringOptional

Not PII

The unique string representing the User created and should be authorized to participate in the Conversation. For more details, see User Identity & Access Tokens.

Create a WebChannel resource

POST https://flex-api.twilio.com/v2/WebChats

Headers

Property nameTypeRequiredPIIDescription

Ui-VersionstringOptional

Not PII

The Ui-Version HTTP request header

Request body parameters

Encoding type:application/x-www-form-urlencoded

SchemaExample

Property nameTypeRequiredDescriptionChild properties

AddressSidstringrequired

Not PII

The SID of the Conversations Address. See Address Configuration Resource for configuration details. When a conversation is created on the Flex backend, the callback URL will be set to the corresponding Studio Flow SID or webhook URL in your address configuration.

ChatFriendlyNamestringOptional

Not PII

The Conversation's friendly name. See the Conversation resource for an example.

CustomerFriendlyNamestringOptional

Not PII

The Conversation participant's friendly name. See the Conversation Participant Resource for an example.

PreEngagementDatastringOptional

Not PII

The pre-engagement data.

Create a Web Channel

1// Download the helper library from https://www.twilio.com/docs/node/install
2const twilio = require("twilio"); // Or, for ESM: import twilio from "twilio";
3
4// Find your Account SID and Auth Token at twilio.com/console
5// and set the environment variables. See http://twil.io/secure
6const accountSid = process.env.TWILIO_ACCOUNT_SID;
7const authToken = process.env.TWILIO_AUTH_TOKEN;
8const client = twilio(accountSid, authToken);
9
10async function createWebChannel() {
11  const webChannel = await client.flexApi.v2.webChannels.create({
12    addressSid: "IGXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
13    chatFriendlyName: "Customer Support",
14    customerFriendlyName: "Alice",
15  });
16
17  console.log(webChannel.conversationSid);
18}
19
20createWebChannel();

Output

1{
2  "conversation_sid": "CHaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
3  "identity": "seinfeld"
4}