Rich Messaging Features in the Twilio API for WhatsApp

WhatsApp's latest rich features are supported using Twilio's Content Template Builder.

These features include:

• Formatting message text
• Messages including location information
• Card messages with images, text, and/or buttons
• List messages
• Call-to-action messages
• Messages with quick reply buttons
• Product Catalogs
• Carousels

Twilio supports the latest inbound metadata made available by WhatsApp. This includes the end user's profile name, click to WhatsApp ad parameters, and much more.

See our request to your webhook URL for all of the supported inbound parameters for rich messages.

WhatsApp allows text, emojis, and some formatting in messages. To format all or part of a message, use these formatting symbols:

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 createMessage() {
11
  const message = await client.messages.create({
12
    body: "🎶I am _not_ ~pushing~ throwing away my *shot*!",
13
    from: "whatsapp:+15005550006",
14
    messagingServiceSid: "MGXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
15
    to: "whatsapp:+14155552345",
16
  });
17

18
  console.log(message.body);
19
}
20

21
createMessage();

1
{
2
  "account_sid": "ACaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
3
  "api_version": "2010-04-01",
4
  "body": "🎶I am _not_ ~pushing~ throwing away my *shot*!",
5
  "date_created": "Thu, 24 Aug 2023 05:01:45 +0000",
6
  "date_sent": "Thu, 24 Aug 2023 05:01:45 +0000",
7
  "date_updated": "Thu, 24 Aug 2023 05:01:45 +0000",
8
  "direction": "outbound-api",
9
  "error_code": null,
10
  "error_message": null,
11
  "from": "whatsapp:+15005550006",
12
  "num_media": "0",
13
  "num_segments": "1",
14
  "price": null,
15
  "price_unit": null,
16
  "messaging_service_sid": "MGXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
17
  "sid": "SMaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
18
  "status": "queued",
19
  "subresource_uris": {
20
    "media": "/2010-04-01/Accounts/ACaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa/Messages/SMaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa/Media.json"
21
  },
22
  "tags": {
23
    "campaign_name": "Spring Sale 2022",
24
    "message_type": "cart_abandoned"
25
  },
26
  "to": "whatsapp:+14155552345",
27
  "uri": "/2010-04-01/Accounts/ACaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa/Messages/SMaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.json"
28
}

Expand image

The Twilio API for WhatsApp supports sending and receiving GPS location data in messages to and from WhatsApp users.

Sending outbound location messages over WhatsApp is similar to sending a text-based message, with the addition of the PersistentAction parameter in your Twilio API requests. Outbound location messages must include the following information:

• Body={name}
• PersistentAction=geo:{latitude},{longitude} OR
• PersistentAction=geo:{latitude},{longitude}|{label}

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 createMessage() {
11
  const message = await client.messages.create({
12
    body: "This is one of the Twilio office locations",
13
    messagingServiceSid: "MGXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
14
    persistentAction: ["geo:37.787890,-122.391664|375 Beale St"],
15
    to: "whatsapp:+15005550006",
16
  });
17

18
  console.log(message.body);
19
}
20

21
createMessage();

1
{
2
  "account_sid": "ACaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
3
  "api_version": "2010-04-01",
4
  "body": "This is one of the Twilio office locations",
5
  "date_created": "Thu, 24 Aug 2023 05:01:45 +0000",
6
  "date_sent": "Thu, 24 Aug 2023 05:01:45 +0000",
7
  "date_updated": "Thu, 24 Aug 2023 05:01:45 +0000",
8
  "direction": "outbound-api",
9
  "error_code": null,
10
  "error_message": null,
11
  "from": "+14155552345",
12
  "num_media": "0",
13
  "num_segments": "1",
14
  "price": null,
15
  "price_unit": null,
16
  "messaging_service_sid": "MGXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
17
  "sid": "SMaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
18
  "status": "queued",
19
  "subresource_uris": {
20
    "media": "/2010-04-01/Accounts/ACaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa/Messages/SMaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa/Media.json"
21
  },
22
  "tags": {
23
    "campaign_name": "Spring Sale 2022",
24
    "message_type": "cart_abandoned"
25
  },
26
  "to": "whatsapp:+15005550006",
27
  "uri": "/2010-04-01/Accounts/ACaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa/Messages/SMaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.json"
28
}

Your user should receive a message that looks like this:

Expand image

You can also receive inbound location messages with the Twilio API for WhatsApp.

Locations do not appear in the Twilio Console at this time. However, your web application will receive the location data in the POST request that Twilio sends. This data will be included in the HTTP POST request for the incoming message that we send to your webhook.

