In this blog series, we will create a ToDo bot that will allow you to Create, View and Delete Tasks.
In this part we will create a welcome card using Adaptive Cards. Welcome card will be shown to the user when 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.
Create Adaptive Card
Build the welcome card in the free Adaptive Cards Designer from Microsoft. It runs in your browser, and you don’t need an account. To learn the designer step by step, read How to Create Adaptive Cards with the Adaptive Cards Designer.
Open the designer and select New card. In the Pick a sample as a starting point dialog, select Empty card.
From the Toolbox on the left, add a TextBlock for the bot’s name, an Image, a second TextBlock for the description and an Action.OpenUrl button. Select each one and set it in the Properties pane: the text, size, weight and alignment of each TextBlock, the image’s URL and alternative text, and the button’s title and URL.
Below is the card I made for ToDo Bot. It’s a simple card with the bot’s name, an image, a line about what the bot does and a Visit JD Bots button.
Find the complete JSON below. Copy it into welcomeCard.json (ToDoBot > Cards > welcomeCard.json), replacing the card that’s already in the file. The designer writes "version": "1.6" into every card it copies or exports. This card uses only TextBlock, Image and Action.OpenUrl, which have been part of Adaptive Cards since version 1.0, so the JSON keeps "version": "1.1".
{
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"size": "ExtraLarge",
"weight": "Bolder",
"text": "ToDo Bot",
"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 Create, View, Delete tasks.",
"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 Visual Studio with Ctrl + F5. The browser opens a page that shows your bot’s address, http://localhost:3978/api/messages:
Open that address in the Bot Framework Emulator. The welcome card appears as soon as the conversation starts:
