Carousel can be used in the chatbot to display images in the form of a slideshow displaying content which gives an overview of the feature(s) the product offers and use a button to access the same right from the chatbot.
How to use Carousel in Chatbot
Carousel can be added from the EXTENSIONS feature within the flow builder and configured as per our requirement.
Select the feature EXTENSIONS on the flow builder and drag and drop the Add on feature on to the workflow area.
Click on the Add-on for the menu to pop up on the right side of the flow builder which looks like below:
Click on the select icon which opens up an add-on select tab, search for carousel and select from the result, which takes you to the properties tab of the add-on you select. In our case, Carousel.
For the fields title and Image URL in the above carousel properties, we'd need a URL of a carousel, which has a few images within. Within the image URL code, identify the unique identifiers for the image and input the same in the above fields.
Select the ADVANCED tab and drag and drop the code element on to the flow builder which looks something like below where in you need to edit the code which inputs the data into the carousel.
From the above code element, the ctxdata ["hits"] and ctxdata[actionOutput] are the elements where the data is stored and fed to the carousel from. ["data"]["memes"] is the location within the JSon of the URL where the details of the images in the carousel are present.
Click on save.
This is how the carousel should look within a chatbot and we can limit the number of images that has to appear by editing the code block.
The above carousel code does not have any value set so it is displaying all the hundred images but that can be limited by modifying the code in the following way:
Let's say that the carousel has 100 images and you want to display on 0-5 images, the code can block can be edited like ["data"]["memes"] [0:5] so that only the first 5 images will be displayed within the chatbot.