You will be able to access the following parameters in the POST request values Twilio sends to your application when you receive a WhatsApp location message:

• Latitude
• Longitude
• Address
• Label

There are two types of location that users can send with WhatsApp: Current Location and Live Location. Live Location is not currently supported by the WhatsApp Business API.

Current Location is a static type of content, similar to a timestamp. This means the location information you receive from a user indicates where the user was in that particular moment in time when they triggered the "send location" action.

Below is a sample payload containing location information. The Body={name} parameter is not required for inbound messages.

Latitude=37.7879277&Longitude=-122.3937508&Address=375+Beale+St%2C+San+Francisco%2C+CA+94105&SmsMessageSid=SMxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&NumMedia=0&SmsSid=SMxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&Label=Twilio+Inc&Body=&To=whatsapp%3A%2B14155238886&NumSegments=1&MessageSid=SMxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&AccountSid=ACxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&From=whatsapp%3A%2B12345678900&ApiVersion=2010-04-01

When you are within the 24-hour session (initiated by a customer sending your business a message), you can send freeform, non-templated messages with a customer. During this 24-hour window, WhatsApp messages that contain web links display a web page snippet preview on the WhatsApp client. WhatsApp does not currently support URL previews in templated messages.

Expand image

Customers can initiate a conversation with you on WhatsApp through URL deep links, such as on your website. If end users have WhatsApp installed on their devices, clicking the deep link opens a conversation with your business inside of WhatsApp.

Deep link format : https://wa.me/<e164 number>&text=Hello!

Deep links can be embedded in web or mobile apps, advertised on the web, or placed in other visible locations. They are an effective way to start conversations without using WhatsApp Notification templates.

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 createMessage() {
11
  const message = await client.messages.create({
12
    body: "Let's build something amazing with WhatsApp: https://www.twilio.com/docs/whatsapp",
13
    messagingServiceSid: "MGXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
14
    to: "whatsapp:+15005550006",
15
  });
16

17
  console.log(message.body);
18
}
19

20
createMessage();

1
{
2
  "account_sid": "ACaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
3
  "api_version": "2010-04-01",
4
  "body": "Let's build something amazing with WhatsApp: https://www.twilio.com/docs/whatsapp",
5
  "date_created": "Thu, 24 Aug 2023 05:01:45 +0000",
6
  "date_sent": "Thu, 24 Aug 2023 05:01:45 +0000",
7
  "date_updated": "Thu, 24 Aug 2023 05:01:45 +0000",
8
  "direction": "outbound-api",
9
  "error_code": null,
10
  "error_message": null,
11
  "from": "+14155552345",
12
  "num_media": "0",
13
  "num_segments": "1",
14
  "price": null,
15
  "price_unit": null,
16
  "messaging_service_sid": "MGXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
17
  "sid": "SMaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
18
  "status": "queued",
19
  "subresource_uris": {
20
    "media": "/2010-04-01/Accounts/ACaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa/Messages/SMaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa/Media.json"
21
  },
22
  "tags": {
23
    "campaign_name": "Spring Sale 2022",
24
    "message_type": "cart_abandoned"
25
  },
26
  "to": "whatsapp:+15005550006",
27
  "uri": "/2010-04-01/Accounts/ACaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa/Messages/SMaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.json"
28
}

QR codes and short links enable consumers to initiate a conversation with a business without adding a new contact in their phone!

A QR ("Quick Response") code is a type of barcode that you can use to open up a new WhatsApp conversation. Your end uses can scan your business' QR code, and the WhatsApp business profile will automatically load, with a pre-filled message that your business can define.

Here's an example of a QR Code:

Expand image

Businesses can generate short links that, when clicked, load pre-filled messages. You can edit or delete these links at any time. Short links mask phone numbers so that only a random code appears in the URL.

• Get in touch with more users. Businesses can place QR codes on product packaging, receipts/invoices, at your storefront and other physical or digital surfaces. These can be used to respond to customer-initiated questions, such as pre-sales inquiries or post-purchase support.
• Collect opt-in. Businesses can collect opt-in for notifications via QR codes and/or short links.

To get a WhatsApp QR code or short link, open a support ticket and provide the WhatsApp Sender (Phone Number) and the message you would like to have embedded in the QR code or short link.

Ready to send feature-rich messages to your end users over WhatsApp? Check out some of these resources to get started (or keep) building:

• The WhatsApp API Overview
• Learn key concepts and terms for building with WhatsApp and Twilio
• Getting started with WhatsApp and how to onboard your first Sender