Overview
In WhatsApp Business Messages, a List Message has the following structure:
- Title
- Subtitle (optional)
- Footer (optional)
- Vertical (at least 1 is mandatory)
Examples Of WhatsApp List Message:
List Message Button
The List Message 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 WhatsApp List Messages the type should always be horizontal, 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 List Message. The elements must be in the following order: 1) Title 2) Subtitle 3) Footer 4) Button 5) Vertical The title and vertical are required. There can be multiple verticals representing multiple sections. A vertical has the following structue: 1) Title 2) Button Multiple buttons can be added. |
Array(Element) | Y |
JSON Representation Card
{
"type": "vertical",
"tag": "generic",
"elements": [Title, Subtitle, Footer, Button, Vertical]
}
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": "Menu selection"
}
Subtitle
The subtitle is the secondary text of the List Messsage.
Properties
Property Name | Description | Type | Required |
---|---|---|---|
type | Must be "text". Identifies the element as an object of type text. | Enum | Y |
tag | Must be "subtitle". | Enum | Y |
text |
The description text. The text can not be longer than 1024 characters shared with the title. |
String | Y |
JSON Representation
{
"type": "text",
"text": "Please select your menu items",
"tag": "subtitle"
}
Footer
Footer of the list messages. This is shown below the subtitle or title if the first is absent.
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": "(Your order will be dispatched soon)",
"tag": "footer"
},
Button
This element is a placeholder for the button shown in the user WhatsApp app. It can be used to change its name.
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": "Menu List",
"click": ClickOperations
}
Full Template
{
"type": "vertical",
"tag": "list",
"elements": [
{
"type": "vertical",
"elements": [
{
"type": "text",
"text": "Menu selection",
"tag": "title"
},
{
"type": "text",
"text": "Please select your menu items",
"tag": "subtitle"
},
{
"type": "text",
"text": "(Your order will be dispatched soon)",
"tag": "footer"
},
{
"type": "button",
"tag": "menu",
"title": "Menu List",
"click": {
"actions": [
{
"type": "publishText",
"text": "Menu List"
}
]
}
},
{
"type": "horizontal",
"elements": [
{
"type": "vertical",
"elements": [
{
"type": "text",
"tag": "title",
"text": "Choose main course"
},
{
"type": "button",
"title": "Lasagna",
"click": {
"actions": [
{
"type": "publishText",
"text": "Lasagna"
}
]
}
},
{
"type": "button",
"title": "Spaghetti Carbonara",
"click": {
"actions": [
{
"type": "publishText",
"text": "Spaghetti Carbonara"
}
]
}
},
{
"type": "button",
"title": "Risotto",
"click": {
"actions": [
{
"type": "publishText",
"text": "Risotto"
}
]
}
}
]
}
]
},
{
"type": "horizontal",
"elements": [
{
"type": "vertical",
"elements": [
{
"type": "text",
"tag": "title",
"text": "Choose dessert"
},
{
"type": "button",
"title": "Panna cotta",
"click": {
"actions": [
{
"type": "publishText",
"text": "Panna cotta"
}
]
}
},
{
"type": "button",
"title": "Tiramisù",
"click": {
"actions": [
{
"type": "publishText",
"text": "Tiramisù"
}
]
}
}
]
}
]
}
]
}
]
}