Build the future of communications.
Start building for free

Twilio WhatsApp API and Flex in Minutes

whatsappandflex

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:

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, including a set of Functions.

Launch the Flex UI app in your browser, and you should see something like this:

Fresh instance of Flex

 

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.

Twilio Numbers

The format of this URL should be:

https://webhooks.twilio.com/v1/Accounts/ACxx/Proxy/KSxx/Webhooks/Message

You would replace ACxx with your Account Sid (found here) and KSxx with your Flex Proxy Service Sid (found here).

 

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.

WhatsApp Sandbox

Gather Some Account Details

Still on the WhatsApp Sandbox, save your WhatsApp Number for later.

WhatsApp number

Head to Studio, and find your 'Messaging Flow'. Save the Flow SID, starting with FWxx.

flex-messaging-flow

In Programmable Chat, grab your Chat Service Instance Sid, starting with ISxx.

flex-chat-service

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.

auth token reveal

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://preview.twilio.com/Flex/FlexFlows' \
--data-urlencode 'ChannelType=whatsapp' \
--data-urlencode 'Enabled=true' \
--data-urlencode 'ContactIdentity=whatsapp:+xxxx' \
--data-urlencode 'FriendlyName=Flex WhatsApp FlexFlow' \
--data-urlencode 'StudioFlowSid=FWxx' \
--data-urlencode 'ChatServiceSid=ISxx' \
-u ACxx:yourAuthToken

Replace the values above with your:

  • WhatsApp number
  • Studio Flow Sid
  • Chat Service Instance Sid
  • Account Sid
  • Auth Token

Start chatting

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!

Flex and Whatsapp side-by-side

 

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.

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!

Authors
Sign up and start building
Not ready yet? Talk to an expert.