Contact Me!
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.
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.
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
Click the [Done] button to close the "Configure Direct Line Channel" dialog.
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:
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.