Rich Card with Bot Framework SDK V4

Messages exchanged between a user and a bot can contain media such as images, video, etc. The Bot Framework SDK supports the task of sending rich messages to the user.

In this tutorial, you will learn the following.

1. Design Hero Card and Response with Images.
2. Design the Video Card and Response with Video.
3. Build and Publish the Solution.
4. Test your bot with Web Chat Client.

Below are the prerequisites.

1. The bot created in the previous article to help you understand the simple QnA Maker Bot
2. Response card can be designed with different media response, i.e., Image & Video

Let's understand the architecture flow with respect to this article.

Primary bot communicates with the user through message activities.

To send a simple text message, use turn context object SendActivityAsync method to send a single message response. You can use SendActivitiesAsync method to send multiple messages. 

1. await turnContext.SendActivityAsync($"Welcome!");  

To receive a simple text message, use text property of activity object. 

1. var responseMessage = turnContext.Activity.Text;  

Some message activities consist of simple text and others may consist of richer context such as Cards, i.e., Hero Card, Video Card etc. Let’s start designing the cards.

Step 1 - Design Hero Card and Response with Images

Hero card allows you to combine images and buttons in one object, and send them to the user.

To process with rich card i.e. Hero Card, the below properties are required.

Type	Description
Tile	Title of the hero card
Sub Title	Sub Title of the hero card
Text	Text or Description need to display the below image
Images	Image URL which needs to be rendered
Buttons	Button with the click event,  clicking allows the user to navigate

1. public static HeroCard GetHeroCard()  
2. {  
3.     var heroCard = new HeroCard  
4.     {  
5.         Title = "<<Title>>",  
6.         Subtitle = "<<SubTitle>>",  
7.         Text = "<<Secription>>",  
8.         Images = new List<CardImage> { new CardImage("<<Image Path>>") },  
9.         Buttons = new List<CardAction> { new CardAction(ActionTypes.OpenUrl, "Get Started", value: "<<Re-direct Url>>") },  
10.     };  
11.     return heroCard;  
12. }  

QnAMaker Hero Card Response Design

Set Response design with Hero Card values.

Step 2 - Design Video Card and Response with Video

Video Card allow you to play video. Typically it's used to open a URL and stream an available video.

To process with rich card i.e. Video Card, the below properties are required.

Type	Description
Tile	Title of the hero card
Sub Title	Sub Title of the hero card
Text	Text or Description need to display the below image
Images	Image URL which needs to be rendered
Media	URL, i.e., video URL to stream any available video
Buttons	Button with the click event, Onclick allows the user to navigate

1. public static VideoCard GetVideoCard(string[] qnaAnswerData)  
2.         {  
3.             var videoCard = new VideoCard  
4.             {  
5.                 Title = <<”Title”>>,  
6.                 Subtitle = <<”Title”>>,  
7.   
8.                 Text = <<”Title”>>,  
9.                 Image = new ThumbnailUrl  
10.                 {  
11.                     Url = <<”Title”>>,  
12.                 },  
13.                 Media = new List<MediaUrl>  
14.                 {  
15.                     new MediaUrl()  
16.                     {  
17.                         Url = <<”Title”>>,  
18.                     },  
19.                 },  
20.                 Buttons = new List<CardAction>  
21.                 {  
22.                     new CardAction()  
23.                     {  
24.                         Title = "Learn More",  
25.                         Type = ActionTypes.OpenUrl,  
26.                         Value =  <<”Title”>>,  
27.   
28.                     },  
29.                 },  
30.             };  
31.   
32.             return videoCard;  
33.         }  

QnaMaker Video Card Response Design.

Set Response design with Video Card values.

Step 3 - Build and Publish the Solution

Navigate to EchoBot.cs file and add a condition for Hero Card and Video Card response and design.

Replace the AccessQnAMaker code with the below section. It checks the response parameter and design card. If the response has 5 parameters, it calls the Hero Card method. If the response has 6 parameters, it calls Video Card method else replies with simple text. 

1. private async Task AccessQnAMaker(ITurnContext<IMessageActivity> turnContext, CancellationToken cancellationToken)  
2.         {  
3.             var results = await EchoBotQnA.GetAnswersAsync(turnContext);  
4.             string[] qnaAnswerData = results[0].Answer.Split(';');  
5.             int dataSize = qnaAnswerData.Length;  
6.             if (results.Any())  
7.             {  
8.                 var attachments = new List<Attachment>();  
9.                 // Reply to the activity we received with an activity.  
10.                 var reply = MessageFactory.Attachment(attachments);  
11.                 //image card have 5 paramters  
12.                 if (dataSize == 5)  
13.                 {  
14.                     reply.Attachments.Add(Cards.GetHeroCard(qnaAnswerData).ToAttachment());  
15.                     await turnContext.SendActivityAsync(reply, cancellationToken);  
16.                 }  
17.                 //video card have 6 parameter  
18.                 else if (dataSize == 6)  
19.                 {  
20.                     reply.Attachments.Add(Cards.GetVideoCard(qnaAnswerData).ToAttachment());  
21.                     await turnContext.SendActivityAsync(reply, cancellationToken);  
22.                 }  
23.                 else  
24.                 {  
25.                     await turnContext.SendActivityAsync(MessageFactory.Text(results.First().Answer), cancellationToken);  
26.                 }  
27.             }  
28.             else  
29.             {  
30.                 await turnContext.SendActivityAsync(MessageFactory.Text("Sorry, could not find an answer in the Q and A system."), cancellationToken);  
31.             }  
32.         }  

Right-click the solution. Select "Build and publish the solution"with the help of published profile.

Step 4 - Test your bot with Web Chat Client

Navigate to Azure WebApp Bot and select Test in WebChat client.

The previous article can be found from these links.

• Learn and Build Azure Bot With Bot Framework SDK V4
• Build QnAMaker Azure Bot with Bot Framework SDK V4

I hope you have enjoyed and learned something new in this article. Thanks for reading and stay tuned for the next article.