Build a BOT in quick time to support COVID Scenario and place it with Teams and Your Website!

Overview

This is my 2nd blog about a Chatbot solution to address the world wide problem “CoronaVirus” panademic. As it is now spreading across the world and its really vital to provide all citizens of the countries with up-to-date information. As we know it has come to a level that certain countries are in lockdown mode , more and more people are started to practice social distancing and work from home. As we have seen in the previous blog about the sentiment analysis of employees working form home, in this blog i will explain about how to build a chat bot to provides answers to most of the queries related to health information and latest learning. Chatbot is a platform which can be integrated with Web inteface or any collaboration tools such as MS Teams, Slack or Telegram and it can be operated 24*7 without any downtime.

Prerequisites:

You will need to have an Azure Subscription. If you do not have an Azure subscription you can simply create one with free trial.

How to Build:

If you are new to building Chatbot, it is extremely easy and you can enable access to knowledge base via bot in few minutes.

Step 1: Create the Resource Group

As the first step, we need to create the resource group that contains all the resources needed. Navigate to Azure Portal and create the resource group named “rg-chatbot”

Create Resource Group

Step 2: Create a knowledge base

As the next step, navigate to QnA maker,sign-in with your Microsoft account and then click “Create a knowledge base” option

QnA maker

click “Create a QnA service” button in “Step 1” as shown below;

Create QnA service

You will be re-directed to Azure portal. Fill in the template form, and make sure to set pricing tier for “QnA Maker service” to F0, and for the supporting Azure Search service to F, if you want to host your Bot components for free. Then click “Create” button;

Create QnA service

As you could see in the portal Deployment of the relevant resources in your target resource group. If successful, you should get notification as resources deployed. As you will see the following resources under the particular resource group

Resources in QnA

Click on the App Service Plan you created

Note : By Default when you create, App Service Plan for the website is set to S1 pricing tier. You need to change it to the F1 tier if you don’t want to have much cost incur on your subscription. You can do this by navigating to Scale Up(App Service Plan) and then select Dev/Test tab and select F1 and Apply.

Change the AppService plan

Step 3 : Connect your QnA service to your KB.

Navigate to the QnA maker again and click ‘Refresh” button in “Step 2”

Click on Refresh and select the bot we created

Give a meaningful name to your Knowledge Base (KB)

Name your KB

Step 4 : Populate Knowledge base from different sources

You can specify different sources to feed your knowledge base. It can be populated uploaded from files (e.g., in PDF, MS Word, MS Excel, etc. formats) or typed manually or from Web sites (containing FAQ). For this example, we will be using the recommended standard Knowledge base with Covid-19 FAQs from the  Centers for Disease Control and Prevention and World Health Organisation Web sites.

Knowledge Base Sources

Also in the next step chit-chat” section you may choose “personality” for your bot, so that it can answer some additional small talk questions. This option will enrich the knowledge base with additional question/answer details, so you bot may respond to various greetings.

Populate KB

Now you can create your KB with a simple button click to setup your knowledge base and populate it with the data from the different configured sources.

Select the way it should answer small-talk questions

Once it successfuly created, you will see a window as follows,

Create the knowledge base

Step 5: Test bot’s knowledge base

It’s time to test bot’ts knowledge base , by clicking -> Test button, then type a question and enter,

Test Knowledge base

If you are happy with bot’s responses, just go ahead and click “Save and train”, then switch to “Publish ” tab and publish the Knowledge base

Publish the Knowledge base

Step 6: Create Bot

Once it got successfully published, you can click on Create Bot as follows,

Create Bot

You will be re-directed to Azure portal where you can set the pricing tier of your Azure Bot Service to F0 (free one) , and you can pick SDK language as the one you are familiar with (either C# or Node) and the click “Create” button;

Create Web Bot

You can obtain the QnA authKey by clicking on it and from the deployment details,

Obtaining AuthKey

Once we filled everything, just hit Create button. Once it get deployed you will be able to see it from the notification.

Once Web App Bot is deployed , you may verify its functionality by selecting “Test in Web Chat” in the left navigation bar and then typing your messages in the Test window.

Test in Web Chat

If you get replies similar to what is shown on the screenshot above, congratulations – you have successfully completed setup and training of your bot !

Next step would be to make it accessible in your platform of choice.

Step 7 : Embed your bot into any web site of yours

Azure Web App Bot can communicate with external world via so called “channels”. The channels are built for the relevant collaborating platforms, e.g. Skype,MS teams or Telegram. To find out more about supported channels, please consult Microsoft documentation here. By default, Web App Bot has “Web Chat” channel activated. It means that you can easily start using it on your Web site.

Navigate to Channels on the blade of created bot, then click “Get bot embedded codes” and finally click “Click here to open Web Chat configuration page” link.

Web Chat

Now click “Show” link to make one of the secret keys visible and use to replace <YOUR_SECRET_CODE> placeholder in provided embedded code sample. You can paste this embedded code now into the source code of your target Web site.

Now you can embed this into a Web sites can be built using various Web development frameworks: be it Angular,React,Vue,Angular or anything else.

Copy the code and embed in your site

Simply clone it, replace <PUT_YOUR_SECRET_CODE> placeholder in line # 1059 with the secret code from your Web Chat configuration page as describe above and you will get fully functional Web page with embedded QnA Chatbot.

In this case, i already have built an Covid Tracker application with Angular and this how it looks when i embed the code what we got from the portal.

Covid tracker with BOT in place

Step 8: Enable Chatbot in Microsoft Teams

Say if you want to serve internal audience such as employees and if you are widely using Microsoft Teams in this crisis situation, you would nee to activate relvant channel in the bot’s configuration.

Open Web App bot resource in the Azure portal again and select “Channels” option from the blade and click Microsoft Teams icon and press Save button

Select the channel you want to integrate with

Once it got successfully published, you can navigate to Channels blade again and see the Microsoft Teams channel in running state.

MS teams on running state

Now, switch to Microsoft Teams client, select “App Studio” from the left navigation bar if you dont have App studio, just install it from here

Click “Manifest Editor” tab and then click “Create a new app” button. 

Create a new App on teams

Fill all the details which are necessary and mandatory,

Add the details and make sure you get through all validation

Next in Capabilities -> Bots” choose your Azure bot from “Existing bot” tab’s drop-down list and then define its scope in MS Teams, e.g. “Personal” and “Team” for your users to chat with the bot directly and within specific teams.

Setup the bot

Finish -> Test and distribute“, use “Install” button (if you have MS Teams administrator access) or “Download” button (to send .ZIP package with the manifest details to your MS Teams administrator) to make your bot available in your MS Teams environment.

We’re adone

If successful, then you should be able to chat now with your bot directly from within MS Teams.

BOT in Lit Mode

The above can be integrated into any social media platform listed in the channels and its quite easy

You can also consider using HealthCare Bot if you are focused to have the chatbot to handle related scenario only and he is a detailed article on how to build the same.

Things to add/Improve:

Modify your bot with lot more cool features with images and more content via the code (either c#/Node)

Keep the knowledge base upto date : As shown aove it is important to keep your bot’s knowledge base up to date. You can just navigate to the QnA maker website and click on Save and Train button and publish as we shown above.

I am sure this would be useful to those who have built COVID trackers , you can just create and embed this chat bot within your web application, and for others to support employees who are working from home you can extend this bot on the respective collaboration tool. Let’s fight against COVID with these cool technology and make this world a better place. Cheers!

4 thoughts on “Build a BOT in quick time to support COVID Scenario and place it with Teams and Your Website!

Leave a Reply to Sajeetharan Cancel reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.