Travailler avec les messages interactifs de WhatsApp
Messages interactifs est une fonctionnalité de WhatsApp for Business. Les API Messages Vonage vous permet de tirer parti de cette fonctionnalité en utilisant les points de terminaison de son API et ses webhooks.
Flux d'applications de base
La procédure de base pour travailler avec les messages interactifs de WhatsApp est la suivante :
Envoyer un
POSTà l'adresse suivante/v1/messages. Le corps de la demande doit contenir les données JSON requises, avec la balisechannelfixé àwhatsappet lemessage_typefixé àcustom. Lescustomdoit être renseigné par un champ objet personnalisé. La structure réelle de l'objet personnalisé varie en fonction du type de message interactif envoyé (par exemple, un bouton de réponse ou une liste).Le type de message approprié sera alors affiché dans le chat WhatsApp spécifié. Le client peut interagir avec le message, par exemple en cliquant sur un bouton de réponse ou en sélectionnant une option dans une liste (selon le type de message). L'API Messages de Vonage vous informera ensuite de cette interaction par le biais d'un rappel avec la charge utile du message à l'aide d'un message pré-configuré. webhook pour les messages entrants
En fonction du contenu de la charge utile reçue par le biais du rappel, vous pouvez effectuer les actions appropriées, telles que l'envoi d'une nouvelle demande.
NOTE : Le webhook des messages entrants pour la réception des rappels doit être mis en place dans le cadre d'un Applications Vonage
Mise en place de l'application
Vous pouvez configurer votre application Vonage de plusieurs façons, par exemple via l'application Tableau de bordLe tableau de bord peut être configuré à l'aide de l'API Applications ou de l'interface CLI de Vonage. Nous décrivons ci-dessous la configuration d'une application via le tableau de bord.
- Créez une nouvelle application sous Vos applications (en lui donnant un nom approprié, etc.)
- Sous Capacités, activer Messages
- L'activation de Messages devrait exposer les champs pour les webhooks de réception et d'état. Définissez le webhook entrant à l'URL où vous souhaitez recevoir les rappels pour les messages interactifs de WhatsApp.
- Réglez la version de l'API Messages sur v1 à l'aide du menu déroulant.
- Cliquer sur Générer une nouvelle application
- Une fois l'application générée, un onglet " Lier les canaux sociaux " sera exposé. Sous cet onglet, vous pouvez lier votre numéro d'entreprise WhatsApp.
NOTE : Les Applications Vonage imposent l'utilisation de JWT (JSON Web Tokens) pour authentifier les demandes à l'API, c'est-à-dire que l'authentification HTTP Basic n'est pas une option lors de l'utilisation de Messages API v1 avec des webhooks. En savoir plus sur les JWT.
Messages interactifs : Exemples
La structure de l'objet JSON varie en fonction du type de message interactif et d'un message à l'autre. En règle générale, vous devrez inclure l'élément from et to Numbers, une channel sur la touche whatsappet un message_type de custom. Vous devrez ensuite définir un custom dont la valeur est un objet personnalisé. L'objet personnalisé doit avoir un type clé de interactiveet un interactive dont la valeur est elle-même un objet.
Les interactive définit le message interactif. Il doit avoir un type sur l'une ou l'autre des touches suivantes button ou listIl comprend généralement quatre parties principales : header, body, footeret action. Les action détermine les éléments interactifs du message, tels que les boutons ou les options de liste.
Boutons de réponse : Exemple
Voici un exemple du corps d'une demande d'envoi d'un message interactif WhatsApp avec trois boutons de réponse :
{
"from": "YOUR_WABA_NUMBER",
"to": "USERS_NUMBER",
"channel": "whatsapp",
"message_type": "custom",
"custom": {
"type": "interactive",
"interactive": {
"type": "button",
"header": {
"type": "text",
"text": "Delivery time"
},
"body": {
"text": "Which time would you like us to deliver your order at?"
},
"footer": {
"text": "Please allow 15 mins either side of your chosen time"
},
"action": {
"buttons": [
{
"type": "reply",
"reply": {
"id": "slot-1",
"title": "15:00"
}
},
{
"type": "reply",
"reply": {
"id": "slot-2",
"title": "16:30"
}
},
{
"type": "reply",
"reply": {
"id": "slot-3",
"title": "17:15"
}
}
]
}
}
}
}
Le message qui en résulte se présente comme suit :
Dans l'interface utilisateur de WhatsApp, le message change d'apparence comme si l'utilisateur avait répondu à ce message avec le texte de l'un des boutons. De plus, ce bouton devient non cliquable alors que les autres restent cliquables.
Si l'utilisateur choisit la première option, vous recevrez ensuite quelque chose comme ceci via le webhook entrant :
{
"to": "YOUR_WABA_NUMBER",
"from": "USERS_NUMBER",
"channel": "whatsapp",
"message_uuid": "00000000-0000-0000-0000-000000000000",
"timestamp": "2021-08-10T00:00:00Z",
"message_type": "reply",
"reply": {
"id": "slot-1",
"title": "15:00"
}
}
Liste des messages : Exemple
Voici un exemple du corps d'une demande d'envoi d'un message de liste interactive WhatsApp avec quatre options classées en deux sections :
{
"from": "YOUR_WABA_NUMBER",
"to": "USERS_NUMBER",
"channel": "whatsapp",
"message_type": "custom",
"custom": {
"type": "interactive",
"interactive": {
"type": "list",
"header": {
"type": "text",
"text": "Select which pill you would like "
},
"body": {
"text": "You will be presented with a list of options"
},
"footer": {
"text": "There are no wrong choices"
},
"action": {
"button": "Select",
"sections": [
{
"title": "Section A - pills",
"rows": [
{
"id": "row1",
"title": "Red",
"description": "Take the red pill"
},
{
"id": "row2",
"title": "Blue",
"description": "Take the blue pill"
},
{
"id": "row3",
"title": "Green",
"description": "Take the green pill"
}
]
},
{
"title": "Section B - no pills",
"rows": [
{
"id": "row4",
"title": "Nothing",
"description": "Do not take a pill"
}
]
}
]
}
}
}
}
Le message qui en résulte se présente comme suit :
Lorsque l'utilisateur clique sur le bouton "Sélectionner", les options disponibles s'affichent. L'utilisateur peut alors sélectionner une option (maximum) et cliquer sur le bouton "Envoyer".
L'apparence du message change comme si l'utilisateur avait répondu au message avec le texte des champs titre et description de la demande API.
Si le client a choisi la première option de la section A, vous recevrez ensuite quelque chose comme ceci via le webhook entrant :
{
"to": "YOUR_WABA_NUMBER",
"from": "USERS_NUMBER",
"channel": "whatsapp",
"message_uuid": "00000000-0000-0000-0000-000000000000",
"timestamp": "2021-08-10T00:00:00Z",
"message_type": "reply",
"reply": {
"id": "row1",
"title": "Red",
"description": "Take the red pill"
}
}