Erste Schritte mit WhatsApp Flows
WhatsApp-Flows machen es Unternehmen leicht, Informationen von ihren Nutzern über Rich-UI-Komponenten in WhatsApp zu sammeln. Dies ist sehr nützlich für Anwendungsfälle wie die Erfassung von neuen Leads, Registrierungen und Kundenfeedback.
Um WhatsApp Flows zu verwenden, sind einige Schritte erforderlich:
- WhatsApp Flow erstellen - Erstellen Sie Ihre WhatsApp Flow-Definition im WhatsApp Manager.
- WhatsApp-Vorlage erstellen - Wenn Sie WhatsApp Flow als geschäftlich initiierte Nachricht verwenden, erstellen Sie eine WhatsApp-Vorlage, die den WhatsApp Flow startet.
- Eine Nachricht über den WhatsApp-Fluss senden - Senden Sie die Nachricht, die den WhatsApp-Flow startet, unter Verwendung der erstellten WhatsApp-Vorlage oder als interaktive Nachricht innerhalb eines bestehenden Gesprächsfensters.
WhatsApp Flow im WhatsApp Manager erstellen
Derzeit können WhatsApp Flows nur innerhalb von WhatsApp-Manager.
Sie können einen neuen WhatsApp-Flow im Menü WhatsApp Manager > Flows erstellen. Sie können auch einen neuen WhatsApp-Flow erstellen, wenn Sie eine neue WhatsApp-Vorlage erstellen.
Im Flow-Editor müssen Sie zunächst einen Namen für Ihren Flow hinzufügen und eine Vorlage für die Art der Informationen auswählen, die Sie sammeln möchten:
Bearbeiten Sie dann das JSON, um eine Beschreibung hinzuzufügen und die Fragen und Antworten zu aktualisieren, die der Benutzer ausfüllen wird, sobald der Fluss gesendet wird:
Siehe die Meta Dokumentation für eine vollständige Liste der Vorlagen und Komponenten, die in der JSON-Datei, die den Ablauf definiert, aktiviert werden können.
Beispiel Fluss und JSON
Ein Beispiel für einen WhatsApp-Flow und seine JSON-Definition finden Sie hier:
 |  |
{
"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": {}
}
]
}
WhatsApp-Vorlage erstellen, um den Fluss zu starten
Um den WhatsApp-Flow als geschäftlich initiierte Nachricht an den Nutzer zu senden, müssen Sie eine WhatsApp-Vorlage mit einer Schaltfläche erstellen, die den Flow startet.
Sie können die Vonage WhatsApp Vorlagenverwaltung API um diese Vorlage zu erstellen.
Ein Beispiel für den Request Payload, der die Vorlage erstellt, finden Sie hier:
{
"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"
}
]
}
]
}
Eine Nachricht über den WhatsApp-Fluss senden
Wenn Sie einen Flow über die Vonage Messages API senden, müssen Sie eine Nachricht des Typs custom. Sie können eine Nachricht entweder mit einer Vorlage, die einen Ablauf enthält, oder in einer Nachricht ohne Vorlage senden, je nachdem, wann und wie die Konversation eingeleitet wurde.
Verwendung einer Vorlage mit einer Bewegung
Um den WhatsApp Flow als geschäftlich initiierte Nachricht zu versenden, müssen Sie zunächst eine WhatsApp-Vorlage erstellen.
Hier ist ein Beispiel für die Nutzlast der Messages API-Anforderung zum Senden der WhatsApp-Vorlage, die den WhatsApp-Flow startet:
{
"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"
}
}
]
}
]
}
}
}
Verwendung einer Nachricht, die eine Bewegung enthält
Während einer bestehenden Unterhaltung (innerhalb des 24-Stunden-Fensters) können Sie den WhatsApp Flow senden, ohne vorher eine Vorlage zu erstellen.
Hier müssen Sie die flow_id des zuvor erstellten Flusses. Dies ist ein Beispiel für eine Anfrage bei Verwendung der Messages API:
{
"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"
}
}
}
}
}
}
WhatsApp Flow Benutzerreaktion
Die vom Benutzer in Ihrem WhatsApp-Flow übermittelten Informationen werden über den konfigurierten Messages API-Webhook an Sie weitergeleitet. Bitte lesen Sie die Dokumentation von Meta über den vollständiges Antwortformat.
Hier ist ein Beispiel:
{
"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 Dokumentation zu Webhooks für eingehende Nachrichten finden Sie unter die API-Referenzunter WhatsApp > Button (Flows).