Skip to contentSkip to navigationSkip to topbar
Rate this page:
On this page

Selectable Chat Messages (Flex UI 1.x.x)


(information)

Info

This guide is only for Flex UI 1.x.x. If you have Flex UI 2.x.x, use the pre-built plugins in the Flex Plugin Library.


Overview

overview page anchor
(warning)

Warning

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)(link takes you to an external page) and support plans(link takes you to an external page).

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.

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.


Selectable Messages Architecture.

To deploy this solution, you will need:

  • An active Twilio account. Sign up(link takes you to an external page) 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(link takes you to an external page) 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:


    _10
    # Install the Twilio CLI
    _10
    npm install twilio-cli@2.0 -g
    _10
    # Install the Serverless as Plugin
    _10
    twilio plugins:install @twilio-labs/plugin-serverless

(information)

Info

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).


30-45 minutes


Flex UI 1.29.0


Configure your Flex Workspace

configure-your-flex-workspace page anchor

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

Retrieve your Flex settings

retrieve-your-flex-settings page anchor

Step 1

step-1 page anchor

Navigate to your Flex project in the Twilio Console(link takes you to an external page). Copy your ACCOUNT SID and AUTH TOKEN, and create a new Twilio CLI profile using those credentials:


_10
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:


_10
twilio profiles:use PROFILE_ID

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


_10
twilio profiles:use DIFFERENT_PROFILE_ID

Retrieve your Flex Task Assignment workspace SID:


_10
twilio api:taskrouter:v1:workspaces:list

Example Workspace SID


_10
SID Friendly Name Prioritize Queue Order
_10
WSXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX Flex Task Assignment FIFO


Build the Flex Selectable Chat Messages Source Code

build-the-flex-selectable-chat-messages-source-code page anchor

Make sure you have Node.js (https://nodejs.org(link takes you to an external page)) as well as npm (https://npmjs.com(link takes you to an external page)) installed.

Step 1: In your browser, download the source code(link takes you to an external page) and unzip the files in a local directory.

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


Deploy your Twilio Function

deploy-your-twilio-function page anchor

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

MacOS/LinuxWindows

_10
cd serverless && mv .env.example .env

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


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

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


_10
serverless $ npm install

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


_10
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(link takes you to an external page).

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:


    _10
    {"name": "{{trigger.message.ChannelAttributes.from}}",
    _10
    "channelType": "{{trigger.message.ChannelAttributes.channel_type}}",
    _10
    "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:


_10
accountSID: "ACXXXXXXXXXXXXX"
_10
FlexFlowSID: "FOXXXXXXXXXXXXXX"

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

update_flex_flow.

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


_10
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.


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


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


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

appendix-ways-to-expand-the-solution page anchor

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.

studio_flow.

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

The Web Chat Widget Code

the-web-chat-widget-code page anchor

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.


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


Rate this page: