Envoyer un bouton de réponse rapide

Dans cet extrait de code, vous apprendrez comment envoyer un bouton de type réponse rapide sur WhatsApp. Cet exemple utilise la solution de Vonage objet personnalisé facilité. Vous pouvez vous référer à la documentation des développeurs de WhatsApp pour connaître les spécificités de la fonction format du message.

Lorsque le destinataire du message clique sur le bouton de réponse rapide, Vonage POST les données pertinentes à l'URL de votre webhook pour les messages entrants.

Exemple

Vous trouverez ci-dessous la description de toutes les variables utilisées dans chaque extrait de code :

Clé	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.
`WHATSAPP_TEMPLATE_NAME`	The name of the template created in your WhatsApp Business Account.

NOTE : N'utilisez pas de point de départ + ou 00 lorsque vous saisissez un numéro de téléphone, commencez par l'indicatif du pays, par exemple, 447700900000.

Conditions préalables

Si vous n'avez pas de demande, vous pouvez créer un. Veillez également à configurer vos webhooks.

Rédiger le code

Ajouter ce qui suit à send-button-quick-reply.sh:

curl -X POST "${MESSAGES_API_URL}" \
  -H "Authorization: Bearer "$JWT\
  -H 'Content-Type: application/json' \
  -H 'Accept: application/json' \
  -d $'{
    "to": "'${MESSAGES_TO_NUMBER}'",
    "from": "'${WHATSAPP_SENDER_ID}'",
    "channel": "whatsapp",
    "message_type": "custom",
    "custom": {
      "type": "template",
      "template": {
        "name": "'${WHATSAPP_TEMPLATE_NAME}'",
        "language": {
          "policy": "deterministic",
          "code": "en"
        },
        "components": [
          {
            "type": "header",
            "parameters": [
              {
                "type": "image",
                "image": {
                  "link": "'${MESSAGES_IMAGE_URL}'"
                }
              }
            ]
          },
          {
            "type": "body",
            "parameters": [
              {
                "type": "text",
                "parameter_name": "customer_name",
                "text": "Joe Bloggs"
              },
              {
                "type": "text",
                "parameter_name": "dentist_name",
                "text": "Mr Smith"
              },
              {
                "type": "text",
                "parameter_name": "appointment_date",
                "text": "2025-02-26"
              },
              {
                "type": "text",
                "parameter_name": "appointment_location",
                "text": "ACME Dental Practice"
              }
            ]
          },
          {
            "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"
              }
            ]
          }
        ]
      }
    }
  }'

Voir la source complète

Exécutez votre code

Enregistrez ce fichier sur votre machine et exécutez-le :

bash send-button-quick-reply.sh

Conditions préalables

Si vous n'avez pas de demande, vous pouvez créer un. Veillez également à configurer vos webhooks.

npm install @vonage/server-sdk @vonage/messages

Créez un fichier nommé send-button-quick-reply.js et ajoutez le code suivant :

const { Vonage } = require('@vonage/server-sdk');
const { Channels } = require('@vonage/messages');

/**
 * It is best to send messages using JWT instead of basic auth. If you leave out
 * apiKey and apiSecret, the messages SDK will send requests using JWT tokens
 *
 * @link https://developer.vonage.com/en/messages/technical-details#authentication
 */
const vonage = new Vonage(
  {
    applicationId: VONAGE_APPLICATION_ID,
    privateKey: VONAGE_PRIVATE_KEY,
  },
  {
    ...(MESSAGES_API_URL ? {apiHost: MESSAGES_API_URL} : {}),
  },
);

Voir la source complète

Rédiger le code

Ajouter ce qui suit à send-button-quick-reply.js:

