Twilio Web Chat – My memo Wall

- - Although Twilio is planning on sunsetting the webchat interface in July 25, 2022 , webchat interface in Flex will continued to be supported
  - Sample code
  - Twilio Chat Client SDK
    - Documentation
    - Event fires
  - Event sequence:
    1. a customer opens the Flex WebChat UI component, he’s greeted by a message from the bot
      - A new user is created with Friendly Name Customer
      - A new chat channel is created, and the user above is added to that channel
    2. the user sends a message in the chat
      - A new message is added to the channel
      - A new Task is created in the “Flex Task Assignment” TaskRouter workspace. This task has the following attributes: {"channelSid":"CH********","name":"Customer","channelType":"web"}. Note that the channelSid is the SID of the chat channel created above
      - A Reservation for the task is created (if any worker is available)
    3. Once the TaskRouter Worker accepts the reservation, it is added to the chat channel.
  - Manage Chat Flows
  - From Twilio chat core concepts: Twilio’s servers and Flex, including the customer WebChat widget, communicate using secure WebSockets. These connections are authenticated using the same JWT token security as the rest of Flex, meaning they are governed by the same Single Sign On (SSO).
  - Github example webchat redux
  - Github example customer end chat
  - When the conversation then ends after the agent presses the End Chat button, two things happen:
    - The Chat channel is marked as inactive
    - The Proxy session is deleted
  - Enable Channel Janitor
```
curl -X POST "https://flex-api.twilio.com/v1/FlexFlows/FOxxx" \
     -d "JanitorEnabled=true" \
     -u $ACCOUNT_SID:$AUTH_TOKEN
```
  - Another slightly more complex manual solution is using the same mechanism that Flex uses internally and simply setting the status of the Chat channel to “INACTIVE”. This will automatically clear the associated Proxy session.This is a bit more graceful solution than deleting the channel and it allows you to keep the Chat channel around, for example if you need to access the conversation history.Two notes on using this approach however:- The attributes channel property needs to be updated as a whole JSON object, so typically you would want to read its value first, modify the state value and then POST the whole object back
    – In order to trigger the backend cleanup mechanism, you will need to include the X-Twilio-Webhook-Enabled header
  - Webchat with Studio flow
    - - curl -X POST "https://flex-api.twilio.com/v1/FlexFlows" \ --data-urlencode "ChannelType=web" \ --data-urlencode "Enabled=True" \ --data-urlencode "IntegrationType=studio" \ --data-urlencode "FriendlyName=Alternate WebChat Flow" \ --data-urlencode "Integration.FlowSid=FWXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" \ --data-urlencode "ChatServiceSid=ISXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" \ -u Account_sid:$AUTH_TOKEN
      - FlowSid is the studio flow sid
      - To find your account’s ChatServiceSid, navigate to Proxy > Services in the Twilio Console and select the Flex Proxy Service. You should see the Chat Instance SID field in the Optional section.