Create a new Studio Flow (optional)
This step is optional - you can re-use the default flow provided by your Flex project.
- Navigate to your Twilio Studio Dashboard and click on the "plus" icon to add a new flow.
- Give a name to the new Flow, e.g., Custom Webchat Flow
- In the template selection pop-up, select "Start from Scratch". Look at the other templates, in case you want your webchat to go to some additional steps before being assigned to a Flex Agent.
- Once the Studio Flow editor opens, look for the "Send To Flex" Widget, and drop it on the canvas
- Connect the "Incoming message" trigger to "Send To Flex" widget
- Select the "Send to Flex Widget" and choose the following values:
- Workflow: "Assign to Anyone"
- Channel: "Programmable Chat"
- Attributes: Paste the following:
{"name": "{{trigger.message.ChannelAttributes.from}}", "channelType": "web", "channelSid": "{{trigger.message.ChannelSid}}"}
- Click on "Save"
- Click on "Publish" to publish the Flow
The main points to note in the steps above are decisions around the Workflow and Channel. These two settings are needed to connect the Task that gets created as the result of triggering this Studio Flow with the chat Channel used to exchange messages between the Agent and the Customer.
Create a new Flex Flow
Flex Flows cannot be created directly in the console. Instead, we are going to use the Twilio CLI.
Once you have installed the CLI, use the following command to create a new flow:
$ twilio api:flex:v1:flex-flows:create \ --friendly-name="Custom Webchat Flex Flow" \ --channel-type=custom \ --integration.channel=studio \ --chat-service-sid=<Flex Chat Service SID> \ --integration.flow-sid=<Flex Studio Flow SID> \ --contact-identity=custom \ --enabled
Where:
- <Flex Chat Service SID>: This is the SID (IS****) of the chat service called "Flex Chat Service" in the Programmable Chat Dashboard
- <Flex Studio Flow SID>: This is the SID (FW****) of the Studio Flow you created in the previous chapter or (if you skipped that chapter) the one called "Webchat Flow' in the Studio Dashboard
If the command executed with no error, write down the SID of the newly created Flow. Now head to the Flex Messaging in the console, and you should see a new "Custom Webchat Flex Flow".
Middleware
Now that the provisioning is done let's implement the middleware between Flex and our external service (here, Socket.io). We need two functions in the middleware: createNewChannel()
and sendChatMessage()
.
createNewChannel()
This function uses the Flex API to create a new channel and configure a webhook that gets called when a message is added to the channel. The latter is needed to handle the chat messages arriving from Flex properly. To do that, this function should:
- Use the Flex Channel API to create a new chat channel. This is implemented using the JavaScript
client.flexApi.channel.create()
in lines from 2 to 9 of the code below. - Once the channel is created, use the Chat Channel API to configure a new webhook for the
onMessageSent
event of the chat channel. This is implemented using the JavaScript client.chat.services().channels().webhooks.create()
in lines from 12 to 20 below.
This is an example of how to implement this function using JavaScript: