Use Tab, then Enter to open a result.
Building a WhatsApp Flow recommendation engine changes how you interact with customers. Instead of sending static lists of products, you offer a structured, interactive experience. This system collects user preferences through a native interface and processes that data in real time to suggest the best products.
Standard chatbots often struggle with complex decision trees. Users get lost in long text menus or type incorrect responses. WhatsApp Flows solve this by providing a form-like interface. When a user completes the Flow, your server receives the data, runs your recommendation logic, and sends back a personalized result. This article focuses on the technical path to making that work.
The Problem with Static Chatbot Menus
Most businesses use simple keyword-based bots. A user might type "shoes," and the bot sends ten random pairs. This approach lacks context. To give a good recommendation, you need to know the size, preferred style, and budget of the user.
Collecting this information through text messages is slow. Each question requires a separate message exchange. If the user stops halfway, the session expires. WhatsApp Flows group these questions into a single, cohesive interface. This reduces friction and increases the quality of the data you collect for your recommendation engine.
Prerequisites for Your Integration
To build this system, you need a few technical components ready. Your environment must support secure communication and data processing.
- A WhatsApp Business Account: You need access to the WhatsApp Cloud API to host the Flow and receive webhooks.
- A Publicly Accessible Server: This server will host your webhook endpoint. It needs to handle HTTPS requests.
- Basic Node.js or Python Knowledge: You will write logic to parse JSON payloads and filter your product database.
- A Product Catalog: This can be a JSON file for small tests or a database like PostgreSQL for production use.
If you want to test these features without the strict onboarding process of the Meta Business Suite, you might consider WASenderApi. It allows you to connect a standard WhatsApp account via a QR session to send messages and receive webhooks. Keep in mind that unofficial APIs carry different reliability risks and compliance considerations compared to the official Cloud API.
Step 1: Design the Flow JSON Structure
The heart of your recommendation engine is the Flow definition. This JSON file tells WhatsApp which screens to show and what data to collect. For a product finder, you typically need a landing screen and a questions screen.
{
"version": "3.1",
"screens": [
{
"id": "PRODUCT_PREFERENCES",
"title": "Find Your Match",
"terminal": true,
"data": {},
"layout": {
"children": [
{
"type": "TextHeading",
"text": "Tell us what you like"
},
{
"type": "Dropdown",
"label": "Skin Type",
"name": "skin_type",
"required": true,
"data_source": [
{ "id": "oily", "title": "Oily" },
{ "id": "dry", "title": "Dry" },
{ "id": "combination", "title": "Combination" }
]
},
{
"type": "Footer",
"label": "Get Recommendation",
"on-click-action": {
"name": "complete",
"payload": {
"user_skin_type": "${form.skin_type}"
}
}
}
]
}
}
]
}
In this example, the user selects their skin type. When they click the footer button, the Flow completes. The data is then sent to your webhook URL for processing.
Step 2: Set Up the Webhook Listener
Your server must listen for the flows event. When the user finishes the Flow, WhatsApp sends a POST request. You need to verify the request signature to ensure it came from WhatsApp. This prevents unauthorized users from sending fake data to your engine.
Here is a simple example using Node.js and Express to receive the Flow data:
const express = require('express');
const app = express();
app.use(express.json());
app.post('/whatsapp-webhook', (req, res) => {
const body = req.body;
// Check if this is a Flow completion event
if (body.object === 'whatsapp_business_account') {
body.entry.forEach(entry => {
entry.changes.forEach(change => {
if (change.field === 'flows') {
const flowData = change.value;
processRecommendation(flowData);
}
});
});
res.sendStatus(200);
} else {
res.sendStatus(404);
}
});
function processRecommendation(data) {
const skinType = data.payload.user_skin_type;
console.log(`Processing recommendation for: ${skinType}`);
// Logic for Step 3 goes here
}
app.listen(3000, () => console.log('Server is running on port 3000'));
Step 3: Real-Time Data Processing Logic
Once your server has the user data, it needs to find the right product. This is where the "engine" part happens. You compare the user inputs against your product attributes. For a basic engine, you can use a scoring system.
If the user selects "Dry Skin," you search your database for products tagged with "Moisturizing." If they also selected a high budget, you prioritize premium brands.
const products = [
{ id: 1, name: "Hydra-Glow Mask", type: "dry", price: 45 },
{ id: 2, name: "Oil-Control Serum", type: "oily", price: 30 },
{ id: 3, name: "Balanced Cleanser", type: "combination", price: 25 }
];
function getBestProduct(userPreference) {
return products.find(p => p.type === userPreference);
}
In a real-world scenario, you would query a database like MongoDB or PostgreSQL. You might also use a search engine like Meilisearch if your catalog contains thousands of items. The key is to keep the processing fast. WhatsApp users expect a response within seconds.
Step 4: Delivering the Result via WhatsApp
After finding the product, you must send it back to the user. You use the WhatsApp Cloud API (or your chosen alternative) to send a message. A great way to do this is with an interactive message containing an image, a description, and a button to purchase.
Your recommendation response should include:
- A Validation Message: "Based on your skin type, we recommend..."
- Product Details: Name, price, and benefits.
- A Call to Action: A link to your website or an "Add to Cart" button.
Practical Example: The Footwear Finder
Imagine a shoe retailer. They build a Flow that asks for gender, activity type (running, hiking, walking), and surface type (road, trail).
The Flow collects these three data points. The webhook receives: { gender: 'male', activity: 'running', surface: 'trail' }. The recommendation engine queries the warehouse for trail running shoes for men. It finds the top three items with the highest stock levels and sends them as a carousel to the user.
This specific approach prevents the user from seeing out-of-stock items. It also ensures the recommendation is technically accurate for the intended use of the product.
Handling Edge Cases
Your recommendation engine must handle situations where things go wrong.
- No Matches Found: If your filters are too strict, you might return zero results. Always have a fallback recommendation, such as your best-selling general product.
- Missing Data: If the user skips an optional field in the Flow, your logic must handle null values without crashing. Set default values for your search queries.
- High Latency: If your database is slow, the user might think the bot is broken. Use an asynchronous processing pattern. Acknowledge the Flow completion immediately and send the recommendation as a follow-up message a few seconds later.
Troubleshooting Common Flow Issues
When building this, you will likely encounter these common hurdles:
- Signature Verification Failures: Ensure you use the correct App Secret to verify incoming webhooks. Even a single character mismatch in your configuration will cause 403 Forbidden errors.
- JSON Schema Errors: WhatsApp Flows have strict requirements for the JSON structure. If you miss a required field like
terminal: trueon the final screen, the Flow will fail to open on the user device. - Large Payloads: If your Flow sends too much data back to the webhook, you might hit size limits. Only send the essential IDs or choices rather than long strings of text.
FAQ
Do WhatsApp Flows work on all devices? Flows work on most modern versions of WhatsApp for Android and iOS. On desktop or very old mobile versions, the user will see a fallback message asking them to update their app.
Is there a cost for every Flow sent? WhatsApp typically charges based on the conversation category (Marketing, Utility, or Service). Sending a Flow usually counts as a conversation trigger or part of an ongoing session. Check the current Meta pricing for your specific region.
How many products can I recommend at once? WhatsApp interactive messages allow for a limited number of buttons or list items. Usually, it is best to recommend one primary match and offer a "View More" button that links to a full catalog page on your website.
Can I use a recommendation engine with WASenderApi? Yes. You can use the webhook feature in WASenderApi to receive user responses. Since it uses a standard WhatsApp account, you would build the "Flow" experience using a sequence of interactive messages or a web-based form link instead of the native Meta Flow UI.
How do I secure the data sent from the Flow?
Use HTTPS for your webhook endpoint. WhatsApp encrypts data in transit. You should also validate the X-Hub-Signature header to confirm the payload is authentic.
Next Steps for Your Integration
Now that you understand the structure, start small. Build a Flow with a single question and a simple hard-coded response. Once you verify the webhook is receiving data correctly, connect your real product database.
Focus on the user experience. A recommendation engine is only useful if it saves the user time. Keep your Flow questions short and your suggestions highly relevant. As you gather more data, you can refine your recommendation logic to improve conversion rates over time.