Customer Support Chatbot | Part 2 | Welcome Card | Adaptive Cards

In this blog series, we will create a Customer Support Chatbot that will allow you to track orders, raise complaints, get bills/invoices, and cancel orders.

In the last part, we had set up the development environment. In this part, we will create a welcome card using Adaptive Cards. The welcome card will be shown to the user when a user joins the conversation. It is a best practice to let the user know, what this bot is all about and how can the user interact with it.

Video

Create Adaptive Card

To learn more about creating adaptive cards, check out my blog on creating Adaptive Cards. Let us go to Adaptive Card Designer and create a card for us.

A default card will be shown when you visit the portal.

Delete all the card elements except the title TextBlock, description TextBlock and Action.OpenURL.

This is how it will look like after deleting all the card elements except for above 3.

Change the target version of the adaptive card to support your platform. Currently, the latest version is 1.3 at the time of writing this blog. Some element properties don’t support Bot Framework channels, therefore, make sure you select the suitable version. I will go with version 1.1.

Let’s give a heading by replacing the text “Publish Adaptive Card Schema”. Click on the heading text block, on the right side, element properties will open up. Change the text and other stylings based on your preference.

Go ahead and add some description to it. You can also drag and drop any element into the card and change its properties. Below is the card I made for Customer Support Chatbot. This is a very simple card with some text blocks and an image.

Find the complete JSON below. Copy the JSON and paste it in the welcomeCard.json (CustomerSupportBot-> Cards -> welcomeCard.json). The file will already be having a card created. Replace the code with below. Also, add the image URL.

{
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "TextBlock",
            "size": "ExtraLarge",
            "weight": "Bolder",
            "text": "Customer Support Chatbot",
            "horizontalAlignment": "Center",
            "color": "Dark"
        },
        {
            "type": "Image",
            "url": "https://images.unsplash.com/photo-1485827404703-89b55fcc595e?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8Ym90fGVufDB8fDB8&ixlib=rb-1.2.1&w=1000&q=80",
            "altText": "Bot Image"
        },
        {
            "type": "TextBlock",
            "text": "This Bot will allow you to track orders, raise complaints, get bills/invoices, and cancel orders.",
            "wrap": true
        }
    ],
    "actions": [
        {
            "type": "Action.OpenUrl",
            "title": "Visit JD Bots",
            "url": "https://jd-bots.com"
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.1"
}

Run your bot from the visual studio using Cntrl + F5. Copy the URL (http://localhost:3978/api/messages) and open it in the Bot emulator.