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.
This open source repository includes:
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
http://localhost:3000
)Step 3: Create an Address Configuration SID
phone-number
address-friendly-name
studio-flow
drop down and select messaging-flow
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.
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.
The code for this sample is available on GitHub to view and download.
You will need an Account SID and Auth Token in order to run this code.
Checking for existing account...
Follow the setup instructions in the README to get the sample up and running.