Menu

Expand
Rate this page:

Using WhatsApp with Conversations

WhatsApp is increasingly the world's #1 conversational messaging platform as well as an absolutely critical engagement tool across South America, Middle East, Africa and many parts of Europe and Asia. Twilio Conversations supports WhatsApp out of the box and can help you address a number of patterns:

  • Delivery Coordination: Let your drivers reach out to the customer to make sure the last 100 yards of each delivery are successful.
  • Clienteling: Allow your employees to have long-term relationships (e.g. personal shoppers, wealth managers, or real estate agents) with your customers without using their personal devices.
  • Masked Communication: Facilitate communication between your employees and your customers without sharing private numbers.

This guide will show you how to set up a few common patterns that pair WhatsApp with other channels.

Prerequisites

Please note that WhatsApp onboarding generally takes 1-2 weeks. WhatsApp has a thorough vetting process that requires business verification in the Meta Business Manager in order to protect the WhatsApp ecosystem.

We advise planning accordingly when setting up your WhatsApp Sender for Twilio. For more information, please read our guide to connecting your WhatsApp Business Profile with your Twilio number.

WhatsApp is a highly-regulated channel, requiring documentation and approval from Meta to get your business started. Specifically, you will need to secure an approved WhatsApp Business Profile, which gives you a Twilio WhatsApp Number to represent your business.

Get your WhatsApp templates approved

The last section of the tutorial uses templates to initiate contact between two separate WhatsApp participants. If you follow the steps chronologically, you will still be able to complete the tutorial because you will have opted into the WhatsApp's 24-hour window. However, the screenshots will looks lightly different from what you see in the WhatsApp interface.

Depending on your use-case, you may need to secure some approved WhatsApp templates. This is specifically required if you want to send a message to a new user on WhatsApp, or send a message more than 24 hours after the last response.

Note: If your use case can function such that you always receive WhatsApp messages first from your customers, you can skip the template registration step.

Now, you're ready to go!

Cross-Channel Masking: Connecting WhatsApp to SMS

SMS is the easiest channel to connect to WhatsApp in a Twilio Conversation. To do this we'll use:

  • A Twilio SMS-capable phone number (hereafter "TWI-SMS-NUMBER")
  • Your Twilio WhatsApp number (hereafter "TWI-WA-NUMBER")
  • The Twilio CLI

We recommend the Twilio CLI for experimenting, but these guides will work in any language in Twilio. Pick your favorite on the right and follow along.

Let's get down to it; our SMS-to-WhatsApp conversation will take four steps to set up.

