Menu

Selectable Chat Messages

Automate Web Chat experience with a self-service flow

All Flex accounts created on or after May 26th, 2022 are using Flex UI 2.x.x. Some screenshots and required software versions on this page may only be compatible with Flex UI 1.x.x and are therefore no longer accurate. We are working to update the page to reflect the new UI experience. Learn more about Flex UI 2.x.x here.

This solution features sample code that is provided “as is” and is not production grade. The featured code does not account for edge case handling, scalability, and reliability. It is not covered under Twilio's Service Level Agreement (SLA) and support plans.

This solution provides the ability to have selectable messages with Web Chat in Flex. The goal behind this is to build a scripted experience to guide the customer through a “self-service” type of chat flow. The solution can be expanded into more robust self-service use cases for Web Chat.

Selectable Chat Messages

How It Works

Studio Flow passes attributes of the chat channel to a function, that we subscribe to from the web. Any time the attributes change, the clickablemessage object is pulled and then pushed this into a redux store. The buttons are then rendered based on what is contained within the object. As the customer progresses through the Studio Flow, it pushes the next set of scripted answers as clickable buttons on their end, thus providing a guided experience through the Studio Flow.

Architecture

Selectable Messages Architecture

Prerequisites

To deploy this solution, you will need:

  • An active Twilio account. Sign up if you don't already have one
  • npm version 6.0.0 installed (type npm -v in your terminal to check)
  • A Node.js long-term-support (LTS) version installed, 14 recommended (type node -v in your terminal to check)
  • A Twilio Flex instance where you have admin permissions. See our getting started guide to create one
  • Twilio CLI along with Serverless Plugin. Run the following in a command shell:
    # Install the Twilio CLI
    npm install twilio-cli@2.0 -g
    # Install the Serverless as Plugin
    twilio plugins:install @twilio-labs/plugin-serverless

If you're running Linux, click on the Linux tab for the Twilio CLI installation instructions. If you're running Windows, make sure to run the Windows command prompt as an administrator to install the Serverles/Flex plugins for the Twilio CLI. The Windows commands in this guide use PowerShell (for Node.js/npm installation).

Deployment Time

30-45 minutes

Version Compatibility

Flex UI 1.29.0

Configure your Flex Workspace

In order to use the solution, you need to prepare your Flex Task Assignment workspace.

Retrieve your Flex settings

Step 1

Navigate to your Flex project in the Twilio Console. Copy your ACCOUNT SID and AUTH TOKEN, and create a new Twilio CLI profile using those credentials:

twilio profiles:create

You will be prompted to enter your Twilio Account SID, Auth Token, and a shorthand identifier for your profile. When choosing a shorthand identifier, pick one that is meaningful and easy to remember. Once your profile has been created, activate it by running:

twilio profiles:use <profile_name>

Keep in mind that this account will be used for the rest of the deployment. In order to switch accounts, use the following command:

twilio profiles:use <different_profile>

Step 2

Retrieve your Flex Task Assignment workspace SID:

twilio api:taskrouter:v1:workspaces:list

Example Workspace SID

SID                                      Friendly Name               Prioritize Queue Order
WSXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX       Flex Task Assignment        FIFO    

Build the Flex Selectable Chat Messages Source Code

