Rich messages

Now that we know how to serve messages and prompts, let's dig a little deeper to learn how to make it look more visually appealing by adding images and cards. To do this, we will use Hero card. Hero card is a template for presenting information in a rich format using images, URLs, and so on. Here is an example:

 

var bot = new builder.UniversalBot(connector, [    function (session) {        var msg = new builder.Message(session);        msg.attachmentLayout(builder.AttachmentLayout.carousel)        msg.attachments([            new builder.HeroCard(session)                .title("Chennai Kitchen")                .subtitle("Authentic South Indian Restaurant")                .text("Great tasting dosas. 5 star reviews.")                .images([builder.CardImage.create(session,                        'https://images.pexels.com/photos/221143/

Get Hands-On Chatbots and Conversational UI Development now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.