LP•3w ago

Hey all. Can't get a button to open a link in a new tab.

Looking at my chat and trying to get this button that says Book Unit to open the link. It's showing up in the console but won't do anything when clicked. Any ideas? Here's my code carousel = { layout: 'Carousel', cards: [] }; const carouselItems = apiResponse.records; const carouselCard = (Size, Climate_Control, Price, Available_Date, Booking, Image) => ({ title: ${Size}, description: { text: Climate control: ${Climate_Control} Price: ${Price} }, imageUrl: Image, buttons: [ { name: 'Book Unit', request: { type: 'open_url', payload: { actions: [{ type: 'open_url', payload: { url: Booking } }] } } } ] }); carouselItems.forEach(item => { const fields = item.fields; carousel.cards.push(carouselCard( fields.Size, fields.Climate_Control, fields.Price, fields.Available_Date, fields.Booking, fields.Image )); }); carousel = JSON.stringify(carousel);

1 Reply

Tico | Voiceflow Assistant•3w ago

It’s just the shape of the button object – Web-chat is looking for a payload.actions array, not a request field.

const carouselCard = (Size, Climate_Control, Price, Available_Date, Booking, Image) => ({
  title: `${Size}`,
  description: { text: `Climate control: ${Climate_Control}  Price: ${Price}` },
  imageUrl: Image,
  buttons: [
    {
      name: 'Book Unit',            // label visible to the user
      payload: {                    // <-- what the widget reads
        actions: [
          { type: 'open_url', url: Booking }  // opens link in a new tab
        ]
      }
    }
  ]
});

const carouselCard = (Size, Climate_Control, Price, Available_Date, Booking, Image) => ({
  title: `${Size}`,
  description: { text: `Climate control: ${Climate_Control}  Price: ${Price}` },
  imageUrl: Image,
  buttons: [
    {
      name: 'Book Unit',            // label visible to the user
      payload: {                    // <-- what the widget reads
        actions: [
          { type: 'open_url', url: Booking }  // opens link in a new tab
        ]
      }
    }
  ]
});

A full carousel trace then looks like:

const trace = {
  type: 'carousel',
  payload: { cards: carousel.cards }
};

const trace = {
  type: 'carousel',
  payload: { cards: carousel.cards }
};

After switching to the structure above the Book Unit button will fire the open_url action and the link will open in a new browser tab automatically. ref – Trace schema for URL buttons: https://docs.voiceflow.com

Hey all. Can't get a button to open a link in a new tab.

Did you find this page helpful?