vonage.messages.send({
  to: MESSAGES_TO_NUMBER,
  from: WHATSAPP_SENDER_ID,
  channel: Channels.WHATSAPP,
  messageType: 'custom',
  custom: {
    type: 'template',
    template: {
      name: WHATSAPP_TEMPLATE_NAME,
      language: {
        policy: 'deterministic',
        code: 'en',
      },
      components: [
        {
          type: 'header',
          parameters: [
            {
              type: 'image',
              image: {
                link: MESSAGES_IMAGE_URL,
              },
            },
          ],
        },
        {
          type: 'body',
          parameters: [
            {
              type: 'text',
              parameter_name: 'customer_name',
              text: 'Joe Bloggs',
            },
            {
              type: 'text',
              parameter_name: 'dentist_name',
              text: 'Mr Smith',
            },
            {
              type: 'text',
              parameter_name: 'appointment_date',
              text: '2025-02-26',
            },
            {
              type: 'text',
              parameter_name: 'appointment_location',
              text: 'ACME Dental Practice',
            },
          ],
        },
        {
          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',
            },
          ],
        },
      ],
    },
  },
})
  .then((resp) => console.log(resp.messageUUID))
  .catch((error) => console.error(error));

Voir la source complète

Exécutez votre code

Enregistrez ce fichier sur votre machine et exécutez-le :

node send-button-quick-reply.js

Conditions préalables

Si vous n'avez pas de demande, vous pouvez créer un. Veillez également à configurer vos webhooks.

Ajouter ce qui suit à build.gradle:

implementation 'com.vonage:server-sdk-kotlin:2.1.1'

Créez un fichier nommé SendWhatsappQuickReplyButton et ajoutez le code suivant à la méthode main:

val client = Vonage {
    applicationId(VONAGE_APPLICATION_ID)
    privateKeyPath(VONAGE_PRIVATE_KEY_PATH)
}

Voir la source complète

Rédiger le code

Ajouter ce qui suit à la méthode main du fichier SendWhatsappQuickReplyButton:

val messageId = client.messages.send(
    whatsappCustom {
        to(MESSAGES_TO_NUMBER)
        from(WHATSAPP_SENDER_ID)
        custom(mapOf(
            "type" to MessageType.TEMPLATE,
            "template" to mapOf(
                "namespace" to WHATSAPP_TEMPLATE_NAMESPACE,
                "name" to WHATSAPP_TEMPLATE_NAME,
                "language" to mapOf(
                    "code" to Locale.ENGLISH,
                    "policy" to Policy.DETERMINISTIC
                ),
                "components" to listOf(
                    mapOf(
                        "type" to "header",
                        "parameters" to listOf(
                            mapOf(
                                "type" to MessageType.TEXT,
                                "text" to "12/26"
                            )
                        )
                    ),
                    mapOf(
                        "type" to "body",
                        "parameters" to listOf(
                            mapOf(
                                "type" to MessageType.TEXT,
                                "text" to "*Ski Trip*"
                            ),
                            mapOf(
                                "type" to MessageType.TEXT,
                                "text" to "2019-12-26"
                            ),
                            mapOf(
                                "type" to MessageType.TEXT,
                                "text" to "*Squaw Valley Ski Resort, Tahoe*"
                            )
                        )
                    ),
                    mapOf(
                        "type" to MessageType.BUTTON,
                        "sub_type" to "quick_reply",
                        "index" to 0,
                        "parameters" to listOf(
                            mapOf(
                                "type" to "payload",
                                "payload" to "Yes-Button-Payload"
                            )
                        )
                    ),
                    mapOf(
                        "type" to MessageType.BUTTON,
                        "sub_type" to "quick_reply",
                        "index" to 1,
                        "parameters" to listOf(
                            mapOf(
                                "type" to "payload",
                                "payload" to "No-Button-Payload"
                            )
                        )
                    )
                )
            )
        ))
    }
)

Voir la source complète

Exécutez votre code

Nous pouvons utiliser le plugin Applications pour Gradle afin de simplifier l'exécution de notre application. Mettez à jour votre build.gradle avec ce qui suit :

apply plugin: 'application'
mainClassName = project.hasProperty('main') ? project.getProperty('main') : ''

Exécutez la commande gradle suivante pour exécuter votre application, en remplaçant com.vonage.quickstart.kt.messages.whatsapp par le paquet contenant SendWhatsappQuickReplyButton:

gradle run -Pmain=com.vonage.quickstart.kt.messages.whatsapp.SendWhatsappQuickReplyButton

Conditions préalables

Si vous n'avez pas de demande, vous pouvez créer un. Veillez également à configurer vos webhooks.

Ajouter ce qui suit à build.gradle:

implementation 'com.vonage:server-sdk:9.3.1'

Créez un fichier nommé SendWhatsappQuickReplyButton et ajoutez le code suivant à la méthode main:

