Adding Azure Chat Bot To Web Page

A very basic page showing the chat bot

Yesterday I created a chat bot that uses an FAQ / Question & Answer knowledge base to answer a users questions. I created this bot using Microsoft Azure and details can be found at: https://geektechstuff.com/2019/03/03/creating-an-azure-qa-faq-chat-bot/

One detail I missed yesterday was adding the chat bot to a web page. Azure allows for chat bots to be added to many different channels (e.g. Skype, Microsoft Teams) but I want to focus on adding to a web page.

To embed the chatbot into a website a “secret key” is required. This can be generated in the Microsoft Azure portal by selecting the bot in your Azure dashboard and then choosing “Channels” from the left hand side window.

Generating Bot Secret Key
Generating Bot Secret Key

Clicking “Show” shows the relevant key, and clicking “Regenerate” recreates the key, which is good if you’ve accidentally leaked it. This window also shows the relevant code needed to place the chat bot on a page, which is the bit in between the iframe tags.

A very basic page showing the chat bot
A very basic page showing the chat bot

Make sure to replace the text after s= with the secret key generated in the above steps. I knocked up a very basic web page to show the chat bot in action.

geektechstuff_chat_bot_in_action_azure
Azure chat bot in action

With the HTML, secret key and a good knowledge base (again, see part 1) the chat bot should be ready for deployment on a web page.