Enriching User Interactions with Carousel Content

July 04, 2017 ItamarM RSS Feed

While the chat nature of conversational user interfaces are simple for humans to interact with, this simplicity can also limit the usage scope. Enter carousel content, which enables you to blend rich visualization and complex interactions without overwhelming the user.

The Viber platform provides great elements to help you engage with your user. Probably the most popular one right now is the carousel content with the horizontal scroll. Read about some interesting examples of chatbots who use this combination of images, titles and buttons in very creative ways. And some more:

By taking a little bit of time to understand user intent and context, you can create a process that effortlessly jumps forward and backwards by multiple steps at a time, for little overhead.

Since developers can focus on the experience and not just infrastructure building, leveraging mini interactions that are part of the messaging experience will become standard. We’re seeing this trend in conversational commerce, where brands lead the way by refusing to reply simply with text, and instead designing rich experiences their clients can interact with directly.

We can see unlimited opportunities to create bite size interactions such as photo carousels, mini games, inventory items and more.

Generic Carousel template

We at Viber strongly support a graphical UI and text-based approach. As a part of this thought process, we’ve created the following generic template (NodeJS). It allows you to send a horizontal scrollable carousel of items, each composed of an image, title, subtitle and a call to action and buttons to request input from the user.

 The following NodeJS module will facilitate the creation of the carousel template:

For example in the following segment we create a two card item carousel and send it back to the user:

const CarouselContentGenerator = require('./carousel_content_generator');

let carouselBuilder = new CarouselContentGenerator('#FFFFFF');
carouselBuilder.addElement('Card title 1', 'Card Subtitle 1', 'https://github.com/devrelv/icons/blob/master/bot_head.png','Call to action 1', 'action body 1', true);

carouselBuilder.addElement('Card title 2', 'Card Subtitle 2', 'https://github.com/devrelv/icons/blob/master/gifts.png','Call to action 2', 'action body 2', true);

response.send(new RichMedia(carouselBuilder.build()));

Next steps

Your bot can interact more naturally by adding a carousel user interface into your chatbot. Feel free to customize our Generic Carousel Template module for your needs.