Twilio WhatsApp API and Flex in Minutes
Time to read: 3 minutes
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!
Requirements
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 Flex account. Follow the prompts to kick off the Flex setup. During this process, several Twilio services will be created for you.
Launch the Flex UI in your browser, and you should see something like this:
Construct a Message Handler URL
The format of your Messaging Handler URL should be:
https://webhooks.twilio.com/v1/Accounts/ACxx/Proxy/KSxx/Webhooks/Message
Replace ACxx with your Account SID (found in your account dashboard) and KSxx with your Flex Proxy Service SID (found in the Services page). This will be your Message Handler URL.
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 into the "When A Message Comes In" text field. Save your sandbox settings.
Gather Some Account Details
Still on the WhatsApp Sandbox, save your WhatsApp Number for later.
Within Programmable Chat, grab your Chat Service Instance SID, starting with ISxx
.
Lastly, grab your Auth Token so that we can make an API request to Twilio. The Auth Token is a hidden value found on your Flex account Dashboard.
Link your WhatsApp to a Studio Flow
Finally, start a command shell session and run the following curl
request:
curl -X POST "https://flex-api.twilio.com/v1/FlexFlows" \ --data-urlencode "ChannelType=whatsapp" \ --data-urlencode "Enabled=true" \ --data-urlencode "JanitorEnabled=true" \ --data-urlencode "IntegrationType=studio" \ --data-urlencode "ContactIdentity=whatsapp:+13115552368" \ --data-urlencode "FriendlyName=Flex WhatsApp FlexFlow" \ --data-urlencode "Integration.FlowSid=FWxxxxxx" \ --data-urlencode "ChatServiceSid=ISxxxxxx" \ -u ACxxxxxx:yourAuthToken
Replace the values above with your:
- WhatsApp number (in the ContactIdentity) in this format:
whatsapp:[+][country code][subscriber number including area code]
(Ensure that the number afterwhatsapp:
is in E.164 format and that it is set to the exact same number that you registered with WhatsApp. This may be different from your PSTN number) - Studio Flow SID (in Integration.FlowSid)
- Chat Service Instance SID
- Account SID
- Auth Token
Example Flex Flows API Response
{ "integration": { "retry_count": 3, "flow_sid": "FWda89b731a3cce381b3c37c69e0cd1013" }, "janitor_enabled": false, "integration_type": "studio", "date_updated": "2020-11-10T23:20:30Z", "enabled": true, "friendly_name": "Flex WhatsApp FlexFlow", "contact_identity": "whatsapp:+14155238886", "account_sid": "ACxx", "channel_type": "whatsapp", "url": "https://flex-api.twilio.com/v1/FlexFlows/FOb939520aee88d161ae0f750db8ead4b9", "sid": "FOb939520aee88d161ae0f750db8ead4b9", "date_created": "2020-11-10T23:20:30Z", "long_lived": false, "chat_service_sid": "IS75c3668972364ff28a4d7ad06f0e6073" }
You can handle your messages with more than just Studio. Learn more from our documentation on Messaging in Flex. For more details on Flex Flow properties, see the API reference page.
Start chatting
You’re ready to flex those WhatsApp muscles! Mark yourself as available in the Flex UI, 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, or Facebook Messenger messages.
Keep Flexing those muscles
Now that you’ve added this quick channel integration to Flex, try adding another messaging channel. 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.
Ready to do more with the Twilio API for WhatsApp? Try our emoji translation app, or our npm search bot, or create your own unique WhatsApp hack!
We can’t wait to see what you build!
Twilio.org helps social impact builders use digital technology and financial resources to scale their reach and impact. Get started today at no cost. Sign up here for your Impact Access Program product credits. Eligibility criteria applies.
Related Posts
Related Resources
Twilio Docs
From APIs to SDKs to sample apps
API reference documentation, SDKs, helper libraries, quickstarts, and tutorials for your language and platform.
Resource Center
The latest ebooks, industry reports, and webinars
Learn from customer engagement experts to improve your own communication.
Ahoy
Twilio's developer community hub
Best practices, code samples, and inspiration to build communications and digital engagement experiences.