How to render Carousel in custom module?

Hello,

I want to create a module for the Botpress. This module must render dynamic data as a carousel.
The module must work in this way:

  1. The user types into chat the breed of the cat he likes;
  2. Botpress pass the cat breed to the module;
  3. The module goes to Google images and searches for “cat +breed+”;
  4. The module takes out the first 5 pictures and draws them as a carousel. Each card looks like this: in the place of the picture is an image of a cat. In the signature below is a link to the original image.

Actually, my question is, how to do this? I clearly understand that actions are not suitable for me, since they will not allow me to render a carousel. In fact, actions have access only to the assignment of variables within the key-value storage.

A custom content-type is also not the answer, since I need not only to render, but also to get data for rendering from somewhere.

Perhaps skill will suit me, but I’m not sure.

Do you have ideas on how to organize such a module? I will be very grateful for any ideas. Thank!

Hey @titusjaka !

One solution would be to send a synthetic (fake) event in the outgoing direction (server -> user) which will be interpreted as a Carousel:

    const customEvent = this.bp.IO.Event({
      target: event.target,
      botId: event.botId,
      channel: 'web',
      direction: 'outgoing',  // direction is important here
      payload: {
        type: 'carousel',
        elements: [
          {
            title: 'Cat 1',
            picture: 'https://via.placeholder.com/150',
            buttons: [
              {
                url: 'https://via.placeholder.com/150',
                title: 'Cat 1 Picture'
              }
            ]
          },
          {
            title: 'Cat 2',
            picture: 'https://via.placeholder.com/150',
            buttons: [
              {
                url: 'https://via.placeholder.com/150',
                title: 'Cat 2 Picture'
              }
            ]
          },
        ]
      },
      type: 'text'
    })

    await this.bp.events.sendEvent(customEvent)

You can call bp.events.sendEvent() from within an Action or a Hook, both will work.
You can use axios to make HTTP calls to Google and retrieve the cat images from within your action/hook.

This sample code renders a Carousel like this:

15%20PM

Hope this helps!

1 Like

Thank you very much!
I think it’s the thing I was looking for.