How to Receive Carousels from SUSI Skype Bot

A good UI primarily focuses on attracting large numbers of users and any good UI designer aims to achieve user satisfaction with a user-friendly design. In this blog, we will learn how to show carousels SUSI Skype bot to make UI better and easy to use. We can show web search result from SUSI in form of text responses in Skype bot but it doesn’t follow design rule as it is not a good approach to show more text in constricted space. Users seem such a layout as less attractive. In SUSI webchat, RSS type response is returned as carousels and is viewable as:

We can implement RSS type response with code given below

for (var i = 0; i < metadata.count; i++) {
        msg = "";
        msg = text to be sent here;
        session.say(msg, msg);
}

If we implement RSS response using this code then we get a very constricted response because of more text. You can see it in the screenshot below:


To make RSS type response better we will implement carousels. Carousels are actually horizontal tiles to show rich content. We will use this code:

          
for (var i = 0; i < 4; i++) {               
    msg = "text here";               
    title  = "title here";               
    cards[i] = new builder.HeroCard(session)                   
         .title(title)
         .text(msg)           
}           
var reply = new builder.Message(session)
.attachmentLayout(builder.AttachmentLayout.carousel)                                        .attachments(cards);           
session.send(reply);

In above code, we are using a hero card which is a rich card containing title and message which are then attached as an attachment to the message. After implementing carousels for RSS response it looks like this

Resources

Bot Builder SDK documentation: https://docs.botframework.com/en-us/node/builder/chat-reference/modules/_botbuilder_d_.html
Rich Card examples: https://github.com/Microsoft/BotBuilder-Samples/blob/master/Node/cards-RichCards/app.js