yv•3mo ago

Hi, do you guys know when it will be possible to add buttons and carousels to Agents ?

1 Reply

Good news – you can already show Buttons, Cards and Carousels inside a Voiceflow Agent today. How to do it 1. Card / Carousel step (no-code) • In the Creator canvas, drag in a Card or Carousel step. • Populate the title, description, image and add any buttons you need (each button can route to another path in your diagram). • When the Agent runs through that step, Webchat, Prototype and Test Tool will automatically render the rich message. 2. Custom Action step (code-first / dynamic) • If you need to build a carousel from data returned by an API, place a Custom Action step after your fetch or function. • In the step’s code return a cardV2, carousel, or choice trace (example below). Voiceflow’s clients will turn the trace into clickable UI elements.

   export default async function main(args) {
     const products = JSON.parse(args.inputVars.products) // [{title, img, url}]
     const cards = products.map(p => ({
       imageUrl: p.img,
       title: p.title,
       description: { text: 'Click to view' },
       buttons: [{
         name: 'Open',
         payload: { actions:[{ type: 'open_url', url: p.url }] }
       }]
     }));
     return {
       trace: [{ type: 'carousel', payload: { cards } }],
       next: { path: 'next' }
     };
   }

   export default async function main(args) {
     const products = JSON.parse(args.inputVars.products) // [{title, img, url}]
     const cards = products.map(p => ({
       imageUrl: p.img,
       title: p.title,
       description: { text: 'Click to view' },
       buttons: [{
         name: 'Open',
         payload: { actions:[{ type: 'open_url', url: p.url }] }
       }]
     }));
     return {
       trace: [{ type: 'carousel', payload: { cards } }],
       next: { path: 'next' }
     };
   }

• You can also return a choice trace if you only need stand-alone buttons. Where it shows up – Voiceflow Prototype/Test Tool – Web Chat (react-chat library) Docs Custom Action step (rendering buttons, cards & carousels): https://developer.voiceflow.com/v2.0/docs/custom-action-step Choice / Card / Carousel traces: https://developer.voiceflow.com/v2.0/docs/trace-types So you don’t need to wait for a future release – the feature is already available via the Card, Carousel and Custom Action steps.

Hi, do you guys know when it will be possible to add buttons and carousels to Agents ?

Did you find this page helpful?