This guide is for Flex UI 1.x.x and channels that use Programmable Chat and Proxy. If you are using Flex UI 2.x.x or you are starting out, we recommend that you build with Flex Conversations.
With Flex, your customers can reach you via channels like SMS, WhatsApp, and Facebook Messenger. This page details how to configure these Twilio-supported channels.
The Flex Messaging page in the Twilio Console allows you to register a phone number with Flex to be handled for inbound SMS. When you register a number, we:
To manually configure SMS, you will need to update the messaging handler on the Phone Numbers page. Connect this to your 'Flex Proxy Service', and then use the Flex Flow API to create a new entry for your number.
Like SMS, all other messaging channels have a configurable webhook for processing inbound messages. You'll need to update the messaging handler for each channel you want to connect to Flex.
For WhatsApp you can configure the message handler using the WhatsApp Sandbox. If you're using WhatsApp with Flex Conversations, refer to Manage Conversations WhatsApp Addresses.
For Facebook and other channels you can configure the callback URL from the Channels Page.
Once you've found the right place in the console to configure the message handler, you can set the Incoming Message webhook to point to the Flex Proxy Service. This webhook looks like:
https://webhooks.twilio.com/v1/Accounts/ACxx/Proxy/KSxx/Webhooks/Message
Your unique URL will replace the ACxx
and KSxx
identifiers with your Account SID and Flex Proxy Service SID. You can find your default Flex Proxy instance SID in the Proxy section of the console. Your messaging channel needs to be connected to Proxy in order to be handled by Flex. Proxy translates all messages between Flex's chat channel (which your agent interacts with) and your messaging channel (which your customers interact with).
As with SMS, you must create a Flex Flow entity for each identity that you are connecting to Flex.
1// Download the helper library from https://www.twilio.com/docs/node/install2const twilio = require("twilio"); // Or, for ESM: import twilio from "twilio";34// Find your Account SID and Auth Token at twilio.com/console5// and set the environment variables. See http://twil.io/secure6const accountSid = process.env.TWILIO_ACCOUNT_SID;7const authToken = process.env.TWILIO_AUTH_TOKEN;8const client = twilio(accountSid, authToken);910async function createFlexFlow() {11const flexFlow = await client.flexApi.v1.flexFlow.create({12channelType: "whatsapp",13chatServiceSid: "ISXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",14friendlyName: "WhatsApp Flex Flow",15"integration.flowSid": "FWXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",16});1718console.log(flexFlow.accountSid);19}2021createFlexFlow();
1{2"sid": "FOaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",3"account_sid": "ACaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",4"date_created": "2016-08-01T22:10:40Z",5"date_updated": "2016-08-01T22:10:40Z",6"friendly_name": "WhatsApp Flex Flow",7"chat_service_sid": "ISXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",8"channel_type": "whatsapp",9"contact_identity": "12345",10"enabled": true,11"integration_type": "studio",12"integration": {13"flow_sid": "FWaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",14"retry_count": 115},16"long_lived": true,17"janitor_enabled": true,18"url": "https://flex-api.twilio.com/v1/FlexFlows/FOaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"19}
When Flex receives a new message, it will first send to Proxy and post to a new Chat Channel. Afterwards, the message handler will redirect to whatever destination you have specified in your Flex Flow. By default this is a Studio Flow. The Studio Flow can send automated responses to your inbound message or collect any additional information before passing the conversation to an agent within Flex.
Existing Flex Flows can be modified or removed from the Flex Messaging page in the Twilio Console.