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.

Fig01-BotProperties
Fig. 1

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

Fig02-BotSettingsBlade
Fig. 2

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

Fig03-MicrosoftAppId
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.

Fig04-ChannelsBlade
Fig. 4

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

Fig05-DirectLineChannelIcon
Fig. 5

Fig06-ConfigureDirectLine
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

Fig07-ShowSecretKey
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.

Fig08-BotClient
Fig. 8

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

Fig09-BotClient
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.