What are WhatsApp Flows?
WhatsApp flows builder can help to generate leads, take feedback, collect event registrations, recommend products, get new sales leads, or anything else where structured communication is more natural or comfortable for your customers, as compared to 2-way chats.
WhatsApp flow Examples:
• Flow to collect interest for deals
• Flow to collect details for Insurance coverage
Types of WhatsApp Flows
There are 2 types of flows on WhatsApp:
1. WhatsApp Flows without data exchange
– These are static flows, where you have a set of same questions common to every recipient.
2. WhatsApp Flows with data exchange
– These are dynamic flows, where you might want to ask different questions to different users (or give personalised options to select from), based on their identity / based on earlier answers they have given in the flow. These flows on WhatsApp require you to create an API endpoint that returns dynamic data for every user, at various points of the flow. WhatsApp will call this API whenever a user is going through your flow.
Flows without data exchange are much quicker to build since there is no code-writing required at your end, as compared to flows with data exchange. However, flows with data exchange provide a lot more flexibility to create personalized flows.
How to send WhatsApp Flows
These are the steps involved:
1. Build WhatsApp Flows in your Facebook Business Manager
2. Create a Template with WhatsApp Flows from your Interakt account
3. Send the Template with WhatsApp flows:
a. Via Interakt Onetime / Ongoing campaign
b. Via Interakt Public APIs
4. Get the Flow responses:
a. Via Campaign Report (if the Template with flow was sent via Interakt Onetime/Ongoing campaign)
b. Via webhooks (can be used irrespective of whether the flow was sent via Interakt Campaigns or APIs) – Coming Soon
c. See the responses in the Interakt Inbox.
How to create WhatsApp Flows
Flow without data exchange:
https://developers.facebook.com/blog/post/2024/02/14/building-a-simple-whats-app-flow/
(Note: There are 2 ways to configure flows on WhatsApp without data exchange in the WhatsApp Manager of your Facebook Business Manager account):
1. Flows Builder —
a. This is the primary area where you can edit your Flow JSON inside a code editor. The WhatsApp Flows Builder is best suited to users wanting a hands-on, customizable approach to Flow creation.
b. If you can’t create a JSON for the flow, you can simply use the visual builder in this Playground to create the flow, then copy the JSON & paste it in the Flows Builder.
c. To access Flows Builder, go to business.facebook.com/settings → click on WhatsApp Accounts on the left → select your WhatsApp Business A/c → click on ‘Settings’ on the right → scroll down and click on ‘WhatsApp Manager’ → in the left, click on ‘Flows’ under ‘Account Tools’ → then, click on ‘Create Flow’
i. If you have the JSON already from the Playground, just paste the JSON there
ii. After having created the flow, make sure you click on the 3 dot menu on the top right and click on Publish.
iii. Next, copy the Flow Id so that you can paste the same in Interakt & attach the flow to a template (explained in the next section).
2. Within Message Templates creation (in WhatsApp Manager) —
This feature lets you build Flows as part of the Message Templates creation process in your WhatsApp Manager itself (you’ll just need to sync the template into Interakt).
Note: The 2nd way might not be available in your WhatsApp Manager currently; in which case, please continue with the 1st approach.
Flows with data exchange:
Booking Appointments with WhatsApp Flows: Creating a Node.js Back End
Create a WhatsApp Flow Template with an attached WhatsApp Flows
To create a template with flow, in Interakt:
• Choose Button Type as ‘WhatsApp Flow’
• Copy paste the Flow ID of the flow that you created in WhatsApp Manager (in your Facebook Business Manager a/c), and, also specify what should happen when the flow is opened by the recipient:
○ Navigate to a particular screen
○ Or initiate data exchange with your endpoint
Send a Template with an attached WhatsApp Flow
1. Via Interakt Campaigns
To send a template with flow via Interakt Campaigns, you can simply select the created template and set the campaign live.
(Note – After selecting a ‘template with flow’, you’ll see 2 optional fields named ‘flow_token’ and ‘flow_data’, which should be used, depending on how your flow is created. Note that ‘flow_data’ only accepts json values).
2. Via Interakt APIs
You can send a template with flow via Interakt’s Send Template API.
– If the flow is created such that it doesn’t require any ‘flow_token’ or ‘flow_action_data’, then use a payload like below. Make sure to include the following key-value pair in the payload → “is_flow_template” : true
(note: The below example is for a template with no header, 1 body variable & a flow button. For your particular template, please modify the payload depending upon the presence of headers / variables etc. Follow the Send Template API documentation here.)
-data
{
"countryCode": "+91",
"phoneNumber": "7003705584",
"callbackData": "some text here",
"type": "Template",
"template": {
"name": "get_feedback_from_customers",
"languageCode": "en",
"bodyValues": [
"body_variable_value_1"
],
"is_flow_template": true,
"buttonPayload": {
"0": [
"flow_token"
],
"1": [
"flow_action_data"
]
},
"buttonValues": {
"0": ["<FLOW_TOKEN_VALUE>"],
"1": ["<ACTION_DATA>"]
}
}
}
– If the flow is created such that it requires ‘flow_token’ / ‘flow_action_data’, then use a payload like below.
-data
{
"countryCode": "+91",
"phoneNumber": "7003705584",
"callbackData": "some text here",
"type": "Template",
"template": {
"name": "<TEMPLATE_NAME>",
"languageCode": "en",
"bodyValues": ["body_variable_value_1"],
"is_flow_template": true,
"buttonPayload": {
"0": [
"flow_token"
],
"1": [
"flow_action_data"
]
},
"buttonValues": {
"0": [
"<FLOW_TOKEN_VALUE>"
],
"1": [
{
"example_key": "example_value",
"hello": "world"
}
]
}
}
}
Imp points to note for WhatsApp flows API payload (where flow_token & flow_action_data are to be sent)
buttonPayload
• Key: Represents the type of data expected.
• Index: The position of the key in the array.
buttonValues
• Value: The actual data corresponding to the keys defined in buttonPayload.
• Index: Must match the index of the corresponding key in buttonPayload.
Example Mapping:
1. “flow_token” (index 0 in buttonPayload) corresponds to <FLOW_TOKEN_VALUE> (index 0 in buttonValues).
2. “flow_action_data” (index 1 in buttonPayload) corresponds to {“example_key”: “example_value”, “hello”: “world”} (index 1 in buttonValues).
Get Data on Flow Responses & Retarget those customers
Via Campaign Details Page
If a ‘template with flow’ has been sent via Interakt Campaigns,
• The number of users who completed the flow would be displayed in the Campaign’s Statistics as shown below.
• Clicking on ‘View user list’ will display the list of all users who replied to the flow. You can click on the ‘Send Notification’ button and send a retargeting campaign to all the users who completed the flow.
• If you want to automate a retargeting notification for users who completed the flow, you can use the ‘Flow Completed’ event as a trigger in an Ongoing Campaign. This event is added for every user who completes a flow.
• To see the exact flow responses sent by customer, you can download the campaign report, by clicking on the button shown below.
Via Webhooks
You can also get alerted about flow responses via webhooks. Subscribe to the following 2 webhooks from your Interakt Account’s Developer Settings, depending upon how you sent the flow template:
• ‘Completed Flow’ status for templates sent via campaigns
• ‘Completed Flow’ status for templates sent via Template Send API
Moreover, ‘incoming customer messages’ webhooks will also contain the flow_response.
Example Webhook Payload of ‘Completed Flow’ webhook for a template sent via Template Send API:
You can also get alerted about flow responses via webhooks. Subscribe to the following 2 webhooks from your Interakt Account’s Developer Settings, depending upon how you sent the flow template:
• ‘Completed Flow’ status for templates sent via campaigns
• ‘Completed Flow’ status for templates sent via Template Send API
Moreover, ‘incoming customer messages’ webhooks will also contain the flow_response.
Example Webhook Payload of ‘Completed Flow’ webhook for a template sent via Template Send API:
{
"version": "1.0",
"timestamp": "2024-09-04T06:35:03.929270",
"type": "message_api_flow_response",
"data": {
"customer": {
"id": "0d00d145-5e18-4c62-881e-918ad1a8de91",
"channel_phone_number": "917003705584",
"phone_number": "7003705584",
"country_code": "+91",
"traits": {
"email": "saandhy.ganeriwala@gmail.com",
"name": "Saandhy",
"whatsapp_opted_in": true
}
},
"message": {
"id": "634d621f-7308-4932-9998-c363063e28e1",
"chat_message_type": "CustomerMessage",
"channel_failure_reason": null,
"message_status": "Sent",
"received_at_utc": "2024-09-04T06:35:03.584000",
"delivered_at_utc": null,
"seen_at_utc": null,
"campaign_id": null,
"is_template_message": false,
"raw_template": null,
"channel_error_code": null,
"message_content_type": "InteractiveFlowReply",
"media_url": null,
"message": {
"type": "nfm_reply",
"nfm_reply": {
"response_json": {
"screen_1_cs_2": "2_★★★☆☆_•_Average_(3/5)",
"screen_0_comment_1": "Awesome services ",
"screen_1_purchase_0": "1_★★★★☆_•_Good_(4/5)",
"screen_1_delivery_1": "0_★★★★★_•_Excellent_(5/5)",
"flow_token": "unused",
"screen_0_recommend_0": "0_Yes"
},
"body": "Sent",
"name": "flow"
}
},
"meta_data": {},
"message_context": {
"from": "917003705584",
"id": "4ce3ff23-b0cf-42d3-80f0-b4929bb4f734"
}
},
"source_template_message": {
"template_name": "collect_feedback_from_customers",
"campaign_id": null,
"callback_data": null,
"status": "Sent",
"is_campaign": false,
"message_type": "PublicApiMessage"
},
"flow_id": 1021093062600086
}
}
In Interakt Shared Team Inbox
Flow responses sent by customers will also be visible in the Interakt Inbox, making it easy for your team to follow up with those customers.