Loading Code Sample...
        
        
        The Conversation will contain two participants, one on SMS and the other on WhatsApp.

        Step 1. Create a Conversation

        The Conversation will contain two participants, one on SMS and the other on WhatsApp.
        Loading Code Sample...
              
              
              Use your own WhatsApp phone number and the business profile you created.

              Step 2: Create the WhatsApp Participant

              Use your own WhatsApp phone number and the business profile you created.
              Loading Code Sample...
                    
                    
                    Use your phone number and a Twilio SMS Number from your account.

                    Step 3: Create the SMS Participant

                    Use your phone number and a Twilio SMS Number from your account.

                    Step 4: Send a message from WhatsApp

                    Because you've set up this conversation to proxy with SMS, you'll see the messages flowing back and forth automatically between your two channels.

                    Note: The WhatsApp user kicks off this conversation by sending the first message. By starting from an inbound WhatsApp message, we've avoided any need to use WhatsApp Templates to start the Conversation. These messages and media will flow just fine for the next 24 hours.

                    WhatsApp & SMS Phone Side-by-Side

                    Masked Communication: Connecting Two WhatsApp Participants

                    When you connect two WhatsApp participants, you'll have to solve two business problems:

                    1. Who is speaking with whom?
                      This is probably the bread-and-butter of your business idea: if you're a two-sided marketplace, you're probably connecting a buyer and a seller (or a passenger and a rider). The buyer is the most critical personality: the brand they see in WhatsApp is important and must establish enough trust to proceed with the conversation. When you create your WhatsApp Business Profile, keep that buyer personality in mind first.
                    2. How will you get opt-in from both participants?
                      Unsolicited outbound messages to WhatsApp are highly restricted. Until your customer replies, you can only send messages conforming to approved templates. In this scenario, both sides are on WhatsApp, so we will need to use one of those templates to get the conversation moving.

                    We'll start by setting up the Conversation and later show how to use templates to improve the customer experience.

                    Setting Up the Conversation

                    We'll need the following to set up our WhatsApp-to-WhatsApp Conversation:

                    1. A Twilio WhatsApp number; we'll call this "TWI_WA_NUMBER." You could use more than one, but it's not necessary.
                    2. Two consumer WhatsApp accounts. Choose yourself and a friend who won't mind. These are typically your personal device numbers.
                    3. The Twilio CLI.

                    If you're going through this guide in chronological order and re-using your WhatsApp numbers to test out all of the use cases, you should remove the previous Conversation first. Each number pair (twilio+personal) can only appear in one conversation at a time.

                    $ twilio api:conversations:v1:conversations:remove --sid CHxxxx

                    With that, connecting two WhatsApp participants in a Conversation will take five steps:

                    Loading Code Sample...
                          
                          
                          The Conversation will map your two participants to each other, one on SMS and the other on WhatsApp.

                          Step 1: Create the Conversation

                          The Conversation will map your two participants to each other, one on SMS and the other on WhatsApp.
                          Loading Code Sample...
                                
                                
                                Run this code twice, replacing YOUR_WHATSAPP_NUMBER with your phone number the first time and your friend's the second time

                                Steps 2 and 3: Add two different WhatsApp Participants

                                Run this code twice, replacing YOUR_WHATSAPP_NUMBER with your phone number the first time and your friend's the second time

                                Step 4: Send a message from one side.

                                From your phone, send the first message in WhatsApp. Send the message to your TWI_WA_NUMBER (not directly to your friend's number.)

                                Step 5: Send a message from the other side

                                Have your good-natured friend send a message to your TWI_WA_NUMBER (not directly to your phone number).

                                Rider-Courier WhatsApp with Natural Opt-in

                                Congratulations, it's working!

                                ... Mostly. You may notice that after steps four and five, you have two different conversations ongoing. After this awkward introduction, everything proceeds as expected, but that's not the professional experience we want.

                                In this scenario, both WhatsApp-based parties must reply before the Twilio can send outbound messages to both parties. Receiving an incoming message from both Conversation participant kicks off the "24-hour session" in which Twilio can send outbound free-form WhatsApp messages.

                                Starting More Professionally: Using Template Messages

                                WhatsApp templates need to be submitted and approved before they are effective. Before you proceed to below, learn how to create WhatsApp templates and submit them for approval. Once your templates are approved, use the appropriate body text in the steps below.

                                Please note: Without approved WhatsApp templates, these outbound messages will be swallowed by the system.

                                If you have followed the tutorial chronologically, you can complete the tutorial because you and your good-natured friend have opted into receiving WhatsApp messages for 24 hours. However, the screenshots will differ from what you see in the WhatsApp interface.

                                Let's carry the example above a little further, and use approved WhatsApp Template Messages to make it happen. We're going to pick two template messages that we've already gotten approved:

                                • A templated message that our food courier will understand
                                • A templated message that will invite the customer to opt into the contact.
                                TEMPLATE 1:
                                Hello {{1}}, your food delivery is almost there but {{2}} (your rider) needs help finding your door. Are you willing to chat with them?
                                
                                TEMPLATE 2:
                                Your customer has agreed to chat over WhatsApp to get this delivery sorted. You're now connected. Say hello!

                                We'll send these messages one after another, waiting for a response from the first before sending the second.

                                Using templates to smooth out our customer experience, let's follow two more steps:

                                Loading Code Sample...
                                      
                                      
                                      Use the REST API to send the first message as though it were authored by the courier. Note the "author" parameter.

                                      Step 6: Invite the Customer to Engage.

                                      Use the REST API to send the first message as though it were authored by the courier. Note the "author" parameter.

                                      The following is what the customer will see after you send the first templated message as the courier/rider:

                                      Inviting the customer, they opt-in and then we tell them to hang on.

                                      You'll notice when you do this that the customer receives a message, but the courier does not. We're using the rules of WhatsApp's 24-hour opt-in window in our favor: securing one participant's opt-in (from the customer) before we reach out to the other (the courier).

                                      In the picture above, you notice that we included an automated reply: "Great! Just a moment..." This picture is a step ahead. To actually execute on this — and at the same time to opt-in our courier — we're going to need a Twilio function and a Conversations webhook.

                                      Create a Twilio Function to send the templates

                                      Let's start with the former.

                                      First, navigate to the Twilio Functions section of the Console and click on "Configure." Confirm that the version listed for the twilio NPM module is up-to-date, such as 3.66.1 or higher.

                                      Functions Twilio npm

                                      Next, create a Twilio Function in the console with the following code, which will set us up to capture the onMessageAdded event.

                                      exports.handler = function(context, event, callback) {
                                          const customer = event.Author;
                                          let thisConversation = context.getTwilioClient().conversations.v1.conversations.get(event.ConversationSid);
                                      
                                          // This system message will reach the customer, but our rider
                                          // will still need to be opted-in.
                                          let justAMoment = thisConversation.messages.create({
                                              body: "Great! Just a moment while we connect you..."
                                          });
                                      
                                          // Use Template #2 for the rider.
                                          let riderOptIn = thisConversation.messages.create({
                                              author: customer,
                                              body: "Your customer has agreed to chat over WhatsApp to get this delivery sorted. You're now connected. Say hello!"
                                          });
                                      
                                          // Remove all scoped webhooks; we only want this once.
                                          let webhooks = [];
                                          thisConversation.webhooks.each(hook => webhooks.push(hook.remove()));
                                      
                                          // Critically important: wait for the messages to resolve.
                                          Promise.all([justAMoment, riderOptIn, ...webhooks]).finally(() => callback(null));
                                      };

                                      To power this, we'll add a Conversation Scoped webhook that we can remove later.

                                      Loading Code Sample...
                                            
                                            
                                            Replace the configuration.url field with the address of your new Twilio Function.

                                            Step 7: Set up a Conversation Scoped Webhook to field the reply.

                                            Replace the configuration.url field with the address of your new Twilio Function.

                                            Now let's start again by sending the initial opt-in message to test the whole flow.

                                            The customer and rider are opted-in separately. Once opted-in, the conversation flows naturally and automatically.

                                            With all this set up, we've created the ideal experience for two-sided WhatsApp Conversations. Notice how system messaging manages expectations while we're still opting-in the second party. And after the initial setup, notice that we're not forwarding messages one-by-one among the parties: all of that happens automatically via Twilio Conversations platform. It only ends if/when you DELETE the conversation later on.

                                            Note: our templates fit neatly in WhatsApp's guidelines: they are not promotional, but rather they faciliate an active transaction. By following these patterns, your business could benefit from the same pattern.

                                            What's Next

                                            Ready to learn more about Conversations and WhatsApp? Learn more with the following resources:

                                            Rate this page:

                                            Need some help?

                                            We all do sometimes; code is hard. Get help now from our support team, or lean on the wisdom of the crowd by visiting Twilio's Stack Overflow Collective or browsing the Twilio tag on Stack Overflow.

                                            Loading Code Sample...
                                                  
                                                  
                                                  

                                                  Thank you for your feedback!

                                                  Please select the reason(s) for your feedback. The additional information you provide helps us improve our documentation:

                                                  Sending your feedback...
                                                  🎉 Thank you for your feedback!
                                                  Something went wrong. Please try again.

                                                  Thanks for your feedback!

                                                  thanks-feedback-gif