Set up and use Webchat 3.0 (Public Beta)

Use the following steps to set up Webchat 3.0:

In some environments, one deployment key is already set up for you and connected to a messaging address. If your environment includes a default deployment key and you'd like to use it, skip to Step 3: Test your webchat flow.

Otherwise, complete the following steps to create a deployment key:

1. In Console, navigate to Flex > Manage > Webchat .
2. Click Create Deployment Key .

3. Enter the following information:

   • Friendly name : The name you want to use for this deployment key. If you leave this field blank, the name will match the deployment key SID.
   • Fingerprint sensitivity : We recommend leaving the IP address checkbox selected to use this option and make your webchat widget more secure.
4. Click Create Deployment Key .
   You are returned to the Webchat page. Your new deployment key appears in the Deployment Keys list.

1. Navigate to Flex > Manage > Messaging .
2. Click Create new address .

3. Enter the following information:

   • Address type : Chat
   • Address implementation : Conversations
   • Deployment key SID : Click the field to see a list of deployment keys. Choose the deployment key that you created.
   • Address friendly name : Optionally, enter a name that you want to use for this address.
   • Integration type : Studio or Webhook . The most common configuration is to integrate a chat address to Flex using a Studio Flow.
   • Studio Flow : Select the flow that you want to use for chat. Unless you have removed or reconfigured it, the out-of-box Studio Flow Chat Flow is a good option.
4. Click Create Address .

1. Navigate to Flex > Manage > Webchat .
2. In the row for your deployment key, click Launch Demo . A new tab opens with a webchat widget.
3. Enter a name, email address, and webchat message, then click Start chat .
4. From Flex UI, go to the tasks queue and verify that your chat appears.
5. Reply as the agent, then return to your demo tab and verify that you see the response in the chat.

1. In the row for your new deployment key, click the edit icon.
2. On the Edit Deployment Key page, scroll down to the Embed code section.
3. Copy the embed code sections to the head and body of your website's index.html file. You may need to work with your website administrator to complete this task.
4. In the body of your website's index.html file, also add the following line: <div id="twilio-webchat-widget-root"></div>

There are two things you can customize for Webchat 3.0:

• theme.isLight : Control whether webchat uses light mode or dark mode.
• appStatus : Control whether the webchat widget is open by default.

By default, file attachments are enabled in Webchat 3.0. For details about attachments in Webchat 3.0, see File Attachments and API Limits.

You can restrict chat attachment file size and file types. For details, see "How do I update my file attachment configuration for Flex Conversations?" in Conversations FAQ and Troubleshooting.

Because Webchat 3.0 is built on Twilio Conversations, you can change orchestration and messaging flows with the Interactions API.

If your deployment key is compromised, complete the following steps:

1. Follow steps 1-3 above to set up a new webchat widget with a new deployment key and a new chat address. You cannot update an existing chat address with the new deployment key.
2. In Step 4: Embed the webchat widget on your website , delete your existing webchat embed code entries and replace them with the new embed code.
3. Delete the compromised deployment key and chat address.