Overview
In WhatsApp Business Messages, a Reply Button Message has the following structure:
- Header (optional)
- Title
- Subtitle
- Footer (optional)
- Buttons (between 1 and 3)
Examples Of WhatsApp Reply Button:
Reply Button
The Reply Button is the container that holds the information that should be displayed by the connector.
Properties
Property Name | Description | Type | Required |
---|---|---|---|
type | Type of the Container. For Reply Buttons in WhatsApp the type should always be vertical, as it best represents the layout on customer side. |
Enum | Y |
tag | Tag of template view, must be generic. | Enum | Y |
elements | Array of elements/templates that contains the actual content of the Reply Button. The elements must be in the following order: 1) Image 2) Title 3) Subtitle 4) Footer 5-7) Button The description and at least one button element are required. |
Array(Element) | Y |
JSON Representation Card
{
"type": "vertical",
"tag": "generic",
"elements": [Image, Title, Description, Button, Button, Button]
}
Image
The image that will be displayed at the top of the Reply Button. The image size should be under 5MB.
Properties
Property Name | Description | Type | Required |
---|---|---|---|
type | Must be "image". Identifies the element as an object of type image. | Enum | Y |
url |
The URL of the image that will be sent to Facebook. The domain where the image is being stored must be whitelisted before it can be used. |
String | Y |
JSON Representation
{
"type": "image",
"url": "https://d1hryyr5hiabsc.cloudfront.net/web2020/img/resources/rep-great-ai-divide@1x.jpg"
}
Title
The highlighted headline of the rich card.
Properties
Property Name | Description | Type | Required |
---|---|---|---|
type | Must be "text". Identifies the element as an object of type text. | Enum | Y |
tag | Must be "title". If missing, the first text element in the template will be set as the card text. | Enum | Y |
text |
The actual text of the headline. The text can not be longer than 1024 characters shared with the subtitle. |
String | Y |
JSON Representation
{
"type": "text",
"tag": "title",
"text": "The great AI divide"
}
Subtitle
The text of the rich card.
Properties
Property Name | Description | Type | Required |
---|---|---|---|
type | Must be "text". Identifies the element as an object of type text. | Enum | Y |
tag | Must be "sutitle". If missing the first text element in the template will be set as the card text. | Enum | Y |
text |
The description text. The text can not be longer than 1024 characters shared with the title. |
String | Y |
Footer
Footer of the card.
Properties
Property Name | Description | Type | Required |
---|---|---|---|
type | Must be "text". Identifies the element as an object of type text. | Enum | Y |
tag | Must be "footer". | Enum | Y |
text |
The description text. The text can not be longer than 60 characters shared with the title. |
String | Y |
JSON Representation
{
"type": "text",
"text": "Will be processed in 1 working day",
"tag": "footer"
},
Button
A button at the bottom of a rich card.
Properties
Property Name | Description | Type | Required |
---|---|---|---|
type | Must be "button". Identifies the element as an object of type button. | Enum | Y |
title |
The text of the button. The text can not be longer than 20 characters. |
String | Y |
click |
The click operations that should be executed when the customer clicks the button. These click operations must contain at least one action. The WhatsApp only supports the publishText |
ClickOperations | Y |
{
"type": "button",
"title": "Retry same address",
"click": ClickOperations
}
Full Template
{
"type": "vertical",
"tag": "generic",
"elements": [
{
"type": "image",
"url": "https://d1hryyr5hiabsc.cloudfront.net/web2020/img/resources/rep-great-ai-divide@1x.jpg"
},
{
"type": "text",
"text": "Package delivery update",
"tag": "title"
},
{
"type": "text",
"text": "Hi! It was not possible to deliver your package on the 16th of August 2021. Please select a desired delivery location.",
"tag": "subtitle"
},
{
"type": "text",
"text": "Will be processed in 1 working day",
"tag": "footer"
},
{
"type": "button",
"title": "Retry same address",
"click": {
"actions": [
{
"type": "publishText",
"text": "Retry same address"
}
]
}
},
{
"type": "button",
"title": "Pickup point",
"click": {
"actions": [
{
"type": "publishText",
"text": "Pickup point"
}
]
}
},
{
"type": "button",
"title": "Deliver to local postoffice",
"click": {
"actions": [
{
"type": "publishText",
"text": "Local post office"
}
]
}
}
]
}