Manage Conversations WhatsApp Addresses

To create a Conversations Address for WhatsApp, you need to have a WhatsApp sender registered on your Twilio account. This is unfortunately not a quick process and includes registration and vetting on the WhatsApp side. For testing using the WhatsApp Sandbox, see the next step. You can create a WhatsApp Conversations Address via the Flex Console or via the API.

To get started, navigate to Messaging > Senders > WhatsApp senders in the Twilio Console. The rest assumes you already have a registered WhatsApp number on your account.

You can create WhatsApp Addresses via Flex Console > Manage > Messaging:

1. Click + Add new Address from the Conversations Addresses tab.

2. Select WhatsApp as the Address type.

3. You can optionally enter a friendly name.

   Expand image

4. Choose your WhatsApp number (sender) in the dropdown.

5. Configure the integration to Flex - either by using Studio or Webhook. Unless you have removed or reconfigured it, you should be good to use the out-of-box Studio Flow "Messaging Flow". To learn more about configuring Studio Flows, see Configure pre-agent workflow with Studio.

6. Click Submit to save your new Flex WhatsApp Address.

You can edit or delete WhatsApp Addresses at any point using the Flex Console.

The Conversations API's Address Configuration Resource allows you to create and manage WhatsApp addresses for your Twilio account. On address creation, you can specify autocreation of a Conversation upon receipt of an inbound message. The following example shows you the programmatic version of our Console example with a retry count. To learn more about the different resource properties, see Address Configuration Resource.

1
// Download the helper library from https://www.twilio.com/docs/node/install
2
const twilio = require("twilio"); // Or, for ESM: import twilio from "twilio";
3

4
// Find your Account SID and Auth Token at twilio.com/console
5
// and set the environment variables. See http://twil.io/secure
6
const accountSid = process.env.TWILIO_ACCOUNT_SID;
7
const authToken = process.env.TWILIO_AUTH_TOKEN;
8
const client = twilio(accountSid, authToken);
9

10
async function createConfigurationAddress() {
11
  const addressConfiguration =
12
    await client.conversations.v1.addressConfigurations.create({
13
      address: "whatsapp:+13115552368",
14
      "autoCreation.enabled": true,
15
      "autoCreation.studioFlowSid": "FWXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
16
      "autoCreation.studioRetryCount": 3,
17
      "autoCreation.type": "studio",
18
      type: "whatsapp",
19
    });
20

21
  console.log(addressConfiguration.sid);
22
}
23

24
createConfigurationAddress();

1
{
2
  "account_sid": "ACaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
3
  "sid": "IGaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
4
  "address": "whatsapp:+13115552368",
5
  "type": "whatsapp",
6
  "friendly_name": "My Test Configuration",
7
  "address_country": "CA",
8
  "auto_creation": {
9
    "enabled": true,
10
    "type": "webhook",
11
    "conversation_service_sid": "ISaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
12
    "webhook_url": "https://example.com",
13
    "webhook_method": "POST",
14
    "webhook_filters": [
15
      "onParticipantAdded",
16
      "onMessageAdded"
17
    ]
18
  },
19
  "date_created": "2016-03-24T21:05:50Z",
20
  "date_updated": "2016-03-24T21:05:50Z",
21
  "url": "https://conversations.twilio.com/v1/Configuration/Addresses/IGaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
22
}

For deleting a WhatsApp address via the API, see Delete Address Configuration.

These instructions are for setting up WhatsApp Sandbox to work with Flex Conversations. If you have a registered WhatsApp number, refer to the instructions above rather than this section. Registered WhatsApp numbers are set up similarly to SMS.

