Skip to navigation

Send a Quick Reply Button

In this code snippet you learn how to send a quick reply style button on WhatsApp. This uses Vonage'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, Vonage will POST relevant data to your inbound message webhook URL.

Example

Find the description for all variables used in each code snippet below:

Key Description
VONAGE_APPLICATION_ID The Vonage Application ID.
VONAGE_APPLICATION_PRIVATE_KEY_PATH Private key path.
BASE_URL For production use the base URL is https://api.nexmo.com/. For sandbox testing the base URL is https://messages-sandbox.nexmo.com/.
MESSAGES_API_URL There are two versions of the API, each with their own endpoints. For production the previous Messages API endpoint was https://api.nexmo.com/v0.1/messages, the new one is https://api.nexmo.com/v1/messages. For sandbox testing the Messages API endpoint is https://messages-sandbox.nexmo.com/v0.1/messages or https://messages-sandbox.nexmo.com/v1/messages, depending on which version you have set in the sandbox dashboard.
WHATSAPP_NUMBER The WhatsApp number that has been allocated to you by Vonage. For sandbox testing the number is 14157386102.
VONAGE_WHATSAPP_NUMBER Refer to WHATSAPP_NUMBER above.
VONAGE_NUMBER Refer to WHATSAPP_NUMBER above.
TO_NUMBER Replace with the number you are sending to. E.g. 447700900001
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. For sandbox testing the supported namespace is 9b6b4fcb_da19_4a26_8fe8_78074a91b584.
WHATSAPP_TEMPLATE_NAME The name of the template created in your WhatsApp Business Account. For sandbox testing the verify template is currently available. Refer to this table for new templates as they become available.

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

  • cURL
  • Node.js
  • Python
  • Ruby

    • Prerequisites

    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:

    curl -X POST $MESSAGES_API_URL \
     -H 'Authorization: Bearer' $JWT  \
     -H 'Content-Type: application/json' \
     -d '{
  "message_type": "custom",
  "to": "$TO_NUMBER",
  "from": "$WHATSAPP_NUMBER",
  "channel": "whatsapp",
  "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

    Prerequisites

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

    npm install @vonage/server-sdk

    Create a file named send-quick-reply-button.js and add the following code:

    const Vonage = require('@vonage/server-sdk');
const WhatsAppTemplate = require('@vonage/server-sdk/lib/Messages/WhatsAppTemplate');

const vonage = new Vonage(
    {
        apiKey: VONAGE_API_KEY,
        apiSecret: VONAGE_API_SECRET,
        applicationId: VONAGE_APPLICATION_ID,
        privateKey: VONAGE_APPLICATION_PRIVATE_KEY_PATH,
    },
    {
        apiHost: BASE_URL,
    }
);

    View full source

    Write the code

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

    vonage.messages.send(
    new WhatsAppTemplate(
        {
            name: `${WHATSAPP_TEMPLATE_NAMESPACE}:${WHATSAPP_TEMPLATE_NAME}`,
            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',
                        },
                    ],
                },
            ],
        },
        {
            policy: 'deterministic',
            locale: 'en',
        },
        TO_NUMBER,
        WHATSAPP_NUMBER,
    ),
    (err, data) => {
        if (err) {
            console.error(err);
        } else {
            console.log(data.message_uuid);
        }
    }
);

    View full source

    Run your code

    Save this file to your machine and run it: 

    node send-quick-reply-button.js

    Prerequisites

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

    pip install vonage

    Write the code

    Add the following to send_button_quick.py:

    BUTTON = {
    "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"}],
            },
        ],
    },
}

import vonage

client = vonage.Client(
    application_id=VONAGE_APPLICATION_ID,
    private_key=VONAGE_APPLICATION_PRIVATE_KEY_PATH,
)

client.messages.send_message(
    {
        "channel": "whatsapp",
        "message_type": "custom",
        "to": TO_NUMBER,
        "from": FROM_NUMBER,
        "custom": BUTTON,
    }
)

    View full source

    Run your code

    Save this file to your machine and run it: 

    python3 send_button_quick.py

    Prerequisites

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

    gem install vonage

    Write the code

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

    client = Vonage::Client.new(
  application_id: VONAGE_APPLICATION_ID,
  private_key: File.read(VONAGE_APPLICATION_PRIVATE_KEY_PATH)
)

message = Vonage::Messaging::Message.whatsapp(
  type: 'custom',
  message: {
    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"
            }
          ]
        }
      ]
    }
  }
)

client.messaging.send(
  from: VONAGE_WHATSAPP_NUMBER,
  to: TO_NUMBER,
  **message
)

    View full source

    Run your code

    Save this file to your machine and run it: 

    ruby send-button-quick-reply.rb

    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

    Improve this page