Calling a Microsoft Chatbot from a web page

The Microsoft Bot Framework makes it easier to create a chatbot. But a chatbot is only good if your users have a way of calling it. Microsoft bots can be accessed via a number of channels, including Facebook Messenger, Microsoft Teams, Skype, Slack, and Twilio.

Bot Settings

Once you have deployed a bot to Azure, you can view its properties in the Azure Portal, as shown in Fig. 1.

Fig. 1

Click "Settings" to display the "Settings" blade, as shown in Fig. 2.

Fig. 2

You will need the "Microsoft App ID" value (Fig. 3)

Fig. 3

Copy this value and save it somewhere, such as in a text file. You will need it later.

Bot Channel

Next, create a Channel for your bot. To do this, do the following:

Click "Channels" to display the "Connect to Channels" blade, as shown in Fig. 4.

Fig. 4

Click the "Configure Direct Line Channel" icon (Fig. 5) to display the "Configure Direct Line" dialog (Fig. 6)

Fig. 5

Fig. 6

The Secret Keys are hidden by default. Click the "Show" link next to one of them to display this key, as shown in Fig. 7

Fig. 7

Copy this value and save it somewhere, such as in a text file. You will need it later.

Click the [Done] button to close the "Configure Direct Line Channel" dialog.

Create Web Page

Now, you are ready to create a web page to allow users to use your chatbot.

The chat functionality is exposed through web services; but you can simplify calling these by using the Web Chat control. The source code for this open source project is here; but you don't need the source code unless you plan to modify or extend it.

Instead, you can link to the JavaScript file from your HTML with the following tag:

Add a div to your web page with the id "mybot", as shown below

Then, add the following JavaScript to configure the WebChat client:

<script>
	BotChat.App({
		'directLine': { 'secret': 'DirectLineSecretKey' },
		'user': { id: 'UserId' },
		'bot': { id: 'MicrosoftAppId' },
		'resize': 'detect'
	}, document.getElementById("mybot"));
</script>

where:

DirectLineSecretKey is from one of the 'Secret Keys' fields of the Bot's Direct Line channel blade, that you copied earlier.
MicrosoftAppId is from the 'Microsoft App Id' field of the bot's 'Settings' blade, that you copied earlier.
UserId can be any string you like. These will display in the UI next to text submitted by the user.

The WebChat project also provides a stylesheet that you can use by adding the following tag within the tag:

 href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" rel="stylesheet" />

Below is the full HTML and JavaScript with some dummy values for DirectLineSecretKey, user, and MicrosoftAppId.




    </span>Cubic Chatbot<span style="color: rgb(0, 119, 0);">
     href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" rel="stylesheet" />


     id="mybot">

In a browser, this page renders as shown in Fig. 8.

Fig. 8

Fig. 9 shows how it looks when you connect to a bot that echoes back what the user sends.

Fig. 9

If you want this control to be displayed within another web page, you can add an iframe to that other page, as below.

 src="botclientpage.html">

In this article, I showed you how to create a web page that communicates with a Microsoft Bot.