Overview

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

  1. Header (optional)
  2. Title
  3. Subtitle
  4. Footer (optional)
  5. Buttons (between 1 and 3)

Examples Of WhatsApp Reply Button:

Whatsapp Reply Button Examples

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.

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 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"
          }
        ]
      }
    }
  ]
}