1. Since we don't have auto-create support for WhatsApp Sandbox, we will need to intercept incoming messages to create Conversations. Create another function with the following code. This uses the same Studio Flow as the SMS instructions and has been tested on Node v12, v14, and v16 runtime:

   • Declare twilio as a dependency. This automatically imports related npm modules into your Function.

     Expand image

   • Set STUDIO_FLOW_SID as an environment variable using the unique ID (prefixed by FW) of your newly created Studio Flow.

     • This function doesn't handle creating a conversation correctly when the first WhatsApp message is an attachment. This may result in warnings/errors logged by the Studio Flow. This isn't an issue for non-sandbox WhatsApp addresses.

   • whatsapp.protected.js

     Copy code block

     1
     /* Handles WhatsApp messages by
     2
      * 1. Creating a conversation
     3
      * 2. Adding the participant that sent that message
     4
      * 3. Adding the message to the conversation
     5
      * If any of these fail, the conversation is deleted
     6
      */
     7
     exports.handler = async function (context, event, callback) {
     8
       const isConfigured = context.STUDIO_FLOW_SID;
     9
       const response = new Twilio.Response();
     10
       response.appendHeader("Access-Control-Allow-Origin", "*");
     11
       response.appendHeader(
     12
         "Access-Control-Allow-Methods",
     13
         "GET,POST,OPTIONS"
     14
       );
     15
       response.appendHeader("Content-Type", "application/json");
     16
       response.appendHeader("Access-Control-Allow-Headers", "Content-Type");
     17
     
     18
       console.log(`Received Event: ${JSON.stringify(event)}`);
     19
     
     20
       if (!isConfigured) {
     21
         response.setBody({
     22
           status: 500,
     23
           message: "Studio Flow SID is not configured",
     24
         });
     25
         callback(null, response);
     26
         return;
     27
       }
     28
     
     29
       const client = context.getTwilioClient();
     30
     
     31
       let conversation;
     32
       const webhookConfiguration = {
     33
         target: "studio",
     34
         "configuration.flowSid": context.STUDIO_FLOW_SID,
     35
         "configuration.replayAfter": 0,
     36
         "configuration.filters": ["onMessageAdded"],
     37
       };
     38
     
     39
       try {
     40
         conversation = await client.conversations.v1.conversations.create({
     41
           xTwilioWebhookEnabled: true,
     42
         });
     43
         console.log(`Created Conversation with sid ${conversation.sid}`);
     44
         try {
     45
           console.log(
     46
             `Adding studio webhook to conversation ${conversation.sid}`
     47
           );
     48
           await client.conversations.v1
     49
             .conversations(conversation.sid)
     50
             .webhooks.create(webhookConfiguration);
     51
         } catch (error) {
     52
           console.log(`Got error when configuring webhook ${error}`);
     53
           response.setStatusCode(500);
     54
           return callback(error, response);
     55
         }
     56
       } catch (error) {
     57
         console.log(`Couldnt create conversation ${error}`);
     58
         return callback(error);
     59
       }
     60
     
     61
       try {
     62
         const participant = await client.conversations.v1
     63
           .conversations(conversation.sid)
     64
           .participants.create({
     65
             "messagingBinding.address": `${event.From}`,
     66
             "messagingBinding.proxyAddress": `${event.To}`,
     67
           });
     68
         console.log(`Added Participant successfully to conversation`);
     69
       } catch (error) {
     70
         console.log(`Failed to add Participant to conversation, ${error}`);
     71
         console.log(
     72
           `In case the error is something about "A binding for this participant and proxy address already exists", check if you havent used the Sandbox in any other instance you have. As WhatsApp Sandbox uses the same number across all accounts, could be that the binding of [Your Phone] + [Sandbox WA number] is already created in the other instance.`
     73
         );
     74
         try {
     75
           await client.conversations.v1
     76
             .conversations(conversation.sid)
     77
             .remove();
     78
           console.log("Deleted conversation successfully");
     79
         } catch (error) {
     80
           console.log(`Failed to remove conversation, ${error}`);
     81
         }
     82
         return callback(null, "");
     83
       }
     84
     
     85
       // Now add the message to the conversation
     86
       try {
     87
         const body =
     88
           event.Body !== ""
     89
             ? event.Body
     90
             : "Empty body, maybe an attachment. Sorry this function doesnt support adding media to the conversation. This should work post private beta";
     91
         console.log(`Setting body to ${body}`);
     92
         const message = await client.conversations.v1
     93
           .conversations(conversation.sid)
     94
           .messages.create({
     95
             author: `${event.From}`,
     96
             body: `${body}`,
     97
             xTwilioWebhookEnabled: true,
     98
           });
     99
         console.log(`Added message successfully to conversation`);
     100
       } catch (error) {
     101
         console.log(`Failed to add message to conversation, ${error}`);
     102
         try {
     103
           await client.conversations.v1
     104
             .conversations(conversation.sid)
     105
             .remove();
     106
         } catch (error) {
     107
           console.log(`Failed to remove conversation, ${error}`);
     108
         }
     109
         return callback(null, `${error}`);
     110
       }
     111
     
     112
       return callback(null, "");
     113
     };

2. Set your function as protected and deploy your Function and copy the Function URL. If you are using the Twilio Console to add your function, you can click on the three dots next to the Function name and select "Copy URL".

3. Go to WhatsApp Sandbox Settings and register the number you are using for testing. Under Sandbox Configuration, paste the Function URL into the When a message comes in field.

4. If you haven't registered your WhatsApp number in the sandbox, do that now by following the instructions in the WhatsApp Participants section. For example, in the case below, you would send "join cloud-forgot" to the number +1 415 523 8886 from your WhatsApp.

   Expand image

5. Note that this registration is valid for 3 days and you will have to re-register after that period.

6. Save your settings.

7. You can now test the WhatsApp integration by sending a message from your WhatsApp to your Sandbox phone number.

8. If everything has been configured correctly, this should render as an incoming WhatsApp task in your Flex application. Follow steps 1 and 2 of "Send your first SMS" to accept the incoming task and test WhatsApp in Flex.

   Expand image