Product Search & Recommendations
Build a conversational flow where the avatar helps customers find products by collecting preferences and querying an external product search API.
This guide walks you through building a conversation flow where the virtual being acts as a shopping assistant. It detects the customer's intent to find a product, asks clarifying questions, calls an external product search API, and presents results as interactive cards on the kiosk screen.
User Journey Overview
User: "I'm looking for running shoes"
|
v
[Intent Matcher] ── product-search intent detected
|
v
[Quick Reply / Collect User Data] ── collect preferences (gender, activity, etc.)
|
v
[Call Webhook] ── send query + filters to product search API
|
v
[LLM Response] ── avatar explains the recommendations
|
v
[Custom Action] ── display product cards on kiosk screen
|
v
[Checkpoint] ── wait for user to interact (click card, ask follow-up, or exit)Step 1: Detect Product Search Intent
Set up an Intent Matcher node on the Start node's user-input branch to recognize when a customer wants to find a product.
Configuration:
- Intent name:
product-search - Trigger description: "When the user asks about finding, searching for, looking for, or wanting a product, or describes what they need"
Connect the matched output to the preference collection step. The default (not matched) output should continue to your general conversation flow.
Consider adding separate intents for more-suggestions and product-details to handle follow-up interactions after initial results are shown.
Step 2: Collect User Preferences
Before calling the search API, gather enough information to return relevant results. You can combine structured and natural approaches.
Option A: Structured Collection with Quick Reply
Use Quick Reply nodes to guide the customer through predefined choices:
Quick Reply 1: "Who are you shopping for?"
Options: Men | Women | Kids | Unisex
Save reply as: conv.gender
Quick Reply 2: "What type of activity?"
Options: Road Running | Trail Running | Walking | Gym
Save reply as: conv.activity_typeAdd a Checkpoint with "Wait for user input" between Quick Reply nodes so the flow waits for each selection.
Option B: Natural Language Collection
Use an LLM Response node to ask an open-ended follow-up question, then a Collect User Data node to capture the response:
LLM Response system instruction:
"You are a shopping assistant at a sports store. The customer wants to find a product.
Ask one concise follow-up question to understand their needs better – for example,
who they are shopping for, what activity, and any preferences like color or budget.
Keep it under 2 sentences."
Collect User Data:
Question: (handled by the LLM above)
Store in: conv.search_queryEnable "Skip if value exists" on Collect User Data nodes to avoid asking for preferences the customer already mentioned in their initial message.
Step 3: Call the Product Search API
Use a Call Webhook node to send the collected preferences to your external product search API.
Configuration:
- Method: POST
- URL:
https://your-product-api.example.com/search - Headers:
Content-Type: application/jsonAuthorization: Bearer YOUR_API_KEY
- Request body:
{
"query": "{{conv.search_query}}",
"filters": {
"gender": "{{conv.gender}}",
"activity_type": "{{conv.activity_type}}"
},
"limit": 4
}The webhook response is stored automatically and can be referenced in subsequent nodes.
See API Integration Requirements for the full request/response contract to share with your API provider.
Step 4: Present Results with the Avatar
Add an LLM Response node after the webhook to have the avatar explain the results conversationally.
Configuration:
- System instruction:
You are a friendly shopping assistant at a sports store kiosk. Based on the product
search results provided in the context, briefly present the top recommendations to
the customer. For each product, mention its name, a key feature, and its price.
Keep each description to one sentence. End by saying they can tap a product card
on screen to learn more, or ask you for different suggestions.- Additional context: Inject the webhook response variable so the LLM has the product data to work with.
The avatar will speak this summary aloud while the product cards are displayed simultaneously (next step).
Step 5: Display Product Cards
For dynamic product data from a webhook, use a Custom Action node to send the product data to the kiosk UI for rendering.
Configuration:
- Action name:
display-product-cards - Value: The webhook response variable containing the product array
The kiosk application listens for this Custom Action event and renders product cards using the imageUrl, title, price, and productPageUrl fields from the response.
Cards from Table is designed for static data stored in Data Tables. For dynamic results returned by a webhook, the Custom Action approach gives the kiosk application full control over card rendering and user interaction.
How the kiosk handles the Custom Action:
The kiosk app subscribes to the onSignalAction event and renders cards when it receives the display-product-cards action. Each card should display:
- Product image (from
imageUrl) - Product name and price
- A tap/click action that opens the product page (from
productPageUrl)
Step 6: Handle Card Interactions
When a customer taps a product card on the kiosk screen:
- Open a web view with the product page URL – the kiosk app opens an overlay or embedded browser showing the full product detail page
- Store the selected product as a conversation variable (e.g.,
{{conv.selected_product_id}}) so the avatar can reference it in follow-up questions - Return to conversation – after the customer closes the product view, the flow continues from the Checkpoint
Use a Custom Action from the kiosk app to send the selected product ID back into the conversation.
Step 7: Follow-Up and Refinement Loop
After results are displayed, add a Checkpoint node with "Wait for user input" enabled. The customer can:
- Ask for more suggestions – "Do you have these in blue?" or "Show me something cheaper"
- Ask about a specific product – "Tell me more about the first one"
- Move on – "Thanks, that's all I need"
Connect the Checkpoint output to an Intent Matcher with branches for:
more-suggestions– loop back to Step 3 with adjusted parametersproduct-details– use LLM Response with the selected product data as context- Default – return to your general conversation flow
Building the complete flow:
The full flow connects these nodes in sequence: Start → Intent Matcher → Quick Reply / Collect User Data → Call Webhook → LLM Response + Custom Action → Checkpoint → Intent Matcher (follow-up). The follow-up Intent Matcher loops back to the webhook call for refinement, creating a natural product discovery conversation.