How to use carousel in botpress X

[samail]

Hi,

We are wondering how to use carousel in channel-web We tried to add a new Type in renderers.js like that :

'carousel-answer': data => ({ carousel: data.elements, typing: data.typing || '2s' }), where elements is an array of object but it does not seem to work.

Would be awesome if you can share how to use it !

thanks in advance for your reply and also for the awesome job done with botpress X

Samy

[slvnperron]

Hey Samy,

Sorry for the lack of documentation and the rough developer experience, we'll be pushing updates quite soon to make all of that smoother.

Here's the official reference for the web channel: https://github.com/botpress/modules/tree/master/channels/botpress-channel-web

Which you can use in a renderer like this:

'#documents': data => {
    return [
      {
        on: 'webchat',
        type: 'carousel',
        typing: '1s',
        text: 'Documents',
        settings: { // Optional customizations
          responsive: [
            { breakpoint: 400, settings: { slidesToShow: 1 } },
            { breakpoint: 600, settings: { slidesToShow: 2 } },
            { breakpoint: 750, settings: { slidesToShow: 3 } },
            { breakpoint: 1000, settings: { slidesToShow: 4 } },
            { breakpoint: 10000, settings: { slidesToShow: 5 } }
          ],
        },
        elements: (data.documents || []).map(doc => ({
          title: doc.name,
          subtitle: doc.preview,
          buttons: [{ url: doc.url, title: 'View document' }]
        }))
      }
    ]
  }

Thanks for trying out Botpress X! Would love to hear feedback on your experience so far at sylvain@botpress.io :)

[samail]

That's great Thanks for the reply We will definitely provide feedbacks and also participate to dev efforts as soon as we can Best