Suggesto•5h ago

Talk caroussel or card

Hi everyone, I have an assistant connected to a webhook (via n8n) that returns different types of responses depending on the question: Simple text (e.g., explanation → just Markdown/text) Card (e.g., product presentation → title + description + image + button/link) Carousel (e.g., recommendation of several products → several cards in a slider) Everything arrives in the same flow and exits via the same webhook. How can I dynamically detect which format to display (text, card, or carousel) in Voiceflow and automatically display the correct component? Do I need to use a Choice/Switch to route to a Text/Card/Carousel block, or can I manage it directly via a Custom Action that builds the trace (type: "text" | "cardV2" | "carousel")? Thanks for your feedback, I'm a bit stuck on this 🙏

2 Replies

Tico | Voiceflow Assistant•5h ago

You have two clean ways to do it – pick the one that feels simpler for your team. 1️⃣ Branch inside the flow (Switch / Choice) • Have your webhook store a flag in a variable, e.g. response_type.
• Drop a Switch step right after the webhook and test response_type → “text”, “card”, “carousel”.
• Each branch points to a normal Text, Card or Carousel step.
✔️ Pros: uses only no-code steps, easy for designers to tweak.
✖️ Cons: you need three separate branches and the assistant still waits for those extra steps to run. 2️⃣ Let the webhook build the trace (Custom Action) • Replace the Switch with a Custom Action step.
• Set the Action Body Format to JSON.
• From n8n return one of the trace objects that Voiceflow already understands:

// text
{ "type": "text", "payload": { "message": "Here is a simple answer" } }

// card
{ "type": "cardV2", "payload": {
  "title": "Product name",
  "description": { "text": "Short copy" },
  "imageUrl": "https://…/img.png",
  "buttons": [{ "name": "Buy", "request": { "type": "open_url", "payload": { "actions": [{"type":"open_url","url":"https://…"}] } } }]
}}

// carousel (array of cards)
{ "type": "carousel", "payload": { "cards": [ /* …same card objects… */ ] } }

// text
{ "type": "text", "payload": { "message": "Here is a simple answer" } }

// card
{ "type": "cardV2", "payload": {
  "title": "Product name",
  "description": { "text": "Short copy" },
  "imageUrl": "https://…/img.png",
  "buttons": [{ "name": "Buy", "request": { "type": "open_url", "payload": { "actions": [{"type":"open_url","url":"https://…"}] } } }]
}}

// carousel (array of cards)
{ "type": "carousel", "payload": { "cards": [ /* …same card objects… */ ] } }

Voiceflow’s Web Chat/Test tool sees the type field and renders the right component automatically, so you only need the single Custom Action path. ✔️ Pros: one path, no extra logic in the flow, perfect when the API decides what to show.
✖️ Cons: you have to build the JSON exactly as described in the Trace Types docs. Most teams choose option #2 when the back-end already knows the format, and option #1 when the decision should stay visible inside the canvas. Docs for the trace schemas (cardV2, carousel, text) if you need the exact fields: https://docs.voiceflow.com (section “Trace Types”). Hope that unblocks you 🙌

Voiceflow

Welcome to Voiceflow's docs

Build, manage, and deliver chat and voice agents for customer support and beyond.

SuggestoOP•5h ago

Donc après mon bloc api je met directement un choice je met pas de bloc function ?

Talk caroussel or card

Did you find this page helpful?