E-commerce Bot | Part 2 | Welcome Card | Adaptive Cards

In this blog series, we will create an E-commerce bot for one of the Chocolate Store “Naami Chocos”. This bot will have the following functionalities –

Authentication
Add to Cart
Payment Integration
FAQs using QnA Maker
Connect bot to Facebook page

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 Naami Chocos. This is a very simple card with some text blocks and a image.

Find the complete JSON below. Copy the JSON and paste it in the welcomeCard.json (NaamiChocosBot -> 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": "Naami Chocos Bot",
            "wrap": true,
            "color": "Dark",
            "horizontalAlignment": "Center"
        },
        {
            "type": "TextBlock",
            "text": "©[JD Bots](https://jd-bots.com)",
            "wrap": true,
            "horizontalAlignment": "Right",
            "size": "Small",
            "weight": "Bolder",
            "color": "Dark"
        },
        {
            "type": "Image",
            "url": "<Give your image url>",
            "altText": "Naami Chocos Logo"
        },
        {
            "type": "TextBlock",
            "text": "Naami Chocos | Homemade Chocolates and Cakes | We prepare all types of customized chocolates and gift hampers for all types of occasions (Birthday, Wedding, Baby Shower, Engagements, etc) at reasonable rates. We also take bulk orders.",
            "wrap": true
        },
        {
            "type": "TextBlock",
            "text": "This bot will help you place chocolate orders.",
            "wrap": true
        }
    ],
    "actions": [
        {
            "type": "Action.OpenUrl",
            "title": "Visit our Website",
            "url": "https://naamichocos.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.