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

Chat and SMS Transfers (Flex UI 1.x.x)


(information)

Pre-built Chat Transfer plugin is available in Flex UI 2.x.x**

This guide is only for Flex UI 1.x.x. If you have Flex UI 2.x.x, install the ready-to-use Chat Transfer(link takes you to an external page) plugin. You must be logged in to Twilio console to access 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).

The Chat and SMS Transfer solution helps contact center administrators transfer Chats and SMS between Agents. When a customer is interacting with an Agent via Chat or SMS, they can be transferred to another agent or to a queue of agents. This solution supports "cold" chat or SMS transfers.

chat-sms-transfer.

chat-sms-transfer-diagram.

To deploy this solution, you will need:

  • An active Twilio account with Flex provisioned. Refer to the Flex Quickstart to create 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, version 14 recommended (type node -v in your terminal to check).
  • Twilio CLI along with the Flex CLI Plugin and the Serverless Plugin. Run the following commands to install them:


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

(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 minutes


Tested Flex versions and operating systems

tested-flex-versions-and-operating-systems page anchor
  • Flex v1.18.1-1.30.0
  • macOS/Linux
  • Windows 10

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

To retrieve your Flex workspace SID from the Twilio Console, navigate to the TaskRouter Dashboard.

Retrieve the unique IDs (or SIDs) of the queues you wish to associate with your Chat Transfer workflow. Copy these values for the next step.


_10
twilio api:taskrouter:v1:workspaces:task-queues:list --workspace-sid WSXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Example task queue SID


_10
SID Friendly Name Task Order
_10
WQXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX Everyone FIFO
_10
_10
_10
To retrieve your Flex task queue SID from the Twilio Console, navigate to TaskRouter > Flex Task Assignment > TaskQueues.

Create a new TaskRouter workflow

create-a-new-taskrouter-workflow page anchor

To create a new workflow, run the following command in your terminal. Replace the task queue and workspace SID placeholders with the SIDs you retrieved in the previous steps.

macOS/LinuxWindows

_42
CONFIGURATION=$(cat << EOF
_42
{
_42
"task_routing": {
_42
"filters": [
_42
{
_42
"filter_friendly_name": "Worker Filter",
_42
"expression": "transferTargetType == 'worker'",
_42
"targets": [
_42
{
_42
"queue":"WQXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
_42
"expression":"worker.sid == task.targetSid"
_42
}
_42
]
_42
},
_42
{
_42
"filter_friendly_name": "Sales Queue",
_42
"expression": "transferTargetType == 'queue' AND targetSid == 'WQYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY'",
_42
"targets": [
_42
{
_42
"queue":"WQYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY"
_42
}
_42
]
_42
},
_42
{
_42
"filter_friendly_name": "Support Queue",
_42
"expression": "transferTargetType == 'queue' AND targetSid == 'WQZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ'",
_42
"targets": [
_42
{
_42
"queue":"WQZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ"
_42
}
_42
]
_42
}
_42
],
_42
"default_filter": {
_42
"queue": "WQXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
_42
}
_42
}
_42
}
_42
EOF
_42
)
_42
_42
twilio api:taskrouter:v1:workspaces:workflows:create --workspace-sid WSXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX --friendly-name "Chat Transfers" --configuration "$CONFIGURATION"

Example workflow confirmation


_10
SID Friendly Name Document Content Type
_10
WWXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX Chat Transfers null

For more details on expected workflow settings, see Plugin Details(link takes you to an external page). To learn about configuring more complex workflows, see Create a Workflow Resource and Configuring Workflows: Complex Routing Example.


Download the Chat/SMS Transfer Flex Plugin

download-the-chatsms-transfer-flex-plugin page anchor

Download the plugin source code(link takes you to an external page) and unzip the files in a local directory.


Deploy your Twilio Function

deploy-your-twilio-function page anchor

We will deploy the Chat/SMS Transfer function to your Flex instance. The function is called from the plugin you will deploy in the next step and integrates with TaskRouter, passing in required attributes to perform the chat transfer.

Step 1: Change into the functions directory and rename .env.example(link takes you to an external page).

macOS/LinuxWindows

_10
cd ~/plugin-chat-sms-transfer/functions
_10
mv .env.example .env

Step 2: Open .env and set the environment variables mentioned in the file.


_10
TWILIO_ACCOUNT_SID = your Account SID from twil.io/console
_10
TWILIO_AUTH_TOKEN = your Auth Token from twil.io/console
_10
TWILIO_WORKSPACE_SID = your Flex Task Assignment workspace ID
_10
TWILIO_CHAT_TRANSFER_WORKFLOW_SID=your Flex Workflow ID

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


_10
twilio serverless:deploy

(information)

Info

When running on Windows, you may see an error with the Twilio Serverless deployment command. To work around the issue, set your TWILO_ACCOUNT_SID and TWILO_AUTH_TOKEN as environment variables. Refer to the previous section for examples of how to set an environment variable in Windows.

Step 2: Open .env and set the environment variables mentioned in the file.


_10
TWILIO_ACCOUNT_SID = your Account SID from twil.io/console
_10
TWILIO_AUTH_TOKEN = your Auth Token from twil.io/console
_10
TWILIO_WORKSPACE_SID = your Flex Task Assignment workspace ID
_10
TWILIO_CHAT_TRANSFER_WORKFLOW_SID=your Flex Workflow ID

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


_10
twilio serverless:deploy

(information)

Info

Debugging tip: pass the -l or logging flag to review deployment logs. For example, you can pass -l debug to turn on debugging logs.


Once you have deployed the function, you can deploy the plugin to your Flex instance. Run the following commands in the plugin directory. We will leverage the Twilio CLI to build and deploy the plugin:


_10
npm install

You need to modify the source file to mention the Serverless domain of the function that you deployed previously. In the root plugin directory, rename .env.example:

macOS/LinuxWindows

_10
cp .env.example .env

Open .env with your text editor and set the environment variables listed in the file:


_10
# Paste the Function deployment domain
_10
REACT_APP_FUNCTION_DOMAIN='https://plugin-chat-sms-transfer-functions-xxxx-dev.twil.io';

When you are ready to deploy the plugin, run the following in a terminal:


_10
twilio flex:plugins:deploy --major --changelog "Update the plugin to use Builder v4" --description "Chat and SMS Cold Transfers in Flex"

Example plugin deployment output


_10
✔ Validating deployment of plugin plugin-chat-sms-transfer
_10
⠧ Compiling a production build of plugin-chat-sms-transferPlugin plugin-chat-sms-transfer was successfully compiled with some warnings.
_10
✔ Compiling a production build of plugin-chat-sms-transfer
_10
✔ Uploading plugin-chat-sms-transfer
_10
✔ Registering plugin plugin-chat-sms-transfer with Plugins API
_10
✔ Registering version v1.0.0 with Plugins API
_10
_10
🚀 Plugin (private) plugin-chat-sms-transfer@1.0.0 was successfully deployed using Plugins API

Enable the plugin on your Flex application

enable-the-plugin-on-your-flex-application page anchor

The previous step only deploys your plugin — you still need to enable it for your Flex application. To do so, run:


_10
twilio flex:plugins:release --plugin plugin-chat-sms-transfer@1.0.0 --name "Chat and SMS Transfers" --description "Enabling chat and SMS transfers using Solution Guide"

View the plugin on your Plugins Dashboard

view-the-plugin-on-your-plugins-dashboard page anchor

Now navigate to the Plugins Dashboard(link takes you to an external page) to review your recently deployed plugin and confirm that it's enabled for your contact center.

You are all set to test Chat and SMS Transfers on your Flex application!

(warning)

Warning

Keep in mind that your Agents need to refresh their browsers in order to get the latest changes.


Step 1: Log in as an admin to your Flex instance(link takes you to an external page) where you deployed the plugin.

Step 2: Change your status to Available in the upper right corner of the Flex UI. This enables you to receive incoming calls and messages (SMS or chat).

Step 3: To test SMS transfer in Flex, send a text to the number associated with your Flex instance. You can find the Twilio-provisioned number for your Flex instance on the Admin panel(link takes you to an external page) under Test Drive.

Step 4: To test chat transfer, click Launch (on the Admin panel(link takes you to an external page)) to launch the Flex web chat widget. This will open up a new tab where you can enter a test message.

Step 5: To see the incoming text or chat request, navigate to the Agent Desktop in your Flex Instance.

Step 6: Upon clicking Accept, you should now see a Transfer button next to End Chat:

chat-sms-transfer-button.original.

Step 7: Click Transfer to initiate a transfer. You have the option to either transfer the chat to another Agent (in the Agents tab) or reassign the chat to a queue of Agents (in the Queues tab).

Step 8: Click the Right Arrow icon to perform a cold transfer. This autocompletes the initial chat task for the Agent who initiated the transfer, and creates a new chat task for the Agent receiving the transfer.

chat-sms-transfer-window.

Rate this page: