Skip to contentSkip to navigationSkip to topbar
Rate this page:
On this page

Using Buttons In WhatsApp



What are WhatsApp buttons?

what-are-whatsapp-buttons page anchor

WhatsApp lets you add buttons to message templates. There are two types of buttons: Quick replies and Call to action buttons. These buttons open up many opportunities for businesses worldwide to engage with their customers on WhatsApp, one of the most popular messaging applications.

Quick replies let businesses define buttons that users can tap to respond. When a Quick reply is tapped, a message containing the button text is sent in the conversation.

Call to action buttons trigger a phone call or open a website when tapped. Please note that at this time, WhatsApp does not support deeplinks.

To use buttons, you need to submit them as part of a message template to WhatsApp. Once approved, templates containing buttons can be sent by sending the message text in your API request.


Creating templates with buttons

creating-templates-with-buttons page anchor

To use buttons, you need to submit a template that contains the buttons. Go to the Twilio console, navigate to Programmable Messaging > Senders > WhatsApp Templates, and click the New message template button. Here, you need to submit a message template containing buttons. For more information, please see Sending Notifications with Templates.

whatsapp-button-template.

Sending templates with buttons

sending-templates-with-buttons page anchor

Once your template with buttons has been approved, you can send buttons as part of your WhatsApp messages. To send a button, send a message that contains the body of the template. The buttons are automatically appended to the message.

For example, to send the buttons shown below, you need to send a message containing just the body: "Thank you for submitting your order. To finalize your payment, please tap below to call or visit our website." The template will be sent, including the buttons.

whatsapp-callaction-buttons.
quick-reply-button.
Call to action buttonsQuick reply button
(information)

Info

If you send a message with a body that matches two templates — one with buttons and one without — the template with buttons will be automatically chosen

Send a WhatsApp message with buttons

send-a-whatsapp-message-with-buttons page anchor

This message contains the body used in the approved template with buttons.

Node.js
Python
C#
Java
Go
PHP
Ruby
twilio-cli
curl

_14
// Download the helper library from https://www.twilio.com/docs/node/install
_14
// Find your Account SID and Auth Token at twilio.com/console
_14
// and set the environment variables. See http://twil.io/secure
_14
const accountSid = process.env.TWILIO_ACCOUNT_SID;
_14
const authToken = process.env.TWILIO_AUTH_TOKEN;
_14
const client = require('twilio')(accountSid, authToken);
_14
_14
client.messages
_14
.create({
_14
body: 'Thank you for submitting your order. To finalize your payment, please tap below to call or visit our website.',
_14
from: 'whatsapp:+15005550006',
_14
to: 'whatsapp:+14155238886'
_14
})
_14
.then(message => console.log(message.sid));

Output

_24
{
_24
"account_sid": "ACXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
_24
"api_version": "2010-04-01",
_24
"body": "Thank you for submitting your order. To finalize your payment, please tap below to call or visit our website.",
_24
"date_created": "Thu, 24 Aug 2023 05:01:45 +0000",
_24
"date_sent": "Thu, 24 Aug 2023 05:01:45 +0000",
_24
"date_updated": "Thu, 24 Aug 2023 05:01:45 +0000",
_24
"direction": "outbound-api",
_24
"error_code": null,
_24
"error_message": null,
_24
"from": "whatsapp:+15005550006",
_24
"num_media": "0",
_24
"num_segments": "1",
_24
"price": null,
_24
"price_unit": null,
_24
"messaging_service_sid": "MGXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
_24
"sid": "SMXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
_24
"status": "queued",
_24
"subresource_uris": {
_24
"media": "/2010-04-01/Accounts/ACXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX/Messages/SMXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX/Media.json"
_24
},
_24
"to": "whatsapp:+14155238886",
_24
"uri": "/2010-04-01/Accounts/ACXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX/Messages/SMXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.json"
_24
}


When end-users tap on one of your Quick replies, this automatically triggers a message that is sent to your business with the button text. If you have a webhook configured for incoming messages to the WhatsApp sender that the Quick reply was sent to, then you can get the text of the button tapped in the ButtonText parameter from the callback. For more information, please see Twilio's Webhook Requests.



Rate this page: