With the recent announcement of Twilio API for WhatsApp and ongoing excitement around Twilio Flex, I thought it might be fun to bring WhatsApp into the contact center space. With just a few minutes of setup, customers can reach your business through an entirely different channel. Let’s take a look at how the hottest new things at Twilio work seamlessly together!
If you’d like to follow along and bring WhatsApp into Flex, you’ll need:
- A Twilio account (sign up for a free Twilio account here)
- A project with Twilio Flex (get started here)
- The WhatsApp Sandbox Channel. Follow these instructions to install the WhatsApp Sandbox Channel in your account. You will also need to connect your own WhatsApp account with the sandbox
Let’s get started!
Start with Flex
If you’ve already set up your Flex instance, you can skip ahead to the next step.
If you’re new to Flex, create a new Project and select the Flex template to get started. Follow the prompts to kick off the Flex Quickstart. During this process, several Twilio services will be created for you.
Launch the Flex UI app in your browser, and you should see something like this:
Get a Message Handler
Navigate to your Phone Numbers in the Twilio console, and locate the Messaging Handler (URL) that is used by the default number that Twilio purchased for you. Copy the full URL used for messages.
Pro-tip: triple-click the URL; most browsers will select the entire string, even if it's partially hidden.
The format of this URL should be:
Set up your WhatsApp Sandbox
Navigate to the WhatsApp Sandbox. (If you haven’t already set up your sandbox, do so now!) Head over to the Sandbox Configuration section and paste the Message Handler URL from your clipboard into the field marked A Message Comes In. Save your sandbox.
Gather Some Account Details
Still on the WhatsApp Sandbox, save your WhatsApp Number for later.
Head to Studio, and find your 'Messaging Flow'. Save the Flow SID, starting with
In Programmable Chat, grab your Chat Service Instance Sid, starting with
Last, grab your Auth Token so that we can make an API request to Twilio. The Auth Token is a hidden value found on the Twilio Dashboard.
Link your WhatsApp to a Studio Flow
Finally open your command line or terminal of choice and run the following command to Twilio:
curl -X POST "https://flex-api.twilio.com/v1/FlexFlows" \ --data-urlencode "ChannelType=whatsapp" \ --data-urlencode "Enabled=true" \ --data-urlencode "IntegrationType=studio" \ --data-urlencode "ContactIdentity=whatsapp:+xxxx" \ --data-urlencode "FriendlyName=Flex WhatsApp FlexFlow" \ --data-urlencode "Integration.FlowSid=FWxx" \ --data-urlencode "ChatServiceSid=ISxx" \ -u ACxx:yourAuthToken
Replace the values above with your:
- WhatsApp number (in the
- Studio Flow Sid (in
- Chat Service Instance Sid
- Account Sid
- Auth Token
You can handle your messages with more than just Studio. Learn more from our documentation on Messaging in Flex.
You’re ready to flex those WhatsApp muscles! Send a WhatsApp message to the sandbox number, and watch it come in as a new Task in Flex!
Accept the task, and get chatting! Your contact center can now receive inbound WhatsApp chats and respond to them just like SMS, Twilio Chat, Facebook Messenger, and LINE messages.
Keep Flexing those muscles
Now that you’ve added this quick channel integration to Flex, try adding another from Twilio’s list of channels. You can also make Flex your own by styling the UI to reflect your brand or creating custom components to extend what you can do with Twilio Flex.
We can’t wait to see what you build!