Send a Quick Reply Button

In this code snippet you learn how to send a quick reply style button on WhatsApp. This uses Nexmo's custom object facility. You can reference the WhatsApp developer docs for the specifics of the message format.

When the message recipient clicks on the quick reply button, Nexmo will POST relevant data to your inbound message webhook URL.

Example

Ensure the following variables are set to your required values using any convenient method:

Key Description
WHATSAPP_NUMBER The WhatsApp number that has been allocated to you by Nexmo.
TO_NUMBER The phone number you are sending the message to.
WHATSAPP_TEMPLATE_NAMESPACE The namespace ID found in your WhatsApp Business Account. Only templates created in your own namespace will work. Using an template with a namespace outside of your own results in an error code 1022 being returned.
WHATSAPP_TEMPLATE_NAME The name of the template created in your WhatsApp Business Account.

NOTE: Don't use a leading + or 00 when entering a phone number, start with the country code, for example, 447700900000.

Prerequisites

Create an application
If you do not have an application you can create one. Make sure you also configure your webhooks.

Write the code

Add the following to send-button-quick-reply.sh:

Copy to Clipboard
curl -X POST \
  https://api.nexmo.com/v0.1/messages \
  -H 'Authorization: Bearer' $JWT  \
  -H 'Content-Type: application/json' \
  -d '{
  "from": {
    "type": "whatsapp",
    "number": "'$WHATSAPP_NUMBER'"
  },
  "to": {
    "type": "whatsapp",
    "number": "'$TO_NUMBER'"
  },
  "message": {
    "content": {
      "type": "custom",
      "custom": {
        "type": "template",
        "template": {
          "namespace": "'$WHATSAPP_TEMPLATE_NAMESPACE'",
          "name": "'$WHATSAPP_TEMPLATE_NAME'",
          "language": {
            "code": "en",
            "policy": "deterministic"
          },
          "components": [
            {
              "type": "header",
              "parameters": [
                {
                  "type": "text",
                  "text": "12/26"
                }
              ]
            },
            {
              "type": "body",
              "parameters": [
                {
                  "type": "text",
                  "text": "*Ski Trip*"
                },
                {
                  "type": "text",
                  "text": "2019-12-26"
                },
                {
                  "type": "text",
                  "text": "*Squaw Valley Ski Resort, Tahoe*"
                }
              ]
            },
            {
              "type": "button",
              "sub_type": "quick_reply",
              "index": 0,
              "parameters": [
                {
                  "type": "payload",
                  "payload": "Yes-Button-Payload"
                }
              ]
            },
            {
              "type": "button",
              "sub_type": "quick_reply",
              "index": 1,
              "parameters": [
                {
                  "type": "payload",
                  "payload": "No-Button-Payload"
                }
              ]
            }
          ]
        }
      }
    }
  }
}'

View full source

Run your code

Save this file to your machine and run it:

bash send-button-quick-reply.sh

Try it out

When you run the code a WhatsApp reminder message is sent to the destination number. The message has two quick reply buttons which you can use to select whether you are going to the event or not. When a button is pressed data similar to the following is posted to your inbound webhook URL:

{
    "message_uuid": "28ee5a1c-c4cc-48ec-922c-01520d4d396b",
    "to": {
        "number": "447700000000",
        "type": "whatsapp"
    },
    "from": {
        "number": "447700000001",
        "type": "whatsapp"
    },
    "timestamp": "2019-12-03T12:45:57.929Z",
    "direction": "inbound",
    "message": {
        "content": {
            "type": "button",
            "button": {
                "payload": "Yes-Button-Payload",
                "text": "Yes"
            }
        }
    }
}

In this example the recipient clicked the yes button.

Further information