The carousel option can be used to make interactive messages with images, text, subtext, url, and buttons.This option, most commonly, finds its use in advertising and for creating visually appealing menus for the customer.
A Carousel consists of multiple cards, typically arranged next to each other. Each card is a set of information including (typically) an image, a heading, sub-heading and action buttons (one or more) on each card. See some example cards created for a Carousel.
You can access this node in the Add a Node Modal.
2 Carousel Configurations
Source allows you to specify if your Carousel Cards are to be created using a known static data set, or if the dataset (or the cards) changes dynamically during the flow.
The two options available for specifying a source include:
- Static List – Add Individual Cards – as the name suggests, use this option when you have a known specific set of cards to be added. Each card and its details have to be specified specifically while configuring the carousel using this option.
- Dynamic List – Select an Array Attribute – this option allows you to configure a dynamic set of cards. Each card would get its details from one object in an array of objects stored in an attribute. To configure this source –
- Select an Array Attribute to construct the Carousel
- You can use attributes from within the array object to specify Image Source, URL, Heading or Subheading. To refer to fields from the array object use the following notation $ARRAY.<key>$. Here <key> refers to the field name in the object.
- The card details configured to one card will be replicated in each card generated for all the objects in the Array Attribute (upto a maximum of 10).
- If no (or incorrect) data is available in the attribute, the carousel will not be generated.
2.2 Individual Cards of the Carousel
For each card, the below options can be configured.
To enter, an image, simply click on the image area, and “Enter URL” prompt will appear, where you are required to enter the URL of where the image is hosted. Carousel images support JPEG, PNG, and GIF formats. Ideal size for image is 342×256.
If the Card Type (from Theme section) selected is Seamless Card, you would also see an option to configure the background color for the card.
You can also opt to configure a URL that would make the image section clickable and redirect the user to the configured URL.
For every carousel card, you can add a heading for the card. Think of this as a title of the card.
The text in the subheading will appear in a lighter font compared to the heading. Use this to add more details & description to the card
2.2.4 Add Button
This option allows you to add buttons (up to a maximum of three) on your card. Each button would be configured to redirect the user (on click) to
- Node: This option allows the user to add other nodes to the button. You can pair this option with Trigger Path, Send Message, or any other node. You can click on the drop-down menu to select any node that is already present on the path, or save it while it is –Select– and then link it to other nodes from the UI.
- URL: This option allows you to link a URL to a button and once the user clicks on it redirects the user to the URL.
- Contact No: You can enter the contact number, and this will prompt your device to make a phone call on that number. This option finds its use as a calling button directly from your Chatbot.
- Set Attribute: You would be able to set the attribute on the particular button’s click. This would include selecting the type of the attribute as well.
You can either connect it to a node without setting attribute or just set an attribute without connecting to a node. Note : Setting of only one attribute is permitted.
2.3 Overall Theme Styling
Carousel is a very visual construct and MyBOT provides ample configuration options to allow you to make it fit within your vision or theme. This is an optional configuration to change the default look & feel of the carousel cards and can be done from the “Theme Styling” section.
The below options are available for configuration:
2.3.1 Card Type
Card Type is the most important element of the theme. This allows you to pick the basic look & feel of the Carousel. Options include –
- Separate Sections: Each Section within a card, like Header, Sub header etc are displayed in different sections in the bot.
- Seamless Cards: Each Card is one homogenous unit that accommodates the image, header, sub header and even the buttons.
- List Cards: Each card is laid down vertically one below the other in one carousel. This is only supported for the website channel.
2.3.2 Card Layout
You can also select the layout of the card, whether you want all the card displayed together or one card at a time. The available options are:
- Continuous Scroll: In this option, you see multiple cards within the chat widget with an option to scroll through them. Note: This is only available when the card type is Seamless cards or Seperate Sections.
- One at a Time: In this layout one card is presented at a time. User can scroll left or right using the next card button.
2.3.3 Other Styling Options
From the Theme Styling option, you can also configure:
- Width: of each card
- Text Alignment: Could be changed to control the text alignment of the header row configured for the channel.