Premiers pas avec WhatsApp Flows
Flux WhatsApp permettent aux entreprises de collecter facilement des informations auprès de leurs utilisateurs grâce à des composants d'interface utilisateur riches dans WhatsApp. Ceci est très utile pour les cas d'utilisation tels que la capture de nouveaux prospects, les inscriptions et les commentaires des clients.
Pour commencer à utiliser WhatsApp Flows, il y a quelques étapes à suivre :
- Créer un flux WhatsApp - Créez votre définition de flux WhatsApp dans le gestionnaire WhatsApp.
- Créer un modèle WhatsApp - Si vous utilisez WhatsApp Flow en tant que message initié par une entreprise, créez un modèle WhatsApp qui démarrera le WhatsApp Flow.
- Envoyer un message à l'aide du flux WhatsApp - Envoyez le message qui lancera le flux WhatsApp en utilisant le modèle WhatsApp créé ou en tant que message interactif dans une fenêtre de conversation existante.
Créer un flux WhatsApp dans le gestionnaire WhatsApp
Actuellement, les flux WhatsApp ne peuvent être créés qu'à l'intérieur de Responsable WhatsApp.
Vous pouvez créer un nouveau flux WhatsApp dans le gestionnaire WhatsApp > menu Flux. Vous pouvez également créer un nouveau flux WhatsApp lors de la création d'un nouveau modèle WhatsApp.
Dans l'éditeur de flux, vous devez d'abord ajouter un nom à votre flux et sélectionner un modèle pour le type d'informations que vous souhaitez collecter :
Ensuite, modifiez le JSON pour ajouter une description et mettre à jour les questions et les réponses que l'utilisateur remplira une fois le flux envoyé :
Voir le Meta la documentation pour une liste complète des modèles et des composants qui peuvent être activés dans le JSON qui définit le flux.
Exemple de flux et de JSON
Un exemple de flux WhatsApp et de sa définition JSON est fourni ici :
 |  |
{
"version": "6.3",
"screens": [
{
"id": "edtech_leadgen_flow",
"layout": {
"type": "SingleColumnLayout",
"children": [
{
"type": "TextHeading",
"text": "Get Your Dream Education Today!"
},
{
"type": "TextBody",
"text": "Discover the best educational opportunities in your area with our expert guidance.\n\nHelp us understand your needs better by answering these 3 questions.\n\nYou will then be assigned to one of our consultants to assist you."
},
{
"type": "Form",
"name": "edtech_leadgen_form",
"children": [
{
"type":"TextInput",
"label": "Full Name",
"name": "fullname",
"required": true
},
{
"type": "RadioButtonsGroup",
"name": "educationlevel",
"label": "Interested education level",
"required": true,
"data-source": [
{
"id": "High School",
"title": "High School"
},
{
"id": "Undergraduate",
"title": "Undergraduate"
},
{
"id": "Graduate",
"title": "Graduate"
},
{
"id": "Other",
"title": "Other"
}
]
},
{
"type": "RadioButtonsGroup",
"name": "whentostart",
"label": "When do you want to start",
"required": true,
"data-source": [
{
"id": "Within 3 months",
"title": "Within 3 months"
},
{
"id": "Within 6 months",
"title": "Within 6 months"
},
{
"id": "More than 6 months later",
"title": "More than 6 months later"
}
]
},
{
"type": "Footer",
"label": "Submit",
"on-click-action": {
"name": "complete",
"payload": {
"fullName": "${form.fullname}",
"educationlevel": "${form.educationlevel}",
"whentostart": "${form.whentostart}"
}
}
}
]
}
]
},
"title": "Vonage Tuition Agency",
"terminal": true,
"success": true,
"data": {}
}
]
}
Créer un modèle WhatsApp pour démarrer le flux
Pour envoyer le flux WhatsApp à l'utilisateur en tant que message initié par l'entreprise, vous devez créer un modèle WhatsApp avec un bouton qui lancera le flux.
Vous pouvez utiliser la fonction API de gestion des modèles WhatsApp pour créer ce modèle.
Un exemple de la charge utile de la demande créant le modèle est fourni ici :
{
"name": "edtech_flow_template",
"language": "en",
"category": "MARKETING",
"allow_category_change": true,
"components": [
{
"type": "HEADER",
"format": "TEXT",
"text": "Get Your Dream Education Today!"
},
{
"type": "BODY",
"text": "Hi {{1}}! Discover the best educational opportunities in your area with our expert guidance. Click the button to chat with our advisors on WhatsApp and take the first step towards your future.",
"example": {
"body_text": "[['John']]"
}
},
{
"type": "BUTTONS",
"buttons": [
{
"type": "FLOW",
"text": "Register Now!",
"flow_id": "XXXX",
"navigate_screen": "edtech_leadgen_flow",
"flow_action": "navigate"
}
]
}
]
}
Envoyer un message à l'aide du flux WhatsApp
Lorsque vous envoyez un flux à l'aide de l'API Messages de Vonage, vous devez envoyer un message de type custom. Vous pouvez envoyer un message à l'aide d'un modèle contenant un flux ou dans un message sans modèle, en fonction du moment et de la manière dont la conversation a été entamée.
Utilisation d'un modèle contenant un flux
Pour envoyer le WhatsApp Flow en tant que message initié par une entreprise, vous devez d'abord créer un modèle WhatsApp.
Voici un exemple de la charge utile de la demande de l'API Messages pour envoyer le modèle WhatsApp qui démarrera le flux WhatsApp :
{
"from": "XXXX",
"to": "XXXX",
"channel": "whatsapp",
"message_type": "custom",
"custom": {
"type": "template",
"template": {
"namespace": "XXXX",
"name": "edtech_flow_template",
"language": {
"policy": "deterministic",
"code": "en"
},
"components": [
{
"type": "body",
"parameters": [
{
"type": "text",
"text": "John"
}
]
},
{
"type": "button",
"sub_type": "flow",
"index": "0",
"parameters": [
{
"type": "action",
"action": {
"flow_token": "1bd0525c-3bbe-4936-b1f2-26dca373b404"
}
}
]
}
]
}
}
}
Utilisation d'un message contenant un flux
Au cours d'une conversation existante (dans la fenêtre de 24 heures), vous pouvez envoyer le WhatsApp Flow sans créer de modèle au préalable.
Ici, vous devrez inclure le fichier flow_id du flux que vous avez créé précédemment. Voici un exemple de demande lors de l'utilisation de l'API Messages :
{
"from": "XXXX",
"to": "XXXX",
"channel": "whatsapp",
"message_type": "custom",
"custom": {
"type": "interactive",
"interactive": {
"type": "flow",
"header": {
"type": "text",
"text": "Get Your Dream Education Today!"
},
"body": {
"text": "Discover the best educational opportunities in your area with our expert guidance."
},
"footer": {
"text": "Vonage Tuition Agency"
},
"action": {
"name": "flow",
"parameters": {
"flow_message_version": "3",
"flow_token": "1bd0525c-3bbe-4936-b1f2-26dca373b404",
"flow_id": "XXXX",
"flow_cta": "Sign Up!",
"flow_action": "navigate",
"flow_action_payload": {
"screen": "edtech_leadgen_flow"
}
}
}
}
}
}
Réponse des utilisateurs de WhatsApp Flow
Les informations soumises par l'utilisateur au sein de votre flux WhatsApp vous seront transmises au niveau du webhook configuré de l'API Messages. Veuillez vous référer à la documentation de Meta sur l'API Messages. format de réponse complet.
En voici un exemple :
{
"to": "XXXX",
"from": "XXXX",
"channel": "whatsapp",
"message_uuid": "f49e93ea-4f59-47a3-a6cd-d1acb6b2f3e8",
"timestamp": "2024-07-16T05:44:19Z",
"message_type": "button",
"button": {
"text": "Sent",
"payload": "{\"fullName\":\"Kok Yew Meng\",\"educationlevel\":\"Undergraduate\",\"whentostart\":\"Within 3 months\",\"flow_token\":\"1bd0525c-3bbe-4936-b1f2-26dca373b404\"}",
"sub_type": "flow"
},
"context_status": "available",
"context": {
"message_from": "XXXX",
"message_uuid": "cccc4ae9-516b-470d-a503-dd5482394050"
},
"profile": {
"name": "Kok Yew Meng"
}
}
Vonage La documentation sur les webhooks de messages entrants est disponible à l'adresse suivante la référence APIsous WhatsApp > Bouton (flux).