xenial-black•3mo ago
Agent Step - How to use cards
How do I get Agent step to show Cards or Carousel.
https://docs.voiceflow.com/docs/agents#buttons
The Help link reference did not explain anything about this new features
2 Replies
At the moment the Agent step itself can only return two UI elements automatically:
• plain text
• optional Buttons (returned as a choice trace – the section you saw in the docs).
Cards and Carousels are not generated directly from the Agent UI tab yet.
If you want your agent to show visual cards you have two options: 1️⃣ Add a visual step after the Agent • Let the agent detect the user’s intent (or a specific knowledge-base match).
• From that intent path drag to a Card or Carousel step and build your visuals there (image, title, description, buttons, etc.).
• When the agent routes down that path the card/carousel trace is emitted and the Web Chat renders it for the user. 2️⃣ Return a card/carousel trace from a Function or Custom Action • Inside a Function or Custom Action you can programmatically build the JSON trace for
• The Test Tool / Web Chat will render the visual element automatically. Until Voiceflow adds native “Cards” to the Agent’s UI tab, the above two approaches are the supported ways to display visual cards. Helpful docs: Card & Carousel step guide → https://docs.voiceflow.com/docs/card-step-and-carousel-step
Trace format reference → https://docs.voiceflow.com/docs/trace-types#type-cardv2 (If you only need quick-reply style options, continue using the Buttons field in the Agent UI.)
If you want your agent to show visual cards you have two options: 1️⃣ Add a visual step after the Agent • Let the agent detect the user’s intent (or a specific knowledge-base match).
• From that intent path drag to a Card or Carousel step and build your visuals there (image, title, description, buttons, etc.).
• When the agent routes down that path the card/carousel trace is emitted and the Web Chat renders it for the user. 2️⃣ Return a card/carousel trace from a Function or Custom Action • Inside a Function or Custom Action you can programmatically build the JSON trace for
type:"cardV2" or type:"carousel" and return it.• The Test Tool / Web Chat will render the visual element automatically. Until Voiceflow adds native “Cards” to the Agent’s UI tab, the above two approaches are the supported ways to display visual cards. Helpful docs: Card & Carousel step guide → https://docs.voiceflow.com/docs/card-step-and-carousel-step
Trace format reference → https://docs.voiceflow.com/docs/trace-types#type-cardv2 (If you only need quick-reply style options, continue using the Buttons field in the Agent UI.)
xenial-blackOP•3mo ago
In my workflow, the Agent searches Knowledgebase Upload Table Data to get response user question. Presents the response options to user to select. Then trigger a function to display card but the cards not show properly