Bouton "Envoyer un lien
Dans cet extrait de code, vous apprendrez comment envoyer un bouton de type lien sur WhatsApp. Cet exemple utilise la solution de Vonage objet personnalisé facilité. Vous pouvez vous référer à la documentation du développeur de WhatsApp pour connaître les spécificités de la fonction format du message.
Lorsque le destinataire du message clique sur le bouton du lien, il est invité à demander l'autorisation de passer au lien cible.
Exemple
Veillez à ce que les variables suivantes soient réglées sur les valeurs souhaitées en utilisant toute méthode appropriée :
| 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 |
MESSAGES_API_URL | There are two versions of the API, each with their own endpoints. For production the previous Messages API endpoint was |
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 |
VONAGE_NUMBER | Refer to |
TO_NUMBER | Replace with the number you are sending to. E.g. |
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. |
HEADER_IMAGE_URL | The URL of the image to display in the template message header. |
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-link.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",
"text": "Joe Bloggs"
},
{
"type": "text",
"text": "AB123456"
}
]
},
{
"type": "button",
"index": "0",
"sub_type": "url",
"parameters": [
{
"type": "text",
"text": "AB123456"
}
]
}
]
}
}
}'
Exécutez votre code
Enregistrez ce fichier sur votre machine et exécutez-le :
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/messagesCréez un fichier nommé send-button-link.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} : {}),
},
);Rédiger le code
Ajouter ce qui suit à send-button-link.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',
text: 'Joe Bloggs',
},
{
type: 'text',
text: 'AB123456',
},
],
},
{
type: 'button',
index: '0',
sub_type: 'url',
parameters: [
{
type: 'text',
text: 'AB123456',
},
],
},
],
},
},
})
.then(({ messageUUID }) => console.log(messageUUID))
.catch((error) => console.error(error));Exécutez votre code
Enregistrez ce fichier sur votre machine et exécutez-le :
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:
Créez un fichier nommé SendWhatsappLinkButton et ajoutez le code suivant à la méthode main:
Rédiger le code
Ajouter ce qui suit à la méthode main du fichier SendWhatsappLinkButton:
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 :
Exécutez la commande gradle suivante pour exécuter votre application, en remplaçant com.vonage.quickstart.kt.messages.whatsapp par le paquet contenant SendWhatsappLinkButton:
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:
Créez un fichier nommé SendWhatsappLinkButton et ajoutez le code suivant à la méthode main:
VonageClient client = VonageClient.builder()
.applicationId(VONAGE_APPLICATION_ID)
.privateKeyPath(VONAGE_PRIVATE_KEY_PATH)
.build();Rédiger le code
Ajouter ce qui suit à la méthode main du fichier SendWhatsappLinkButton:
var response = client.getMessagesClient().sendMessage(
WhatsappCustomRequest.builder()
.from(WHATSAPP_SENDER_ID).to(MESSAGES_TO_NUMBER)
.custom(Map.of(
"type", "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", "image",
"image", Map.of(
"link", WHATSAPP_HEADER_IMAGE_URL
)
)
)
),
Map.of(
"type", "body",
"parameters", List.of(
Map.of(
"type", "text",
"text", "Anand"
),
Map.of(
"type", "text",
"text", "Quest"
),
Map.of(
"type", "text",
"text", "113-0921387"
),
Map.of(
"type", "text",
"text", "23rd Nov 2019"
)
)
),
Map.of(
"type", "button",
"index", "0",
"sub_type", "url",
"parameters", List.of(
Map.of(
"type", "text",
"text", "1Z999AA10123456784"
)
)
)
)
)
))
.build()
);
System.out.println("Message sent successfully. ID: "+response.getMessageUuid());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 :
Exécutez la commande gradle suivante pour exécuter votre application, en remplaçant com.vonage.quickstart.messages.whatsapp par le paquet contenant SendWhatsappLinkButton:
Conditions préalables
Si vous n'avez pas de demande, vous pouvez créer un. Veillez également à configurer vos webhooks.
Install-Package VonageConditions préalables
Si vous n'avez pas de demande, vous pouvez créer un. Veillez également à configurer vos webhooks.
composer require vonage/clientCréez un fichier nommé send-button-link.php et ajoutez le code suivant :
Exécutez votre code
Enregistrez ce fichier sur votre machine et exécutez-le :
Conditions préalables
Si vous n'avez pas de demande, vous pouvez créer un. Veillez également à configurer vos webhooks.
pip install vonage python-dotenvExécutez votre code
Enregistrez ce fichier sur votre machine et exécutez-le :
Conditions préalables
Si vous n'avez pas de demande, vous pouvez créer un. Veillez également à configurer vos webhooks.
gem install vonageCréez un fichier nommé send-button-link.rb et ajoutez le code suivant :
client = Vonage::Client.new(
application_id: VONAGE_APPLICATION_ID,
private_key: VONAGE_PRIVATE_KEY
)Exécutez votre code
Enregistrez ce fichier sur votre machine et exécutez-le :
Essayez-le
Lorsque vous exécutez le code, un message WhatsApp contenant un bouton de lien est envoyé au destinataire. Dans cet exemple, le bouton est un lien vers les informations de suivi du colis.