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:
<script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>
Add a div to your web page with the id "mybot", as shown below
<div id="mybot"></div>
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 <HEAD> tag:
<link 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.
<!DOCTYPE html>
<html>
<head>
<title>Cubic Chatbot</title>
<link href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" rel="stylesheet" />
</head>
<body>
<div id="mybot"></div>
<script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>
<script>
BotChat.App({
'directLine': { 'secret': 'pdWb0xfE48M.wcA.dQI.YQgum240I2x9dVGc6S28u5Xik2Xt3A_TakzR24uGgjs' },
'user': { id: 'Customer01' },
'bot': { id: 'ac0438dc-a820-40fb-ae87-6448403ed1ad' },
'resize': 'detect'
}, document.getElementById("mybot"));
</script>
</body>
</html>
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.
<iframe src="botclientpage.html"></iframe>
In this article, I showed you how to create a web page that communicates with a Microsoft Bot.