Embed Azure Bot in Website

To make the bot appear on your webpage and let users interact with it. This article explores integrating bots with websites using the Embed code mechanism.

Although this mechanism is not recommended due to security concerns because your secret key will be visible to everyone in html code and can be used by anyone but this is the simplest way of embedding the bot in website.

Pre-requisites

1. Azure Subscription
2. Create Echo Bot using Azure Bot Service

We used Echo Bot for this demonstration. Feel free to use any other bot which is deployed in Azure.

Integrating bot with Website

• Hope you have created the Echo Bot. Test the bot in Web Chat and check if it is working fine.

• By default, the bot is connected to the web chat. Click on Channels -> Get Bot Embed codes.

• “Click here to open the Web Chat Configuration page”

• Copy the embed code and make a note of the secret key. These two will be used to embed on the webpage.

• We will create a simple webpage. Create a new text document in Notepad. Paste the embed code in it along with secret key by replacing “YOUR_SECRET_KEY”.

• Save with file name as bot.html and Save as type as “All files”.

• Open bot.html in your preferred browser and start the conversation with the bot.

Thank you All!!! Hope you find this useful.