What is it

Twilio Webchat React app is an application that demonstrates a website chat widget built with Twilio's Conversations JS SDK, Twilio Paste Design Library and Create React App. It’s also fully integrated with Twilio Flex allowing you to add a basic website chat widget to your website with minimum effort.

What you get

This open source repository includes:

• Basic chat features like typing indicators, read receipts and attachments support
• Integration to your Twilio Flex customer support center
• Web Accessibility with Twilio Paste
• Easy instructions to run locally or deploy to your website
• No code changes are required to get started. Use as is or clone to customize to your needs

Configuring Your Settings

Before deploying this application, follow these steps to configure your settings and create the necessary keys:

Step 1: Log in to Twilio

Step 2: Create a Deployment Key

• Select Create Deployment Key. Navigate to Flex Webchat
• Select Create Deployment
• Insert Friendly Name
• Insert local port (ie: http://localhost:3000)
• Select Create Deployment Key 

Step 3: Create an Address Configuration SID

• Navigate to Messaging and Select Create new Address
• Add phone-number
• Add address-friendly-name
• Select studio-flow drop down and select messaging-flow
• Select Create Address
• For your Address Type, Select Chat

• Select the Deployment Key SID dropdown and select the Deployment Key SID you created.
• Add an Address friendly name
• Select the Integration Type dropdown and Select Studio

• Click the Studio Flow dropdown and select Messaging Flow

• Click Create Address

Deploying in the Console (No Code)

If you would like to deploy this application in the Console without using code, navigate back to your Deployment Key Page and you will see your Address Configuration SID populated. Select Launch Demo to run the React Webchat App from the console.

Deploying Locally

In order to run latest version (V3), make sure you are on the flex-webchat-ui branch. Then, follow the setup instructions in the README to start the Local App Server.

Once the local app server is running replace the port-name and deployment-key placeholders with the same port-name you added to the Allowed origins section in the Deployment Key page and deployment-key

You should be able to find your app at http://port-name/?deploymentKey=deployment-key&appStatus=open

To deploy the sample outside of the console, see the steps below.