Overview

In WhatsApp Business Messages, a List Message has the following structure:

  1. Title
  2. Subtitle (optional)
  3. Footer (optional)
  4. 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 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ù"
                        }
                      ]
                    }
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }