Create chatbot and connect to your website within 10 minutes using Microsoft Azure Bot Service

Introduction :

As the AI trend keeps rising, chatbots become more a must-have rather than a nice have part of the business. The increasing demand for chats continues to grow so to keep the customer satisfaction rate high; companies must find ways to cope with the rising volumes of inquiries coming every day to all their communication channels. Azure Bot Service is Microsoft’s artificial intelligence (AI) chatbot offered as a service on the Azure cloud service marketplace.

In this blog i will guide you how you can make a chatbot for your website using Microsoft Azure Bot Service. This blog is a part of the MSP Developer Stories initiative by the Microsoft Student Partners (India) program.

Prerequisite :

• If you don’t have an Azure subscription, create a free account before you begin.

The steps we will follow:

1. Create, train, and publish your QnA Maker knowledge base.
2. Create Bot using Microsoft Azure Bot service.
3. Connect your Bot to your website.

Step -1: Create, train, and publish your QnA Maker knowledge base:-

1. Sign in to the QnAMaker.ai portal with your Azure credentials.

QnAMaker Portal

2. In the QnA Maker portal, select Create a knowledge base.

3. On the Create page, skip Step 1 if you already have your QnA Maker resource. If you haven’t created the resource yet, select Create a QnA service. You are directed to the Azure portal to set up a QnA Maker service in your subscription.

Demo for creating QnA Service

Remember your Azure Active Directory ID, Subscription, QnA resource name you selected when you created the resource.

When you are done creating the resource in the Azure portal, return to the QnA Maker portal, refresh the browser page, and continue to Step 2.

4. In Step 3, select your Active directory, subscription, service (resource), and the language for all knowledge bases created in the service.

5. Name your knowledge base the same as the name of your QnA Service.

scroll to steps 4 and 5 to give your QnA Service an FAQ site you want to crawl for question and answer pairs. It’s also possible to use a file as a data source or you can simply paste URL.(Here in demo i have pasted the URL of my college website FAQs)

6. Click on create your KB

The extraction process takes a few moments to read the document and identify questions and answers.

After QnA Maker successfully creates the knowledge base, the Knowledge base page opens. You can edit the contents of the knowledge base on this page.

In the QnA Maker portal, on the Edit page, select + Add QnA pair from the context toolbar.

In the upper right, select Save and train to save your edits and train QnA Maker . Edits aren’t kept unless they’re saved.

Demo for Creating and testing Knowledgebase

7. In the QnA Maker portal, select Publish. Then to confirm, select Publish on the page. Then you will see the success window.

The QnA Maker service is now successfully published.

Step -2: Create a Bot using Microsoft Azure Bot service:-

1. In the QnA Maker portal, on the Publish page, select Create bot. This button appears only after you’ve published the knowledge base.
2. A new browser tab opens for the Azure portal, with the Azure Bot Service’s creation page. Configure the Azure bot service. The bot and QnA Maker can share the web app service plan, but can’t share the web app. This means the app name for the bot must be different from the app name for the QnA Maker service.

Do :-

Change bot handle — if it is not unique.

a) Select SDK Language. Once the bot is created, you can download the code to your local development environment and continue the development process.

Don’t :-

Change the following settings in the Azure portal when creating the bot. They are pre-populated for your existing knowledge base:

a) QnA Auth Key

b) App service plan and location

3. After the bot is created, open the Bot service resource.

4. Under Bot Management, select Test in Web Chat. At the chat prompt of Type your message and select Enter.

Demo for creating and testing Web App Bot

Now you have successfully created your Bot.

Step -3: Connect your Bot to your website:-

Azure Bot Service offers the ability to add intelligent agents that are capable of conversation without having to commit the resources to develop one’s own AI. The service can be added to websites, apps, email, GroupMe, Facebook Messenger, Kik, Skype, Slack, Microsoft Teams, Telegram, SMS, Twilio, Cortana, and Skype for Business.

1. In your created bot go to Channels and click on Get bot embed code then click open the webchat configuration page. Then a Default site window will appear.

2. Copy the Embed code to your web page.

3. Replace <YOUR_SECRET_HERE> with Secret Keys.

Demo for writing Embed Code in web page

Here i have used Visual studio code IDE you also can write it in Notepad or any of your web page. you can also change the size of bot as per your requirement

4. Now save and run your web page. Here we go..!

Congratulations!! now your bot is ready for your website.

Create chatbots and connect to your website within 10 minutes.

Now if you want to connect your bot to Facebook Messanger then click here or you can contact me.

Thanks a lot for reading till end. You can contact me in case if you need any assistance:
Email: anjalirajput394@gmail.com
Linkedin: https://www.linkedin.com/in/anjali-rajput/
GitHub: https://github.com/Anjali394

Subscribe to FAUN topics and get your weekly curated email of the must-read tech stories, news, and tutorials 🗞️

Follow us on Twitter 🐦 and Facebook 👥 and Instagram 📷 and join our Facebook and Linkedin Groups 💬

If this post was helpful, please click the clap 👏 button below a few times to show your support for the author! ⬇