Skip to contentSkip to navigationSkip to topbar
On this page

Set up and use Webchat 3.0 (Public Beta)


(information)

Public Beta

Flex Webchat 3.0 is currently available as a Public Beta product and the information contained in this document is subject to change. This means that some features are not yet implemented and others may be changed before the product is declared as Generally Available. Public Beta products are not covered by a Twilio SLA.

(information)

Info

Not a HIPAA Eligible Service
Webchat 3.0 is not a HIPAA Eligible Service and should not be used in workflows that are subject to HIPAA.

(information)

Info

This page applies to Webchat 3.0. If you are using Webchat 2.0, see Webchat 2.0 installation information instead.

To set up Webchat 3.0, you need to create a deployment key, link the deployment key to a chat address, and add the Flex-generated embed code to your website. This page provides detailed instructions.

You can have multiple deployment keys for different use cases. For example, if you have multiple brands with different domains, you can have a separate webchat widget for each brand.


Set up a new webchat widget

set-up-a-new-webchat-widget page anchor

Use the following steps to set up Webchat 3.0:

Step 1: Create a deployment key

step-1-create-a-deployment-key page anchor

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.
    • Allowed origins : Enter up to 10 trusted URLs where your users can start a chat. Chat sessions are only accepted from these URLs. You must include the protocol and host, and can optionally include a port. The default value is https://demo.flex.twilio.com , which enables you to use Webchat 3.0 in the Flex demo environment.
    • 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.

Step 2: Connect your deployment key to a messaging address

step-2-connect-your-deployment-key-to-a-messaging-address page anchor
  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 .

Step 3: Test your webchat flow

step-3-test-your-webchat-flow page anchor
  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.

Step 4: Embed the webchat widget on your website

step-4-embed-the-webchat-widget-on-your-website page anchor
  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:


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.


Change orchestration and messaging flows

change-orchestration-and-messaging-flows page anchor

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


Update the deployment key for an existing webchat widget

update-the-deployment-key-for-an-existing-webchat-widget page anchor

After you create your deployment key, you can update its settings. From Twilio Console, navigate to Flex > Manage > Webchat and click the edit icon for your deployment key.

If you need to update Allowed origins or Fingerprint sensitivity, you may want to do so outside of normal business hours. When you change these settings, any existing webchat conversations might be disconnected.

You cannot change the deployment key SID or address configuration SID. If you need to change these, see the steps to replace the deployment key for an existing webchat widget.


Replace the deployment key for an existing webchat widget

replace-the-deployment-key-for-an-existing-webchat-widget page anchor

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.

Need some help?

Terms of service

Copyright © 2024 Twilio Inc.