Main WebsiteBlogFacebook Community

Sending Interactive List & Buttons

Supports only through WhatsApp Official Channel

Introduction

WhatsApp keep adding more messages formats to their messaging app to make the communication more seamless and frictionless, July 2021 WhatsApp Introduced a new message type "List Messages" and buttons now made available through Session messages as earlier, button's was earlier available only through Template Messages

From July 2021 onwards it's possible to send messages with optional header, footer in session messages as well, when passing the head and footer the body character will limit to 1024 when compared to the 4000 characters for text only message type.

List Messages

Using list message business can send a menu as message with upto 10 lists or choices separated by optional section and header, a great feature to showcase product category, recent orders, saved card details,faq etc

This type of message offers a simpler and more consistent way for users to make a selection when interacting with a business

List Message Specifications

  • Users cannot select more than one option at the same time from a list or button message, but they can go back and re-open a previous message.

  • It's possible to use header and footer

  • List messages cannot be used as notifications. Currently, they can only be sent within 24 hours of the last message sent by the user. If you try to send a message outside the 24-hour window, you get an error message.

  • Supported platforms: iOS, Android, and web.

  • No Template Approval Needed

  • List can be dynamically generate based on the conversation context

  • Able to pass your own reference value against each choice so that developers will get the value when a user make a choice.

  • It's possible to pass upto 10 choices in list and segregate the choice with Sections (Optional)

  • Can't use Media files with a list messages

Why You Should Use It

User Comprehension

When compared to text-based lists, interactive messages provide a simpler and more consistent format for people to find and select what they want from a business. During testing, people had higher comprehension levels interacting with these features.

Business Outcomes

During testing, chatbots using interactive messaging features achieved significantly higher response rates and conversions compared to those that are text-based.

Personalised

Populated dynamically in real-time and so can be personalised to the customer or situation. For example, you can show a List message of available time slots for appointment booking, or use Reply buttons to show previous delivery addresses.

No Templates

List Messages do not require templates or pre-approvals.

When You Should Use It

List Messages are best for presenting several options, such as:

  • A customer care or FAQ menu

  • A take-out menu

  • Selection of nearby stores or locations

  • Available reservation times

  • Choosing a recent order to repeat

  • Displaying last 10 order details

  • Showing last few transactions

  • Displaying Saved Card details

  • Show delivery address to choose

Understanding List Message Components

Interactive Quick Reply Buttons

WhatsApp first experimented the Quick Reply buttons with WhatsApp Template messages now from July 2021 onwards it's extended to Session messages as well, now business will able to send a message with upto 3 quick reply buttons and button text can now generated dynamically.

Quick Reply Button Specifications

  • Ability to use with Image/Video/Document/GIF media files

  • Supports Header & Footer optional

  • Upto 3 text buttons can be placed in a message

  • Buttons will automatically disable once a user is selected i.e user able to select only one button at a time

  • Button supports only Text (no emoji) upto 20 characters

  • No approval needed so button can be dynamically generated as per the context of the conversation

  • Able to pass your own reference value against each button so that developers can track which button got clicked by the user

When You Should Use this?

  • When customer want to make a selection like Confirm an Appointment

  • Submit feedback about an order

  • Combine with List to use for an enhanced user experience

  • Airtime recharge

  • Changing personal details

  • Reordering a previous order

  • Requesting a return

  • Adding optional extras to a food order

  • Choosing a payment method

Understand Quick Reply Button Components

Watch Video How List Message & Quick Reply Button combined to build a better conversational experience

Text Vs List Messages & Quick Reply Buttons

Request URL

Method : POST

https://pickyassist.com/app/api/v2/push

API Variables

See the API variables used to construct the WhatsApp List Messages & Buttons

Variable

Data Type

Description

Required

token

string

Your API Token

Mandatory

application

numeric

8=WhatsApp Official

919737001155 = Shared Number India

Mandatory

globalmessage

string

Ability to send static message to a group of numbers

Optional, Mandatory if not passed message in data array

global_headermessage

string

Global header, maximum 20 characters

Optional

global_footermessage

string

Global footer, maximum 60 characters

Optional

data

array

Array to pass dynamic messages

number

numeric

Mobile Number with Country Code

Mandatory

message

string

Message Content

Mandatory, if globalmessage is blank

header_message

string

20 Characters Maximum

Optional

footer_message

string

60 Characters Maximum

