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:

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.

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.


Leave a Reply

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

You are commenting using your 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.