VonageClient client = VonageClient.builder()
		.applicationId(VONAGE_APPLICATION_ID)
		.privateKeyPath(VONAGE_PRIVATE_KEY_PATH)
		.build();

Voir la source complète

Rédiger le code

Ajouter ce qui suit à la méthode main du fichier SendWhatsappQuickReplyButton:

var response = client.getMessagesClient().sendMessage(
	WhatsappCustomRequest.builder()
		.from(WHATSAPP_SENDER_ID).to(MESSAGES_TO_NUMBER)
		.custom(Map.of(
				"type", MessageType.TEMPLATE,
				"template", Map.of(
					"namespace", WHATSAPP_TEMPLATE_NAMESPACE,
					"name", WHATSAPP_TEMPLATE_NAME,
					"language", Map.of(
						"code", Locale.ENGLISH,
						"policy", Policy.DETERMINISTIC
					),
					"components", List.of(
						Map.of(
							"type", "header",
							"parameters", List.of(
								Map.of(
									"type", MessageType.TEXT,
									"text", "12/26"
								)
							)
						),
						Map.of(
							"type", "body",
							"parameters", List.of(
								Map.of(
									"type", MessageType.TEXT,
									"text", "*Ski Trip*"
								),
								Map.of(
									"type", MessageType.TEXT,
									"text", "2019-12-26"
								),
								Map.of(
									"type", MessageType.TEXT,
									"text", "*Squaw Valley Ski Resort, Tahoe*"
								)
							)
						),
						Map.of(
							"type", MessageType.BUTTON,
							"sub_type", "quick_reply",
							"index", 0,
							"parameters", List.of(
								Map.of(
									"type", "payload",
									"payload", "Yes-Button-Payload"
								)
							)
						),
						Map.of(
							"type", MessageType.BUTTON,
							"sub_type", "quick_reply",
							"index", 1,
							"parameters", List.of(
								Map.of(
									"type", "payload",
									"payload", "No-Button-Payload"
								)
							)
						)
					)
				)
		)).build()
);
System.out.println("Message sent successfully. ID: "+response.getMessageUuid());

Voir la source complète

Exécutez votre code

Nous pouvons utiliser le plugin Applications pour Gradle afin de simplifier l'exécution de notre application. Mettez à jour votre build.gradle avec ce qui suit :

apply plugin: 'application'
mainClassName = project.hasProperty('main') ? project.getProperty('main') : ''

Exécutez la commande gradle suivante pour exécuter votre application, en remplaçant com.vonage.quickstart.messages.whatsapp par le paquet contenant SendWhatsappQuickReplyButton:

gradle run -Pmain=com.vonage.quickstart.messages.whatsapp.SendWhatsappQuickReplyButton

Conditions préalables

Si vous n'avez pas de demande, vous pouvez créer un. Veillez également à configurer vos webhooks.

Install-Package Vonage

Rédiger le code

Ajouter ce qui suit à SendWhatsAppQuickReplyButton.cs:

var credentials = Credentials.FromAppIdAndPrivateKeyPath(VONAGE_APPLICATION_ID, VONAGE_PRIVATE_KEY_PATH);
var vonageClient = new VonageClient(credentials);
var request = new WhatsAppCustomRequest
{
    To = MESSAGES_TO_NUMBER,
    From = WHATSAPP_SENDER_ID,
    Custom = new
    {
        type = "template",
        template = new
        {
            name = WHATSAPP_TEMPLATE_NAME,
            language = new
            {
                code = "en",
                policy = "deterministic"
            },
            components = new object[]
            {
                new
                {
                    type = "header",
                    parameters = new[]
                    {
                        new
                        {
                            type = "text",
                            text = "12/26"
                        }
                    }
                },
                new
                {
                    type = "body",
                    parameters = new[]
                    {
                        new
                        {
                            type = "text",
                            text = "*Ski Trip*"
                        },
                        new
                        {
                            type = "text",
                            text = "2019-12-26"
                        },
                        new
                        {
                            type = "text",
                            text = "*Squaw Valley Ski Resort, Tahoe*"
                        }
                    }
                },
                new
                {
                    type = "button",
                    sub_type = "quick_reply",
                    index = 0,
                    parameters = new[]
                    {
                        new
                        {
                            type = "payload",
                            text = "Yes-Button-Payload"
                        }
                    }
                },
                new
                {
                    type = "button",
                    sub_type = "quick_reply",
                    index = 1,
                    parameters = new[]
                    {
                        new
                        {
                            type = "payload",
                            text = "No-Button-Payload"
                        }
                    }
                }
            }
        }
    }
};
var response = await vonageClient.MessagesClient.SendAsync(request);