Optional

interactive

array

interactive_type

numeric

1= List

2 = Quick Reply Button

Mandatory for Interactive messages

list_title

string

Title of the List maximum 20 Characters

Mandatory for List Messages

sections

array

Maximum 10 sections can be created

title

string

Title of the sections, choice can be grouped as Sections

Optional, but mandatory if you have more than one Sections

choices

array

Need to pass the choice details in this array

Maximum 10 choices can be passed

title

string

Title of the Choice

Maximum 20 Characters

Mandatory

description

string

Description of the Choice

Maximum 72 Characters

Optional

choice_id

string

Your value to track the user selection, you will get this value in the message eventhook variable named "id"

Maximum 256 Characters

Mandatory

buttons

array

Maximum 3 Quick Reply Buttons

title

string

Button Name, maximum 20 characters

Mandatory

button_id

string

Your value to track the user selection, you will get this value in the message eventhook variable named "id"

Maximum 256 Characters

Mandatory

Sample Request - Sending List Messages (Single Contact)

This is a sample request for sending a list menu to a contact

{
   "token":"37c42c3a5305fde8568d870c520",
   "priority ":"0",
   "application":"8",
   "interactive_type":1,
   "data":[
      {
         "number":"19834434690",
         "message":"test message body",
         "header_message":"test header",
         "footer_message":"test footer",
         "interactive":{
            "list_title":"Test Button",
            "sections":[
               {
                  "title":"Section1",
                  "choices":[
                     {
                        "title":"choice1",
                        "choice_id":"ref1",
                        "description":"choice description1"
                     },
                     {
                        "title":"choice2",
                        "choice_id":"ref2",
                        "description":"choice description2"
                     }
                  ]
               },
               {
                  "title":"Section2",
                  "choices":[
                     {
                        "title":"choice21",
                        "choice_id":"ref21",
                        "description":"choice description21"
                     },
                     {
                        "title":"choice22",
                        "choice_id":"ref22",
                        "description":"choice description22"
                     }
                  ]
               }
            ]
         }
      }
   ]
}

Sample Request - Sending List Messages (Dynamic Messages - Multiple Contacts)

This is a sample request for sending a list menu to multiple contacts and each contact will receive different list menu and message content

{
   "token":"37c42c3a5fde8568d870c520",
   "priority ":"0",
   "application":"8",
   "interactive_type":1,
   "data":[
  	{
     	"number":"19834434690",
     	"message":"test message body",
     	"header_message":"test header",
     	"footer_message":"test footer",
     	"interactive":{
        	"list_title":"Test Button",
        	"sections":[
           	{
              	"title":"Section1",
              	"choices":[
                 	{
                    	"title":"choice1",
                    	"choice_id":"ref1",
                    	"description":"choice description1"
                 	},
                 	{
                    	"title":"choice2",
                    	"choice_id":"ref2",
                    	"description":"choice description2"
                 	}
              	]
           	},
           	{
              	"title":"Section2",
              	"choices":[
                 	{
                    	"title":"choice21",
                    	"choice_id":"ref21",
                    	"description":"choice description21"
                 	},
                 	{
                    	"title":"choice22",
                    	"choice_id":"ref22",
                    	"description":"choice description22"
                 	}
              	]
           	}
        	]
     	}
  	},
{
     	"number":"19834434690",
     	"message":"test message body2",
     	"header_message":"test header2",
     	"footer_message":"test footer2",
     	"interactive":{
        	"list_title":"Test Button2",
        	"sections":[
           	{
              	"title":"Section122",
              	"choices":[
                 	{
                    	"title":"choice1",
                    	"choice_id":"ref1",
                    	"description":"choice description1"
                 	},
                 	{
                    	"title":"choice2",
                    	"choice_id":"ref2",
                    	"description":"choice description2"
                 	}
              	]
           	},
           	{
              	"title":"Section2",
              	"choices":[
                 	{
                    	"title":"choice21",
                    	"choice_id":"ref21",
                    	"description":"choice description21"
                 	},
                 	{
                    	"title":"choice22",
                    	"choice_id":"ref22",
                    	"description":"choice description22"
                 	}
              	]
           	}
        	]
     	}
  	}
   ]
}

Sample Request - Sending List Messages (Multiple Contact - Static)

This is a sample request for sending a list menu to multiple contacts but the message content and list menu is static for all contacts

