Send a Link Button

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

When the message recipient clicks on the link button, they will be prompted for permission to continue to the target link.

Example

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

Key Description
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 For production use the Messages API endpoint is https://api.nexmo.com/v0.1/messages. For sandbox testing the Messages API endpoint is https://messages-sandbox.nexmo.com/v0.1/messages.
WHATSAPP_NUMBER The WhatsApp number that has been allocated to you by Nexmo. For sandbox testing the number is 14157386170.
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. 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.
HEADER_IMAGE_URL The URL of the image to display in the template message header.

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-link.sh:

Copy to Clipboard
curl -X POST $MESSAGES_API_URL \
  -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": "image",
                  "image": {
                    "link": "'$HEADER_IMAGE_URL'"
                  }
                }
              ]
            },
            {
              "type": "body",
              "parameters": [
                {
                  "type": "text",
                  "text": "Anand"
                },
                {
                  "type": "text",
                  "text": "Quest"
                },
                {
                  "type": "text",
                  "text": "113-0921387"
                },
                {
                  "type": "text",
                  "text": "23rd Nov 2019"
                }
              ]
            },
            {
              "type": "button",
              "index": "0",
              "sub_type": "url",
              "parameters": [
                {
                  "type": "text",
                  "text": "1Z999AA10123456784"
                }
              ]
            }
          ]
        }
      }
    }
  }
}'

View full source

Run your code

Save this file to your machine and run it:

bash send-button-link.sh

Prerequisites

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

npm install nexmo@beta

Write the code

Add the following to send-link-button.js:

Copy to Clipboard
const Nexmo = require('nexmo');

const nexmo = new Nexmo(
    {
        apiKey: NEXMO_API_KEY,
        apiSecret: NEXMO_API_SECRET,
        applicationId: NEXMO_APPLICATION_ID,
        privateKey: NEXMO_APPLICATION_PRIVATE_KEY_PATH,
    },
    {
        apiHost: BASE_URL,
    }
);

nexmo.channel.send(
    { type: 'whatsapp', number: TO_NUMBER },
    { type: 'whatsapp', number: WHATSAPP_NUMBER },
    {
        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: 'image',
                                    image: {
                                        link: HEADER_IMAGE_URL,
                                    },
                                },
                            ],
                        },
                        {
                            type: 'body',
                            parameters: [
                                {
                                    type: 'text',
                                    text: 'Anand',
                                },
                                {
                                    type: 'text',
                                    text: 'Quest',
                                },
                                {
                                    type: 'text',
                                    text: '113-0921387',
                                },
                                {
                                    type: 'text',
                                    text: '23rd Nov 2019',
                                },
                            ],
                        },
                        {
                            type: 'button',
                            index: 0,
                            sub_type: 'url',
                            parameters: [
                                {
                                    type: 'text',
                                    text: '1Z999AA10123456784',
                                },
                            ],
                        },
                    ],
                },
            },
        },
    },
    (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-link-button.js

Try it out

When you run the code a WhatsApp message containing a link button is sent to the recipient. In this example the button is a link to package tracking information.

Further information