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.
I hope you have enjoyed and learned something new in this article. Thanks for reading and stay tuned for the next article.

1 comment:

  1. May be not related to this post. Does Adaptive cards have the same features.. and adaptive cards are not working well with web chat.. is it the same scenario with hero cards..

    ReplyDelete