exotic-emerald•3mo ago

Carousel with buttons that set a variable

I'm dynamically creating carousel cards in a function in this way: responseData.forEach( ( object ) => { carousel.cards.push( { imageUrl: 'https://image.thum.io/get/ogImage/noanimate/', title: object.size + ' - Starts at ' + object.price, description: { text: 'Rent To Own Available' }, buttons: [ { "name": "Monthly Prices + Features", "request": { "type": "url-button", "payload": { "label": "Read More", "actions": [ { "type": "open_url", "payload": { "url": "https://google.com" } } ] } } } ] } )
} ) Instead of having an URL button, I want a button that sets a variable with the object (or can be multiple variables with each of the objects properties). Is there any documentation or perhaps a template that shows how this can be done?

1 Reply

Tico | Voiceflow Assistant•3mo ago

You can’t make the Carousel button write straight into a project variable, but you can pass anything you need in the button’s request object, catch that event when the user clicks, and then copy the values into project variables with a normal Set step. 1. Build the cards in your Function:

carousel.cards.push({
  imageUrl: 'https://image.thum.io/get/ogImage/noanimate/',
  title: `${object.size} – Starts at ${object.price}`,
  description: { text: 'Rent To Own Available' },
  buttons: [
    {
      name: 'Select this size',
      request: {
        type: 'select_size',              // any name you like
        payload: {                        // put the data you need
          size: object.size,
          price: object.price,
          id: object.id
        }
      }
    }
  ]
});

carousel.cards.push({
  imageUrl: 'https://image.thum.io/get/ogImage/noanimate/',
  title: `${object.size} – Starts at ${object.price}`,
  description: { text: 'Rent To Own Available' },
  buttons: [
    {
      name: 'Select this size',
      request: {
        type: 'select_size',              // any name you like
        payload: {                        // put the data you need
          size: object.size,
          price: object.price,
          id: object.id
        }
      }
    }
  ]
});

2. Tell the Function how to route when a button is clicked (the next field):

next: {
  listen: true,                 // wait for the click
  defaultTo: 'path-default',    // if user says something else
  to: [
    {                           // when our button is pressed…
      on: { 'event.type': 'select_size' },
      dest: 'path-selected'     // go out this port
    }
  ]
}

next: {
  listen: true,                 // wait for the click
  defaultTo: 'path-default',    // if user says something else
  to: [
    {                           // when our button is pressed…
      on: { 'event.type': 'select_size' },
      dest: 'path-selected'     // go out this port
    }
  ]
}

3. Downstream (path-selected) drop a Set step and copy from the event object that Voiceflow makes available: • size → {event.payload.size} • price → {event.payload.price} • id → {event.payload.id} Result: when the user clicks the button, the assistant moves to path-selected and the Set step writes those values into your variables – no URLs needed. Reference: “choice trace – buttons send a pre-defined request object that you can route on with event.type and read with event.payload.” (https://docs.voiceflow.com)

Carousel with buttons that set a variable

Did you find this page helpful?