09 – How To Make Your Chatbot Attractive With Carousels | Video Course

How to make your data attractive with carousels

9 - How to display data with carousels

What you will learn?

In previous lessons, you have learned how to use buttons and text to make your chatbot alive and start a real conversation with your users. In this lesson, I’m going to introduce an advanced visual component that will take your users’ experience to the next level: the Carousel Chatbot Card element.

To add a Card, just open up the action dialog, choose “Cards” and click Carousel Template: this action will add a first card that will be contained in a carousel template.

Since it is an interactive element with a rich structure, I suggest deepening its compatibility with the various channels. Not all channels can natively display carousels, so Xenioo will resort to alternate rendering methods if the selected channel does not support them.

How to display a Carousel in your chatbot

The Carousel action itself is pretty easy to configure. As you can see in the image below, there is only one parameter to set and it’s related to the image aspect ratio. This parameter will alter the carousel images aspect ratio from Horizontal (1: 1.91 ratio) to Square (1: 1 ratio).

carousel chatbot

The carousel is the root container for the cards you would like to display. Configuring a card is surely more interesting because is where you have to set up your image and text for your carousel.

In the image below you can see all the parameters that can be configured for a card.

The only mandatory fields are Title (1) and Subtitle (2) which are pretty self-describing.

Web View Height Ratio and Use Messenger Extensions are specific to the Facebook channel.

Web View Height Ratio (3) changes the height of the Web View used to display web content when using a URL Button.
Use Messenger Extensions (4) enables the Facebook Messenger extension feature. When enabled, the Default URL value must be part of the whitelisted domains.

carousel chatbot

Usually, a carousel chatbot is composed of images. Think for example at a carousel that showcases products on sale. In this case, you have to set your image in the Image (6) field.
Image field can be an URL (for example, it could be imgur, a web service with good performances built specifically for hosting images) or can be hosted inside the Xenioo storage. Remember that external image URLs need to be served through HTTPS protocol.
Redirect To Floating Area (8), if enabled and supported by the channel, allows displaying the carousel in an area beside the chat. I suggest evaluating the use of this option in cases where you need to ask users to make choices or consult additional information without moving away or losing sight of the chat area. Currently, only Web Channel supports the floating area option.
Finally, by clicking on Add Button (9), you can add buttons to your card. Buttons are the visual element that will trigger different operations as shown in the image below:

carousel chatbot buttons

There are different types of buttons and, as you will find out, they are pretty self-explanatory.
Below you can see an example of a carousel as displayed in Xenioo preview:
carousel chatbot

List Card Template

List Card Template actions is a standard list card, which will display a list of elements in an ordered list with multiple buttons and images. Similar to the Carousel, this component is not available for all channels, while others only partially support it.
List Card Template is the root container for Card elements.
In the image below you can see how the list card component will display in Xenioo preview.

It is a real shame that supports for this template is so limited by the channels and especially in the mobile environment. I find it very practical and convenient because usually, it allows viewing at least 3 or 4 elements (based on the height of the device) at the same time.

How to provide dynamic chatbot carousels?

In all the previous examples, I’ve used some static content to create the card’s content. This is rarely what happens with real chatbots where information to show to the users depends on changing factors, such as previous choices or answers.
Think for example the menu of a restaurant that changes its dishes every day: it would be a nightmare (although technically possible) to update the carousel containing the daily dishes every day, wouldn’t it?
To accommodate this type of scenario, Xenioo provides an advanced component: Dynamic Carousel Action.
Dynamic Carousel action will display a dynamically generated chatbot carousel based on standard JSON content. JSON content can be retrieved either from a variable or directly from an URL.
You can find the details on how to configure a Dynamic Carousel action as well as the JSON model, on Xenioo online help.

In the image below, the dynamic carousel is getting JSON data from a variable that is created using few lines of javascript (using Cloud Script action).

The final result, as you can see, is similar to what I’ve previously created using the standard Carousel action. But this time, cards have been dynamically created based on a specific source (in this case, the variable containing the JSON model).

Display Dynamic Content

The support for dynamic content does not end with carousels. Xenioo provides another powerful action that you can use to build chatbots having part of the flow fully generated dynamically! Amazing, isn’t it?

Dynamic Content Action is a special action being able to display dynamic chat elements from a standard Xenioo Action Model JSON.

As it was for the dynamic carousel, this JSON model can be retrieved by an URL or directly from a variable.

You can find more details on Dynamic Content action in Xenioo online guide.

To Sum Things Up…

In this lesson, I’ve explored a new form of content representation: the Carousel chatbot. Furthermore, I’ve described how you can use some advanced actions to create very dynamic content.

In the next lesson, I will talk about an upstanding and unique feature for building advanced content with Xenioo: Xenioo Forms.