1. Introduction #
Floatchat offers a carousel option that allows you to create interactive messages comprising images, text, subtext, URLs, and buttons.
2. Modes of Carousel #
There are two modes of configuring the carousel:
- Static List
- Dynamic List
1. Static List: In the Static List mode, you specify a predetermined set of cards with their respective details. Each card needs to be configured individually during the carousel setup process.
2. Dynamic List: The Dynamic List mode, on the other hand, enables you to create a dynamic set of cards. The details for each card are retrieved from an array of objects stored in an attribute. You can select an array attribute to construct the carousel and use $ARRAY.<key>$ notation to reference fields from the array object for specifying image source, URL, heading, or subheading. The card configuration for one card will be replicated for all the objects in the array attribute, up to a maximum of 10 cards. If the attribute does not contain any data or if the data is incorrect, the carousel will not be generated.
3. theme styling #
Regarding theme styling, Floatchat offers two options for the card type:
- Separate Sections
- Seamless Card
1. Separate Sections: In Separate Sections, the card is divided into distinct sections with borders, separating the image, title, description, and buttons. Conversely, in Seamless Card, these elements do not have borders, giving the appearance of a single, cohesive card. Additionally, you can choose the List layout, where cards are displayed one below the other in a list format.
For the Card Layout, you have two choices. Continuous Scroll allows you to view multiple cards within the chat widget, providing the option to scroll through them. This option is only available when using Seamless Cards or Separate Sections for the card type. The other layout option is One at a Time, where one card is presented at a time, and users can scroll left or right using the next card button.
To rearrange the carousel cards, you can simply click on the “edit” option and drag the cards as needed.