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.

1. Getting started
   1. Setup Functions
   2. Setup React App
   3. Work locally
2. Deployment

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.