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

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.

Expand image

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

  Copy code block

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

30 minutes

• Flex v1.18.1-1.30.0
• macOS/Linux
• Windows 10

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

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 that you can remember. Once your profile has been created, activate it by running:

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:

twilio profiles:use DIFFERENT_PROFILE_ID

Retrieve your Flex Task Assignment workspace SID:

1
twilio api:taskrouter:v1:workspaces:list
2

Example workspace SID

1
SID                                      Friendly Name               Prioritize Queue Order
2
WSXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX       Flex Task Assignment        FIFO
3

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.

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

Example task queue SID

1
SID                                     Friendly Name               Task Order
2
WQXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX      Everyone                    FIFO
3

4

5
To retrieve your Flex task queue SID from the Twilio Console, navigate to TaskRouter > Flex Task Assignment > TaskQueues.

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.

1
CONFIGURATION=$(cat << EOF
2
{
3
    "task_routing": {
4
        "filters": [
5
            {
6
                "filter_friendly_name": "Worker Filter",
7
                "expression": "transferTargetType == 'worker'",
8
                "targets": [
9
                    {
10
                      "queue":"WQXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
11
                      "expression":"worker.sid == task.targetSid"
12
                    }
13
                ]
14
            },
15
            {
16
                "filter_friendly_name": "Sales Queue",
17
                "expression": "transferTargetType == 'queue' AND targetSid == 'WQYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY'",
18
                "targets": [
19
                    {
20
                      "queue":"WQYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY"
21
                    }
22
                ]
23
            },
24
            {
25
                "filter_friendly_name": "Support Queue",
26
                "expression": "transferTargetType == 'queue' AND targetSid == 'WQZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ'",
27
                "targets": [
28
                    {
29
                      "queue":"WQZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ"
30
                    }
31
                ]
32
            }
33
        ],
34
        "default_filter": {
35
            "queue": "WQXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
36
        }
37
    }
38
}
39
EOF
40
)
41

42
twilio api:taskrouter:v1:workspaces:workflows:create --workspace-sid WSXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX --friendly-name "Chat Transfers" --configuration "$CONFIGURATION"
43

1
set EVERYONEQUEUE=WQXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
2
set SALESQUEUE=WQYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY
3
set SUPPORTQUEUE=WQYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY
4
set WORKSPACESID=WSYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY

twilio api:taskrouter:v1:workspaces:workflows:create --workspace-sid=%WORKSPACESID% --friendly-name "Chat Transfers" --configuration="{ ""task_routing"": { ""filters"": [ { ""filter_friendly_name"": ""Worker Filter"", ""expression"": ""transferTargetType == 'worker'"", ""targets"": [ { ""queue"": ""%EVERYONEQUEUE%"", ""expression"": ""worker.sid == task.targetSid"" } ] }, { ""filter_friendly_name"": ""Sales Queue"", ""expression"": ""transferTargetType == 'queue' AND targetSid == '%SALESQUEUE%'"", ""targets"": [ { ""queue"": ""%SALESQUEUE%"" } ] }, { ""filter_friendly_name"": ""Support Queue"", ""expression"": ""transferTargetType == 'queue' AND targetSid == '%SUPPORTQUEUE%'"", ""targets"": [ { ""queue"":""%SUPPORTQUEUE%"" } ] } ], ""default_filter"": { ""queue"": ""%EVERYONEQUEUE%"" } }}"

Example workflow confirmation

1
SID                                  Friendly Name         Document Content Type
2
WWXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX   Chat Transfers         null

For more details on expected workflow settings, see Plugin Details. To learn about configuring more complex workflows, see Create a Workflow Resource and Configuring Workflows: Complex Routing Example.

Download the plugin source code and unzip the files in a local directory.

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.

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

C:\Users\username\plugin-chat-sms-transfer> cd functions && move .env.example .env

1 file(s) moved.

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

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

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

twilio serverless:deploy

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

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

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

twilio serverless:deploy

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:

1
npm install
2

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:

cp .env.example .env

1
move .env.example .env
2
Output
3

4
1 file(s) moved.

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

1
# Paste the Function deployment domain
2
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:

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

1
✔ Validating deployment of plugin plugin-chat-sms-transfer
2
⠧ Compiling a production build of plugin-chat-sms-transferPlugin plugin-chat-sms-transfer was successfully compiled with some warnings.
3
✔ Compiling a production build of plugin-chat-sms-transfer
4
✔ Uploading plugin-chat-sms-transfer
5
✔ Registering plugin plugin-chat-sms-transfer with Plugins API
6
✔ Registering version v1.0.0 with Plugins API
7

8
🚀 Plugin (private) plugin-chat-sms-transfer@1.0.0 was successfully deployed using Plugins API

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

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"

Now navigate to the Plugins Dashboard 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!

Step 1: Log in as an admin to your Flex instance 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 under Test Drive.

Step 4: To test chat transfer, click Launch (on the Admin panel) 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:

Expand image

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.

Expand image