How to add an FAQ bot to your website

Hosting an event? Attendees always have questions, you can bury them on your website or you can add a chat bot for quick Q&A based on your existing FAQ!

In this post I will show you the steps to

• Create and test a FAQ knowledge base
• Create and deploy a bot that connects to your knowledge base
• Get a hyperlink so your website can launch a chat with the bot

This tutorial uses Azure so you need an Azure subscription to continue. If you are a student you can sign up for free Azure without a credit card at aka.ms/Azure4Students . If you are not a student you can sign up for a free Azure trial.

Create and test a FAQ knowledge base

Azure has a tool called QnA Maker which allows you to create a knowledge base automatically from an existing set of FAQ.

Visit the QnA Maker site and select Create a knowledge base from the top menu.

Select Create a QnA service.

You will be redirected to the Azure portal. Sign in using the account associated with your Azure subscription.

TIP: If you are redirected to a different Azure page after signing in, just go back to the QnA Maker page and select Create a QnA Service again to bring back the blade for creating a new QnA Service.

Specify

1. Service Name
2. Select the Management pricing tier (TIP: the ones that start with “F” are free, you can switch to a paid tier later when you need to support more calls per minute)
3. Select your pricing tier (TIP: the ones that start with “F” are free, you can switch to a paid tier later when you need more storage)
4. You can change the App name if you wish, it defaults to the name of your service. The name must be unique across all Azure users since it will determine the URL of your service.
5. You can change the other values if you wish or leave them at their default values then select Create.

After a minute or two your service will be created. Go to  Notifications in the top right corner and select Go to Resource.

Now that you have a QnA Service you can return to the QnA Maker site and create your knowledge base. Refresh the page so the site picks up your recently created QnA Service.

Select your Azure directory, subscription name and services using the drop down lists.

Then enter a name for your Knowledge base

Provide the URL for one or more web pages with your FAQ or upload one or more files containing your FAQ.

Select Create your KB to create your knowledge base.

You can add additional questions by selecting + Add QnA pair

Type in a question the way you think a user might ask it and the suggested response.

TIP: Use the + symbol for any question to add different phrases that might be used to ask the same question.

Once you have the questions and answers you want, select Save and train from the top menu to save and train your QnA service model.

Select Test to test your trained service. Enter a question and see what comes back. Note you do not have to type in the questions exactly as they appear in the FAQ, that’s because the service is using LUIS (Language Understanding ) to figure out the intent of each question.

When you are finished testing select Test again to collapse the testing window. You can go back and forth adding new questions and phrasing then retraining the model as often as you wish until you feel the most common questions from users will find a suitable response.

When you are satisfied with your responses select PUBLISH from the top menu and select Publish to publish your service and get an endpoint you can use to call the service.

Once it is deployed you will see the screen below. You can Edit then retrain and republish your service as often as you want.

You will need some of the details in the HTTP request shown on this screen to create a bot that connects to your service.

Congratulations you have successfully deployed a QnA service. Your next step is to create a Bot and connect it to your service.

Create and deploy a bot that connects to your knowledge base

Return to the Azure portal

Select Create a resource and search for Web App Bot

Select Web App Bot from the list of search results then select Create

Enter a Bot name and a pricing tier

Select your Bot template:

• Change the SDK version to SDK V3
• Choose either C# or Node.js as your SDK language
• Choose the Question and Answer template

While you are waiting go back to the QnAMaker and select My Knowledge bases

Select your knowledge base

Go the Settings tab

Scroll down to the Deployment details and find the

• KnowledgeBaseID – This value will go in the QnAKnowledgeBaseID field
• EndPointHostName – This value will go in the QnAEndpointHostName field
• EndPointKey – This value will go in the QnAAuthKey field

Once your Web app bot is created, select it in the portal and choose Application Settings

Scroll down until you see the Application settings

Select Show Values to see the individual application settings and enter the values you looked up for

• QnAAuthKey
• QnAEndpointHostName
• QnAKnowledgebaseId

Don’t forget to select Save after you enter the values

You can test to ensure your Bot is connected to the knowledge base by selecting Test in Web Chat. Type in a few questions, you should get the same responses you saw when you tested in QnAMaker. If you do not get an answer, you can try republishing the QnA Service in QnA Maker and double check the app settings are copied correctly.

Get a hyperlink so your website can launch a chat with the bot

Now that you have a bot, you need a way to call the Bot.  There are many different ways to call a bot. You can set up channels to call the Bot from Skype or Facebook. Some platforms are quite a bit of work because you need authentication keys from the applications and you have to go back and forth connecting the application to your service passing keys back and forth.

For many of us, the ability to call the chat bot from a website is sufficient. Let me show how to get a hyperlink you can use to launch or an iframe to embed the bot into your website.

Open your bot in Azure and select Channels 

Select Get bot embed codes from the Channels blade

On the pop up page select Click here to open the Web Chat configuration page

Select Show to display your secret key.

If you want to embed a chat window inside your website copy everything in the Embed code to your webpage. Replace the text YOUR_SECRET_HERE with the secret key from the text box above.

If you want to open the chat window in a separate window, just create a hyperlink that points to the URL https://webchat.botframework/embed/YOURBOTNAME?s=YOUR_SECRET_HERE that appears inside the embed code. Replace YOUR_SECRET_HERE with the secret key from the text box above

If you open the hyperlink you will get a new tab with the chat window

If you embed the code in an iframe it will appear within your web page. You will probably want to set the height and width properties of the iframe.

 

<h1>Look a chat bot</h1>

I added this to my web page

https://webchat.botframework.com/embed/AwesomeQnABot?s=xxxxxxxxxxxxxxxxxxx

neat eh?

Congratulations! You have just created and deployed a chat bot that will answer frequently asked questions using natural language and artificial intelligence!

Find out more about

• Webchat for bots
• QnA Maker
• LUIS (Language Understanding)

 

 

 

Advertisement