Add RichCard (Image or Video) to Chat bot Response

Introduction

The Azure Bot Framework supports different types of rich cards and provides a richer interaction experience to the users in term of text, image, video etc.
In this article, I will show how to exchange a message between user and bot can contain one or more rich cards rendered as an image, video.

My Previous article can be find here

I have explained about Bot framework environment setup & QnA configuration in the below articles -
1. FAQ based Bot Application Using QnA Maker - Part One
2. Setup Bot Framework Development Environment Using .Net (C#) - Part Two
3. How to add or remove synonyms or alternative keywords to QnAMaker 




Add or Remove Synonyms or Alternative keywords to QnAMaker service

How to Add / Remove the synonymous or alternative keywords to QnAMaker Services.


My Previous article can be find here
I have explained about Bot framework environment setup & QnA configuration in the below articles

1. FAQ based Bot Application Using QnA Maker - Part One
2. Setup Bot Framework Development Environment Using .Net (C#) - Part Two




Setup Bot Framework Development Environment Using .Net (C#) - Part Two

Part one :- FAQ based Bot Application Using QnA Maker - Part One

I have explained how to build FAQ based bot application using QnA maker for questions and answers. In this article, we will discuss about how setup Bot Framework development environment and we are going to consume QnA maker service.

This article will walk you through “How to Setup a Bot Framework development environment using .Net (C#)” and test the bot application using Bot Framework Emulator.

Prerequisites

Install Visual Studio 2017 for windows
Update all extensions with latest versions
Download Bot Application (.zip) file

Navigate and place the Bot Application.zip template to below path

%USERPROFILE%\Documents\Visual Studio 2017\Templates\ProjectTemplates\Visual C#\

Download Bot Controller (.zip) file and Download Bot Dialog.zip file

Navigate and place the Bot Controller.zip and Bot Dialog.zip template to below path

%USERPROFILE%\Documents\Visual Studio 2017\Templates\ItemTemplates\Visual C#\

Launch the Visual Studio

Once you launch the Visual Studio 2017 and navigate to file -> new project -> You can get Bot Framework Template under Visual C# Template



You can create a bot application using Visual Studio Bot Application template or Download the Bot Application solution created by Azure Portal using Bot Framework SDK. In previous article, I have created the bot application in azure portal. I am going to download and update the solution. 

Step to get the Microsoft Azure Bot Application Solution

1. Login to Azure Portal i.e. https://portal.azure.com and search for created bot name (my bot name is bot2018).

2. Select Web App Bot and you will navigate Web App Bot detail page.


3. Select Build under Bot Management

  • Online Code Editor Option open the codebase into visual studio online.
  • Download the source code using Download Zip file option.

Select second option i.e. Download 


4. Once you download the solution. Unzip the source code. Launch the Visual Studio 2017.

5. File -> Open Project -> Select the solution.

6. Expand the Reference Section -> All DLL or Packages link will be in broken mode and need to update with latest version and packages.



7. Right Click the project and Select Manage NuGet Packages and wait for couple of seconds.

NuGet Package Manager will show the available updates. Select all packages and click Update.

8. Update Microsoft.Net.Compliers V2.6.1 to V1.2.1 

9. Add Key and Value under App Setting in Web.Config file.

AzureWebJobsStorage,  QnASubscriptionKey, QnAKnowledgebaseId. These values can be get from Azure Bot Application App Service Settings. 
  1. <add key="AzureWebJobsStorage" value="DefaultEndpointsProtocol=https;AccountName=bot2018019ada;AccountKey=TPainlj4hGSND3IjYuyP5234m5;"/>  
  2. <add key="QnASubscriptionKey" value="2b523241d6b4a5c105a6e0ad7e"/>  
  3. <add key="QnAKnowledgebaseId" value="453c2a2d-b423-4816-8544-130edf0f593"/>  
2. Navigate to Project -> Dialog folder -> Basic QnADialog.cs file. Replace below section two places using find and replace.

  1. Replace -> Utils.GetAppSetting("QnAKnowledgebaseId") with ConfigurationManager.AppSettings["QnAKnowledgebaseId"];
  2. Replace -> Utils.GetAppSetting("QnASubscriptionKey") with ConfigurationManager.AppSettings["QnASubscriptionKey"]; 

3. Press F5 or Run the solution. VS solution execute in the localhost with port number.




Test your Bot Framework locally

Download Bot Framework Emulator and install the executable.


Open installed Bot Emulator. Select ellipse and click the App Settings


Download ngrok and add the reference to app settings in Bot Framework Emulator and click save.

Response by Emulator 

You can start asking the question as crawled by QnA Maker and you will prompt with response




Publish and test visual studio solution in the azure platform  

1. Navigate to Azure Bot App Services and click Get Publish Profile.



2. Select Visual Studio Project -> Right Click -> Publish option.




3. Select “Create new profile”


4. Select Import file and click publish.


5. Solution success and publish at the Azure Bot website url.

6. Test the bot framework in the azure portal.

Navigate to Azure Web App Bot and Select Test in Web Client under Bot Management section. You can start asking the question as crawled by QnA Maker and you will prompt with response.



Note
I recorded the complete article available at my youtube channel.



FAQ based Bot Application Using QnA Maker - Part One

What is Microsoft Azure Bot Framework?
Microsoft Azure Bot framework enables the organization to build virtual agents known as Bots.
Bots let users interact with intelligent solutions as though they are conversing with another person and assist end users and business users. Bot Connector let you connect your bot seamlessly to social channels such as Twitter, Slack, Facebook and other services. Even connect with web application using Iframe.

What is QnA Maker?
QnAMaker distills information into conversational, easy-to-navigate answers. QnA Maker is based on cognitive service and NLP. QnA Maker is a free, easy-to-use, REST API and web-based service that trains AI to respond to user's questions in a more natural, conversational way.
Question and Answer uses FAQ content in Word, PDF, Excel and Web.



  
Let us get started with configuration.
1. Login to the QnA Maker Service via https://qnamaker.ai
2. Sign and login with your Microsoft account.
Follow below steps to create QnA Maker Services
1. Click a Create New Service.
2. Give the service name (i.e. FAQKB).
3. Give FAQ site URL or upload the excel, doc or pdf with question and answer .




4. Click on create.

5. It takes a couple of seconds and redirects to a knowledge based page.





6. Click Test to verify the QnA Maker




7. Click Save and retrain -> Publish knowledge base 





8. Click Publish one more time and you will re-direct to Rest End point page. Here you can find two important things,

1. QnAMaker Service ID
2. QnAMaker Service Subscription Key



  
Integrate the QnAMaker with Bot Application
Navigate to Azure Portal i.e. https://portal.azure.com with your Microsoft Account or Subscription account,
1. Click New -> AI + Cognitive Service -> Web App Bot




2. Set all fields




3. Search your bot with name and click to open. Select Application setting under APP SERVICE SETTING.

4. Provide the QnAMaker Service ID and QnAMaker Service Subscription Key in QnAKnowledgebaseId and QnASubscriptionKey respectively.

  
5. Done with Bot Application. To test -> click Test in Web Chat and start typing the question and get answer as provided by QnAMaker crawler. 


6. Last Section, Integrate bot application with multiple channels or use Iframe in web applications 




7. Click on Edit or Get bot embed codes.

8. Select the embed code (i.e. Iframe and replace your secret keys with Secret Keys) 




Note
I recorded the complete article available at my youtube channel.






Happy Learning !!