Make sure you have Node.js (https://nodejs.org) as well as npm (https://npmjs.com) installed.

Step 1: In your browser, download the source code and unzip the files in a local directory.

Step 2: Run npm install to install the plugin package dependencies.

Deploy your Twilio Function

Step 1: From the root directory of your copy of the source code, change into serverless and rename .env.example to .env.

cd serverless && mv .env.example .env
C:\Users\xxxxxx\flex-selectable-chat-messages> cd serverless && move .env.example .env

Output

1 file(s) moved.

Step 2: Open .env with your text editor and modify the following:

ACCOUNT_SID = Found at https://www.twilio.com/console
AUTH_TOKEN = Found at https://www.twilio.com/console
TWILIO_WORKSPACE_SID = WSXXXXXXXXXXXXXXXXXX

Step 3: Run the following to install the Function dependencies in serverless directory:

serverless $ npm install

Step 4: Deploy the Twilio function to your account using the Twilio CLI:

twilio serverless:deploy

Step 5: Copy the domain as you'll need this for the .env as you'll use this when you import the studio flow

Step 6: Import the Studio Flow located within /serverless/studio_flow to https://www.twilio.com/console/studio/dashboard.

Here is how to import a json within the console:

Import-json

Step 7: Update the Send-To-Flex widget with your Flex details:

  • Workflow: Select preferred Workflow
  • Channel: Programmable Chat
  • Sample attributes for the required attributes field:
    {"name": "{{trigger.message.ChannelAttributes.from}}",
    "channelType": "{{trigger.message.ChannelAttributes.channel_type}}",
    "channelSid": "{{trigger.message.ChannelSid}}"}

Step 8: From the root directory of your copy of the source code, change into /public/assets and rename webchat-appConfig.example.js to webchat-appConfig.js

Step 9: In webchat-appConfig.js, change your Account SID and Flex Flow SID:

accountSID: "ACXXXXXXXXXXXXX"
FlexFlowSID: "FOXXXXXXXXXXXXXX"

Flex Flow corresponds to https://console.twilio.com/us1/develop/flex/manage/messaging?frameUrl=/console/flex/messaging web flow which you will need to edit to point to your imported Studio Flow:

update_flex_flow.png

Develop Locally

In order to develop locally, you can use the Webpack Dev Server by running:

flex-selectable-chat-messages $ npm start

This will automatically start up the Webpack Dev Server and open the browser for you. Your app will run on http://localhost:3000. If you want to change that you can do this by setting the PORT environment variable.

When you make changes to your code, the browser window will be automatically refreshed.

Deploy the Solution

When you are ready to deploy your web chat widget, you'll need to run build:

flex-selectable-chat-messages $ npm run-script build

Test the Solution

After you have uploaded your Web Chat build and deployed it to your website start a new chat from the web page.

This will trigger a new chat interaction that will flow through the previously published Studio Flow, pushing selectable chat messages as they are updated within the Studio Flow.

Appendix: Ways to Expand the Solution

If you examine the Studio Flow widgets, you’ll see how we continually update the clickablemessage object within the widgets. As these change, we are subscribing to these changes within our web chat widget from the front end. Any time those change, we push those changes to redux and render the “clickable” messages within the web chat widget front end.

Example

The Studio Flow

studio_flow.png

The Object

{"clickableMessages": [ {"key":"yes{{flow.variables.count}}", "message":"yes"}, {"key":"no{{flow.variables.count}}", "message":"no"}]}

The Web Chat Widget Code

We are going to get the channel, then add a channel listener (to subscribe to) anytime there are updates to the attributes of the channel. From there we will push the updated clickableMessages object into redux and that is how we are rendering button/component changes as the studio flow push new objects throughout the flow.

getChannelAttributes() {
   const dispatch = this.props.dispatch;

   FlexWebChat.manager.chatClient.getChannelBySid(this.props.channelSid)
   .then(channel => {
     channel.on('updated', ({ channel, updateReasons }) => {
       if ( updateReasons.indexOf('attributes') !== -1 &&channel.attributes.status === "INACTIVE") {
         FlexWebChat.Actions.invokeAction('RestartEngagement');
         return;
       }
       if (undefined !== channel.attributes.clickableMessages && (updateReasons.indexOf('attributes') !== -1)) {
         dispatch({
           type: 'SET_CLICKABLE_MESSAGES',
           payload: {
             clickableMessages: channel.attributes.clickableMessages
           }
         })
       }
     });
   })
 }
}
Rate this page:

Need some help?

We all do sometimes; code is hard. Get help now from our support team, or lean on the wisdom of the crowd by visiting Twilio's Stack Overflow Collective or browsing the Twilio tag on Stack Overflow.

Thank you for your feedback!

Please select the reason(s) for your feedback. The additional information you provide helps us improve our documentation:

Sending your feedback...
🎉 Thank you for your feedback!
Something went wrong. Please try again.

Thanks for your feedback!

thanks-feedback-gif