Voir la source complète

Conditions préalables

Si vous n'avez pas de demande, vous pouvez créer un. Veillez également à configurer vos webhooks.

composer require vonage/client

Créez un fichier nommé send-button-quick-reply.php et ajoutez le code suivant :

Voir la source complète

Rédiger le code

Ajouter ce qui suit à send-button-quick-reply.php:

Voir la source complète

Exécutez votre code

Enregistrez ce fichier sur votre machine et exécutez-le :

php send-button-quick-reply.php

Conditions préalables

Si vous n'avez pas de demande, vous pouvez créer un. Veillez également à configurer vos webhooks.

pip install vonage python-dotenv

Rédiger le code

Ajouter ce qui suit à send-button-quick-reply.py:

from vonage import Auth, Vonage
from vonage_messages import WhatsappCustom

client = Vonage(
    Auth(
        application_id=VONAGE_APPLICATION_ID,
        private_key=VONAGE_PRIVATE_KEY,
    )
)

message = WhatsappCustom(
    to=MESSAGES_TO_NUMBER,
    from_=WHATSAPP_SENDER_ID,
    custom={
        "type": "template",
        "template": {
            "name": WHATSAPP_TEMPLATE_NAME,
            "language": {"policy": "deterministic", "code": "en"},
            "components": [
                {
                    "type": "header",
                    "parameters": [
                        {
                            "type": "image",
                            "image": {
                                "link": MESSAGES_IMAGE_URL,
                            },
                        },
                    ],
                },
                {
                    "type": "body",
                    "parameters": [
                        {
                            "type": "text",
                            "parameter_name": "customer_name",
                            "text": "Joe Bloggs",
                        },
                        {
                            "type": "text",
                            "parameter_name": "dentist_name",
                            "text": "Mr Smith",
                        },
                        {
                            "type": "text",
                            "parameter_name": "appointment_date",
                            "text": "2025-02-26",
                        },
                        {
                            "type": "text",
                            "parameter_name": "appointment_location",
                            "text": "ACME Dental Practice",
                        },
                    ],
                },
                {
                    "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"}],
                },
            ],
        },
    },
)

response = client.messages.send(message)
print(response)

Voir la source complète

Exécutez votre code

Enregistrez ce fichier sur votre machine et exécutez-le :

python messages/whatsapp/send-button-quick-reply.py

Conditions préalables

Si vous n'avez pas de demande, vous pouvez créer un. Veillez également à configurer vos webhooks.

gem install vonage

Créez un fichier nommé send-button-quick-reply.rb et ajoutez le code suivant :

Voir la source complète

Rédiger le code

Ajouter ce qui suit à send-button-quick-reply.rb:

Voir la source complète

Exécutez votre code

Enregistrez ce fichier sur votre machine et exécutez-le :

ruby send-button-quick-reply.rb

Essayez-le

Lorsque vous exécutez le code, un message de rappel WhatsApp est envoyé au numéro de destination. Le message comporte deux boutons de réponse rapide que vous pouvez utiliser pour indiquer si vous vous rendez ou non à l'événement. Lorsque vous appuyez sur un bouton, des données similaires à celles qui suivent sont envoyées à l'URL de votre webhook entrant :

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

Dans cet exemple, le destinataire a cliqué sur le bouton "oui".

Envoyer un bouton de réponse rapide

Exemple

Conditions préalables

Rédiger le code

Exécutez votre code

Conditions préalables

Rédiger le code

Exécutez votre code

Conditions préalables

Rédiger le code

Exécutez votre code

Conditions préalables

Rédiger le code

Exécutez votre code

Conditions préalables

Rédiger le code

Conditions préalables

Rédiger le code

Exécutez votre code

Conditions préalables

Rédiger le code

Exécutez votre code

Conditions préalables

Rédiger le code

Exécutez votre code

Essayez-le

Plus d'informations