OWL Shoes Retail Web is an application that demonstrates a website chat widget built for Flex Conversations. It uses Twilio's Conversations JS SDK, Twilio Paste Design library, the Flex WebChats endpoint, Twilio Functions and React.
First we need to setup the server to handle token generation for web chat.
Node supported version is 14 only.
npm install
We provide a handy bootstrap
script to set up the environment variables, but you can alternatively copy the .env.sample
file.
npm bootstrap \
accountSid=YOUR_ACCOUNT_SID \
authToken=YOUR_AUTH_TOKEN \
apiKey=YOUR_API_KEY_SID \
apiSecret=YOUR_API_SECRET \
addressSid=YOUR_ADDRESS_SID \
conversationsServiceSid=YOUR_CONVERSATIONS_SERVICE_SID \
sfdcInstanceUrl=YOUR_SFDC_INSTANCE_URL \
sfdcUserName=YOUR_SFDC_USER_NAME \
sfdcPassword=YOUR_SFDC_PASSWORD \
sfdcSecurityToken=YOUR_SFDC_SECURITY_TOKEN \
sendgridApiKey=YOUR_SENDGRID_API_KEY \
sendgridFromEmail=YOUR_SENDGRID_FROM_EMAIL \
sendgridTemplateId=YOUR_SENDGRID_TEMPLATE_ID \
You can find your Account Sid and Auth Token on the main Twilio Console page.
For more info on how to create an API key and an API secret, please check the documentation.
You can find your Conversations Service Sid on the services page. Make sure to pick the one linked to your Flex Account โ usually it is named Flex Chat Service
and it starts with IS
For the Address Sid, Flex Acccount --> Messaging --> Conversations Address --> click on the edit button of your address and the edit screen will contain Address Sid on the column (Address Configuration SID) . Note this Sid starts with IG
.
cd assets-src
npm install
cp .env.sample .env
Update the twilio function server url
From the root folder
npm run server
Your server will be served at http://localhost:3001/.
npm start
Your app will be served at http://localhost:3000/.
The project can be deployed as a Twilio Service
npm run deploy
After the flow is created. We need to map the flow to flex task routing.
npm run deploy-flows
Refer the run books to configure the agent routing
MIT ยฉ Twilio Inc.