Supports Only Video/Image/GIF/Document as media files when using with Quick Reply Buttons and maximum 1024 characters allowed in the body contents, Optional Header upto 20 characters, optional Footer upto 60 Characters

{
   "token":"37c42c305fde8568d870c520",
   "priority ":"0",
   "application":"8",
   "interactive_type":1,
   "globalmessage":"test message body",
   "global_headermessage":"test header",
   "global_footermessage":"test footer",
   "interactive":{
      "list_title":"Test Button",
      "sections":[
         {
            "title":"Section1",
            "choices":[
               {
                  "title":"choice1",
                  "choice_id":"ref1",
                  "description":"choice description1"
               },
               {
                  "title":"choice2",
                  "choice_id":"ref2",
                  "description":"choice description2"
               },
               {
                  "title":"choice3",
                  "choice_id":"ref3",
                  "description":"choice description3"
               }
            ]
         },
         {
            "title":"Section2",
            "choices":[
               {
                  "title":"choice21",
                  "choice_id":"ref21",
                  "description":"choice description21"
               },
               {
                  "title":"choice22",
                  "choice_id":"ref22",
                  "description":"choice description22"
               }
            ]
         }
      ]
   },
   "data":[
      {
         "number":"19834434690"
      },
      {
         "number":"19834434690"
      },
      {
         "number":"19834434690"
      }
   ]
}

Sample Request - Sending Quick Reply Buttons Messages (Single Contact - Static)

This is a sample request for sending Quick Reply button messages to a single contact with static message content

{
   "token":"37c42c3a543ed8d208568d870c520",
   "priority ":"0",
   "application":"8",
   "interactive_type":2,
   "data":[
      {
         "number":"19846290",
         "message":"test message body",
         "media":"https://pickyassist.com/img/logo.png",
         "header_message":"test header",
         "footer_message":"test footer",
  "interactive": {
	"buttons": [
  	{
    	"title": "yes",
    	"button_id": "btn1"
  	},
  	{
    	"title": "no",
    	"button_id": "btn2"
  	},
  	{
    	"title": "cancel",
    	"button_id": "btn3"
  	}
	]
  }

      }
   ]
}

Sample Request - Sending Quick Reply Buttons Messages (Multiple Contact - Dynamic)

This is a sample request for sending Quick Reply button messages to multiple contacts with dynamic message content to each contact.

{
   "token":"37c42c3a54bc305fde8568d870c520",
   "priority ":"0",
   "application":"8",
   "interactive_type":2,
   "data":[
      {
         "number":"19846290",
         "message":"test message body",
         "media":"https://pickyassist.com/img/logo.png",
         "header_message":"test header",
         "footer_message":"test footer",
  "interactive": {
	"buttons": [
  	{
    	"title": "yes",
    	"button_id": "btn1"
  	},
  	{
    	"title": "no",
    	"button_id": "btn2"
  	},
  	{
    	"title": "cancel",
    	"button_id": "btn3"
  	}
	]
  }

      },
       {
         "number":"19846290",
         "message":"test message body",
         "media":"https://pickyassist.com/blog/wp-content/uploads/2021/05/drafting.png",
         "header_message":"test header2",
         "footer_message":"test footer3",
  "interactive": {
	"buttons": [
  	{
    	"title": "yes1",
    	"button_id": "btn1"
  	},
  	{
    	"title": "no1",
    	"button_id": "btn2"
  	}
	]
  }

      }
   ]
}

Getting List Message Selection & Button Click Events

To know the selection made by user in a list message or which button the user is clicked you need to listen to the Global Webhook Event.

You will get the Webhook Event as below, extract the value from the "Interactive" array

type=1 = List Message | type=2=Quick Reply Button

id= the value you passed in each Choice List (choice_id) or Button (button_id)

description=description of the choice, only applicable for list messages

If you need the button or choice title then extract it from "message_in_raw" variable

Use the "context-msg-id" to know which message user responded

{
   "number":"93436707768",
   "message-in":"choice1",
   "message_in_raw":"choice1",
   "type":1,
   "application":8,
   "unique-id":"70946012",
   "project-id":"14192",
   "direction":0,
   "context-msg-id":"41668446",
   "interactive":{
      "type":1,
      "id":"ref1",
      "description":"choice description1"
   }
}

PreviousSending Media Attachments – PushNextSending Stickers

Last updated

#663: Prebuilt Guide Updated

Change request updated