continuing-cyan•2mo ago
Help with Dynamic Carousel
Is anyone here experienced in building a dynamic property carousel that responds to user input?
I'm working on a dynamic property carousel for real estate agents, where property listings are displayed based on users’ answers to a few questions.
So far, I’ve successfully integrated GET and POST requests with Airtable to send and retrieve property data. Now, I want to display matching properties inside a Voiceflow chatbot.
Here’s what I’m aiming for:
The carousel should appear after the user responds to certain prompts.
Budget-based logic:
If user says “more than 1 million”, show properties above $1M.
If they say “around 1 million”, show properties between $800K and $1.2M.
If they say “less than 1 million”, show properties below $1M.
If they say “between 1 million to 2 million”, show properties in that exact range.
Bedroom filter logic:
Follows the same conditional structure as budget.
I also want it to be able to book meetings with click of button and view details
6 Replies
national-gold•2mo ago
I think you will need to have a message block and let user speak ,
capture last utterance, check if it matchs to "more than 1 million" any of these or similar ( can do it with js or prompt ) then find he words like 1 million from message and loop back to carousal add the filter value got from message in its inputVars( that will be present from but will be empty )
And now filtered carousal will be shown
ratty-blush•2mo ago
I just completed a smiliar project which uses the new agent step. The only disappointment I had was, The New Agent stepp didn't accept custom event for card/Carousel button . It forces the button to open a url and this takes user away from chat flow. I am hoping to get a work around.
I actually pushed my Property data into Table Upload. and pull user question the result from Knowledge base
national-gold•2mo ago
Instead of open url use something else ,
any custom action and do what ever you want to do in that .
https://www.voiceflow.com/templates/shopify-dynamic-carousel
This uses custom action check out.
You just need to make an path named checkout and attach it to anything else like some js some text or what or even can loop back to carousal.
ratty-blush•2mo ago
In my experience, VF baked in how the button created by Agents is templated. It seems it must use "open url" and path is not working. It tried may prompt even with example provide to Agent. So for now forced my cards and carousels NOT to use buttons, The Agent listens to intent after cards/carousel is displayed
continuing-cyanOP•2mo ago
I am losing my mind building this Agent the way I want.....
is there anything
in the API step in the capture part you can do things like chunks.response.metadata[0].images or chunks.response.metadata[1].images and then put those things into variables and then put the variables into cards.
the metadata should be in your chunks within the knowledge base. Voiceflow did a great tutorial for table uploading from the API reference tab in the docs. Great way to get the metadata in the chunks. Plus great use of airtable elements! https://www.youtube.com/watch?v=ez0Gr2L58sE&t=286s
the metadata should be in your chunks within the knowledge base. Voiceflow did a great tutorial for table uploading from the API reference tab in the docs. Great way to get the metadata in the chunks. Plus great use of airtable elements! https://www.youtube.com/watch?v=ez0Gr2L58sE&t=286s