Integrating the WhatsApp Business API with Twilio Flex

Integrating the WhatsApp Business API with Twilio Flex

If you’re using Twilio Flex, you can integrate your contact center with WhatsApp for Business to reach your customers. To test WhatsApp with Flex, please first follow this guide on creating a WhatsApp Sandbox.

Requirements

• A Twilio account (if you don’t have one yet, sign up for a free Twilio account here)
• 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.
• Approved WhatsApp Business account (get started here)

Start with Flex

If you’ve already set up your Flex instance, you can skip ahead to the next step.

Once your WhatsApp Business account is set up and ready to go, let’s connect it to Flex!

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

Check Status

Navigate to the WhatsApp Senders and make sure that you have an approved WhatsApp status like so:

Configure a Webhook

On the same page, click on your WhatsApp number. Then, under Endpoint Configuration choose Use webhooks and paste your webhook URL under Webhook URL for incoming messages. The format should look like this:

https://webhooks.twilio.com/v1/Accounts/ACxxxxxx/Proxy/KSxxxxxx/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.

Configure Phone Number

Go to the Phone Numbers page, find your WhatsApp number and under Messaging choose Proxy Service and Flex Proxy Service under “A Message Comes In”, like so:

Link your WhatsApp to a Studio Flow

Lastly, run the following curl request:  

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 after whatsapp: 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)
• Flex Chat Service SID 
• Account SID
• Auth Token

Start Chatting

Your WhatsApp for Business is now set up with Flex! Open your Flex instance, set your status to Available, send a test WhatsApp message to your WhatsApp Sender, and watch it come in as a new task in Flex!

Now that you’ve integrated Flex and the Business WhatsApp API, you can look into integrating Facebook Messenger with Flex. We can’t wait to see what you build!

Zarina Gumbatova is a Technical Support Engineer for Twilio Flex. She is passionate about solving problems and helping people. She can be reached at zgumbatova [at] twilio.com.

Anson Foong is a Developer Educator for Twilio Flex. He previously worked as a Software Engineer and is enthusiastic about learning & educating developers and guiding them through building applications. He can be reached at afoong [at] twilio.com