Carousel is a touch-enabled Data widget that lets you create highly customizable, stylish responsive carousel sliders within your chatbot. With Carousel, you can create an image carousel using a media gallery or add Title, Description, or buttons (up to 3) to it.
Example:
| ID | Type | Text | Goto |
| 12.1 | Carousel | {“source_var”: “carousel”, “title”: “Title”, “desc”: “Description”, “img_url”: “Image URL”, “button1”: “Button1”, “button1_goto”: “Button1 Goto”, “button2”: “Button2”, “button2_goto”: “Button2 Goto”} | |
| 12.2 | Button | Go Back | 8 |
| 12.3 | Button | Talk to Human | Human |
Carousel works in conjunction with LoadData command, which loads data into a variable that you can then display as a carousel. So the data for Title, Description, Images, and Buttons can be part of data table within your spreadsheet.
Parameters:
- source_var: Defines the variable name from where data needs to be loaded. This variable can be defined using LoadData command within spreadsheet.
- title: Column header name in data table from where title of the widget would be loaded.
- desc: Column header name from where description would load
- img_url: Column header where image URLs exist (should be publicly accessible urls)
- button1: (Optional) If defined, would take up the name of the button
- button1_goto: (Compulsory, if button1 is defined) Lets you route the conversation to appropriate conversation flow (or Human operator). Also supports Phone number, Email Address and URLs.
You can have as many as 3 buttons in a given carousel widget.
Accessing the clicked element:
When a button of a carousel element is clicked, the element gets stored in global variables in the form of an object. The variable can be accessed using vars.GLOBAL.selected_car_elem.