What's this about?: I'm developing a chatbot using WhatsApp Flow, but it's behaving inconsistently. Sometimes it works as expected, but at other times, it just keeps loading indefinitely without any error message. Below are some of the details:
I am using the latest versions of both WhatsApp Business and the regular WhatsApp app. My internet connection is stable and working well for other services. Any suggestions on how to troubleshoot or solve this issue would be greatly appreciated!
Can you please provide your Flow JSON?
Are you using an Endpoint with your Flow?
No I'm not using endpoint. here's my flow JSON
{
"version": "3.1",
"screens": [
{
"id": "screen_pickup_details",
"title": "Pickup Details",
"data": {},
"layout": {
"type": "SingleColumnLayout",
"children": [
{
"type": "Form",
"name": "flow_path",
"children": [
{
"type": "TextBody",
"text": "Who should we contact at the pickup location?"
},
{
"type": "TextInput",
"label": "Pickup Contact Name",
"name": "pickupContactName",
"required": true,
"input-type": "text",
"helper-text": ""
},
{
"type": "TextInput",
"label": "Pickup Contact Phone",
"name": "pickupContactPhone",
"required": true,
"input-type": "phone"
},
{
"type": "TextArea",
"label": "📍 Pickup Address",
"required": true,
"name": "pickupAddress"
},
{
"type": "TextInput",
"label": "🕕 Pickup Time",
"name": "pickupTime",
"required": true,
"input-type": "text",
"helper-text": "can be \"08:30\" or \"Any Time\""
},
{
"type": "TextInput",
"label": "Special Instructions",
"required": false,
"name": "specialInstructions",
"helper-text": " Any special instructions for handling the item?"
},
{
"type": "Footer",
"label": "Continue",
"on-click-action": {
"name": "navigate",
"next": {
"type": "screen",
"name": "screen_drop_off_details"
},
"payload": {
"pickupContactName": "${form.pickupContactName}",
"pickupContactPhone": "${form.pickupContactPhone}",
"pickupAddress": "${form.pickupAddress}",
"pickupTime": "${form.pickupTime}",
"specialInstructions": "${form.specialInstructions}"
}
}
}
]
}
]
}
},
{
"id": "screen_drop_off_details",
"title": "Drop-off Details",
"data": {
"pickupContactName": {
"type": "string",
"__example__": "Joe"
},
"pickupContactPhone": {
"type": "string",
"__example__": "0775696233"
},
"pickupAddress": {
"type": "string",
"__example__": "1 GDrive, Mutare"
},
"pickupTime": {
"type": "string",
"__example__": "09:55"
},
"specialInstructions": {
"type": "string",
"__example__": "None"
}
},
"layout": {
"type": "SingleColumnLayout",
"children": [
{
"type": "Form",
"name": "flow_path",
"children": [
{
"type": "TextBody",
"text": "Who will receive the item at the delivery location?"
},
{
"type": "TextInput",
"name": "recipientName",
"label": "👤 Recipient Name",
"required": true,
"input-type": "text"
},
{
"type": "TextInput",
"label": "📞 Recipient Phone",
"name": "recipientPhone",
"required": true,
"input-type": "phone"
},
{
"type": "TextArea",
"label": "📍 Delivery Address",
"required": true,
"name": "deliveryAddress"
},
{
"type": "TextInput",
"label": "🕕 Delivery Time",
"name": "deliveryTime",
"required": true,
"input-type": "text"
},
{
"type": "TextInput",
"label": "🏍️ Rider Code",
"name": "riderCode",
"required": false,
"input-type": "text",
"helper-text": " Leave blank if you don't know what this is."
},
{
"type": "Footer",
"label": "Continue",
"on-click-action": {
"name": "navigate",
"next": {
"type": "screen",
"name": "screen_summary"
},
"payload": {
"recipientName": "${form.recipientName}",
"recipientPhone": "${form.recipientPhone}",
"deliveryAddress": "${form.deliveryAddress}",
"deliveryTime": "${form.deliveryTime}",
"riderCode": "${form.riderCode}",
"pickupContactName": "${data.pickupContactName}",
"pickupContactPhone": "${data.pickupContactPhone}",
"pickupAddress": "${data.pickupAddress}",
"pickupTime": "${data.pickupTime}",
"specialInstructions": "${data.specialInstructions}"
}
}
}
]
}
]
}
},
{
"id": "screen_summary",
"title": "Summary",
"data": {
"recipientName": {
"type": "string",
"__example__": "Doe"
},
"recipientPhone": {
"type": "string",
"__example__": "0771234567"
},
"deliveryAddress": {
"type": "string",
"__example__": "11 House 5, Mutare"
},
"deliveryTime": {
"type": "string",
"__example__": "Any Time"
},
"riderCode": {
"type": "string",
"__example__": "EN554123"
},
"pickupContactName": {
"type": "string",
"__example__": "Joe"
},
"pickupContactPhone": {
"type": "string",
"__example__": "077123456"
},
"pickupAddress": {
"type": "string",
"__example__": "1 GDrive, Mutare"
},
"pickupTime": {
"type": "string",
"__example__": "09:55"
},
"specialInstructions": {
"type": "string",
"__example__": "None"
}
},
"terminal": true,
"layout": {
"type": "SingleColumnLayout",
"children": [
{
"type": "Form",
"name": "flow_path",
"children": [
{
"type": "TextSubheading",
"text": "Pick & Deliver Summary"
},
{
"type": "TextCaption",
"text": "Special Instructions"
},
{
"type": "TextBody",
"text": "${data.specialInstructions}",
"font-weight": "bold"
},
{
"type": "TextCaption",
"text": "\n👤 Pickup Contact Name:"
},
{
"type": "TextBody",
"text": "${data.pickupContactName}",
"font-weight": "bold"
},
{
"type": "TextCaption",
"text": "📞 Pickup Contact Phone:"
},
{
"type": "TextBody",
"text": "${data.pickupContactPhone}",
"font-weight": "bold"
},
{
"type": "TextCaption",
"text": "📍 Pickup Address:"
},
{
"type": "TextBody",
"text": "${data.pickupAddress}",
"font-weight": "bold"
},
{
"type": "TextCaption",
"text": "🕕 Pickup Time:"
},
{
"type": "TextBody",
"text": "${data.pickupTime}",
"font-weight": "bold"
},
{
"type": "TextCaption",
"text": "\n\n👤 Recipient Name:"
},
{
"type": "TextBody",
"text": "${data.recipientName}",
"font-weight": "bold"
},
{
"type": "TextCaption",
"text": "📞 Recipient Phone:"
},
{
"type": "TextBody",
"text": "${data.recipientPhone}",
"font-weight": "bold"
},
{
"type": "TextCaption",
"text": "📍 Delivery Address:"
},
{
"type": "TextBody",
"text": "${data.deliveryAddress}",
"font-weight": "bold"
},
{
"type": "TextCaption",
"text": "🕕 Delivery Time:"
},
{
"type": "TextBody",
"text": "${data.deliveryTime}",
"font-weight": "bold"
},
{
"type": "Footer",
"label": "Submit",
"on-click-action": {
"name": "complete",
"payload": {
"recipient_name": "${data.recipientName}",
"recipient_phone": "${data.recipientPhone}",
"delivery_address": "${data.deliveryAddress}",
"delivery_time": "${data.deliveryTime}",
"rider_code": "${data.riderCode}",
"pickup_contact_name": "${data.pickupContactName}",
"pickup_contact_phone": "${data.pickupContactPhone}",
"pickup_address": "${data.pickupAddress}",
"pickup_time": "${data.pickupTime}",
"special_instructions": "${data.specialInstructions}"
}
}
}
]
}
]
}
}
]
}