# Chat and SMS Transfers (Flex UI 1.x.x) > \[!NOTE] > > This guide is only for Flex UI 1.x.x, which [reached End of Life on June 30, 2024](/docs/flex/flex-ui-eol-reference). To build on a current version, we recommend you [upgrade to Flex UI 2.x.x](/docs/flex/developer/ui/migration-guide) and install the ready-to-use [Chat Transfer](https://flex.twilio.com/admin/plugins/library/JG429e7fdac8171b654349111644f75910) plugin. You must be logged in to Twilio Console to access the Flex Plugin Library. ## Overview > \[!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)](https://www.twilio.com/en-us/legal/service-level-agreement) and [support plans](https://www.twilio.com/en-us/support-plans). 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. ![Twilio Flex interface showing chat transfer option to SMS.](https://docs-resources.prod.twilio.com/6dc4f634687c7cef95aea08e9b539b77b4007c2275f023ec3b859a2dc06aa31a.gif) ## Architecture ![Diagram showing chat to SMS transfer process with icons for user, chat, and agents.](https://docs-resources.prod.twilio.com/70629d4ebf84419968b09df172788a354ff60ef1fda630ea21435e85aff2b6e0.png) ## Prerequisites To deploy this solution, you will need: * An active Twilio account with Flex provisioned. Refer to the [Flex Quickstart](/docs/flex/admin-guide/setup/account-creation) 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](https://nodejs.org/en/about/previous-releases) installed, version 14 recommended (type `node -v` in your terminal to check). * [Twilio CLI](/docs/twilio-cli/quickstart#install-the-twilio-cli) along with the [Flex CLI Plugin](/docs/twilio-cli/plugins#available-plugins) and the [Serverless Plugin](/docs/twilio-cli/plugins#available-plugins). Run the following commands to install them: ```bash # Install the Twilio CLI npm install twilio-cli@2.0 -g # Install the Serverless and Flex as Plugins twilio plugins:install @twilio-labs/plugin-serverless twilio plugins:install @twilio-labs/plugin-flex ``` > \[!NOTE] > > If you're running Linux, click on the Linux tab for the [Twilio CLI installation instructions](/docs/twilio-cli/quickstart#install-the-twilio-cli). 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 minutes ## Tested Flex versions and operating systems * Flex v1.18.1-1.30.0 * macOS/Linux * Windows 10 ## 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](https://www.twilio.com/console). Copy your **ACCOUNT SID** and **AUTH TOKEN**, and create a new Twilio CLI profile using those credentials: ```bash 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: ```bash 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: ```bash twilio profiles:use DIFFERENT_PROFILE_ID ``` ### Step 2 Retrieve your **Flex Task Assignment** workspace SID: ```bash twilio api:taskrouter:v1:workspaces:list ``` **Example workspace SID** ```bash SID Friendly Name Prioritize Queue Order WSXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX Flex Task Assignment FIFO ``` To retrieve your Flex workspace SID from the Twilio Console, navigate to the **TaskRouter Dashboard**. ### Step 3 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. ```bash twilio api:taskrouter:v1:workspaces:task-queues:list --workspace-sid WSXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX ``` **Example task queue SID** ```bash SID Friendly Name Task Order WQXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX Everyone FIFO To retrieve your Flex task queue SID from the Twilio Console, navigate to TaskRouter > Flex Task Assignment > TaskQueues. ``` ### Create a new TaskRouter workflow 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/Linux ```bash CONFIGURATION=$(cat << EOF { "task_routing": { "filters": [ { "filter_friendly_name": "Worker Filter", "expression": "transferTargetType == 'worker'", "targets": [ { "queue":"WQXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX", "expression":"worker.sid == task.targetSid" } ] }, { "filter_friendly_name": "Sales Queue", "expression": "transferTargetType == 'queue' AND targetSid == 'WQYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY'", "targets": [ { "queue":"WQYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY" } ] }, { "filter_friendly_name": "Support Queue", "expression": "transferTargetType == 'queue' AND targetSid == 'WQZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ'", "targets": [ { "queue":"WQZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ" } ] } ], "default_filter": { "queue": "WQXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" } } } EOF ) twilio api:taskrouter:v1:workspaces:workflows:create --workspace-sid WSXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX --friendly-name "Chat Transfers" --configuration "$CONFIGURATION" ``` ## Windows First, set your required SIDs and your Flex workspace SID as environment variables: ```bash set EVERYONEQUEUE=WQXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX set SALESQUEUE=WQYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY set SUPPORTQUEUE=WQYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY set WORKSPACESID=WSYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY ``` To confirm that an environment variable has been set, run `echo %ENVVAR%`. ```bash 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** ```bash SID Friendly Name Document Content Type WWXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX Chat Transfers null ``` For more details on expected workflow settings, see [Plugin Details](https://github.com/twilio-professional-services/plugin-chat-sms-transfer#plugin-details). To learn about configuring more complex workflows, see [Create a Workflow Resource](/docs/taskrouter/api/workflow#create-a-workflow-resource) and [Configuring Workflows: Complex Routing Example](/docs/taskrouter/workflow-configuration#complex-routing-example). ## Download the Chat/SMS Transfer Flex Plugin Download the [plugin source code](https://github.com/twilio-professional-services/plugin-chat-sms-transfer/archive/refs/heads/main.zip) and unzip the files in a local directory. ## Deploy your Twilio Function 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](https://github.com/twilio-professional-services/plugin-chat-sms-transfer/blob/main/functions/.env.example). ## macOS/Linux ```html cd ~/plugin-chat-sms-transfer/functions mv .env.example .env ``` ## Windows ```bash C:\Users\username\plugin-chat-sms-transfer> cd functions && move .env.example .env ``` **Output** ```bash 1 file(s) moved. ``` **Step 2:** Open `.env` and set the environment variables mentioned in the file. ```bash TWILIO_ACCOUNT_SID = your Account SID from twil.io/console TWILIO_AUTH_TOKEN = your Auth Token from twil.io/console TWILIO_WORKSPACE_SID = your Flex Task Assignment workspace ID TWILIO_CHAT_TRANSFER_WORKFLOW_SID=your Flex Workflow ID ``` **Step 3:** Deploy the Twilio function to your account using the Twilio CLI: ```bash twilio serverless:deploy ``` > \[!NOTE] > > When running on Windows, you may see an error with the Twilio Serverless deployment command. To work around the issue, set your `TWILIO_ACCOUNT_SID` and `TWILIO_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. ```bash TWILIO_ACCOUNT_SID = your Account SID from twil.io/console TWILIO_AUTH_TOKEN = your Auth Token from twil.io/console TWILIO_WORKSPACE_SID = your Flex Task Assignment workspace ID TWILIO_CHAT_TRANSFER_WORKFLOW_SID=your Flex Workflow ID ``` **Step 3:** Deploy the Twilio function to your account using the Twilio CLI: ```bash twilio serverless:deploy ``` > \[!NOTE] > > Debugging tip: pass the `-l` or logging flag to review deployment logs. For example, you can pass `-l debug` to turn on debugging logs. ## Deploy your Flex plugin 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: ```bash 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/Linux ```bash cp .env.example .env ``` ## Windows ```powershell move .env.example .env Output 1 file(s) moved. ``` Open `.env` with your text editor and set the environment variables listed in the file: ```bash # Paste the Function deployment domain 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: ```bash 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** ```bash ✔ Validating deployment of plugin plugin-chat-sms-transfer ⠧ Compiling a production build of plugin-chat-sms-transferPlugin plugin-chat-sms-transfer was successfully compiled with some warnings. ✔ Compiling a production build of plugin-chat-sms-transfer ✔ Uploading plugin-chat-sms-transfer ✔ Registering plugin plugin-chat-sms-transfer with Plugins API ✔ Registering version v1.0.0 with Plugins API 🚀 Plugin (private) plugin-chat-sms-transfer@1.0.0 was successfully deployed using Plugins API ``` ### Enable the plugin on your Flex application The previous step only deploys your plugin — you still need to enable it for your Flex application. To do so, run: ```bash 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 Now navigate to the **[Plugins Dashboard](https://flex.twilio.com/admin/)** 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] > > Keep in mind that your Agents need to refresh their browsers in order to get the latest changes. ## Testing the solution **Step 1:** Log in as an `admin` to your [Flex instance](https://flex.twilio.com/) 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](https://flex.twilio.com/admin) under **Test Drive**. **Step 4:** To test chat transfer, click **Launch** (on the [**Admin** panel](https://flex.twilio.com/admin)) 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 interface with transfer and end chat buttons highlighted.](https://docs-resources.prod.twilio.com/860ecbdcc20831199060452fe17f94305eab79abf651150f1f94caa4e859b447.png) **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. ![Twilio Flex transfer window showing tasks and queue options.](https://docs-resources.prod.twilio.com/7ac080f7606937dc488e391e6ccc2c2b05838085dc82bb0c4b412a667ae420a9.png)