The Web Chat that we used to test the bot isn’t something that other users can access, so we need to create our own. 

Go back to your bot in the Azure portal. Then click “Channels”. This is where we configure the communication channels for our bot. We can configure channels so users can interact with the bot using apps like Skype, Facebook Messenger, or even email.

You’ll see that it has already created a “Web Chat” channel for us, which makes our job a little easier. Click on it. Then click “Default Site”. You’ll see that it has a couple of secret keys and then some code that we can embed in a web page. When you add this code to a web page, you need to put one of the secret keys here so it can authenticate with the chatbot.

To build a web chat app with a nice user interface, the easiest way would be to develop it using Visual Studio. Then you could deploy it to the Azure App Service instance that was created with the Azure Bot. However, we’re going to take a shortcut and just put a very simple web page directly in that App Service instance.

We want to keep the bot configuration open, so we’ll bring up the Azure portal in another tab to find the App Service instance. Here it is. Make sure you click on the one that says “App Service” next to it.

Now, to add a web page to this app service, scroll down to the “Development Tools” section of the menu and open the “App Service Editor”. Then click “Open Editor”.

The list of files is on the left. If you expand the wwwroot folder, you’ll see there’s a file called “default.htm”. This is what comes up by default when you go to this website. I’ll show you what it looks like. If we go back to the previous tab and go to the overview, we’ll see the URL for its website. Click on it to bring it up. This is the default.htm page. It’s the generic page that comes up until you replace it with your own app’s home page. 

Instead of replacing the default.htm, let’s create a separate page called test.html since this is just going to be a simple test. Go back to the editor. Then right-click and select “New File”. Call it test.html. Now go back to the bot channels and copy the embed code. Paste it in the test.html file. Then click “Show” for the first secret key, highlight it, copy it, and paste it here.

All right, you’re probably thinking that this isn’t a proper HTML page. That’s true, but it’ll still work in most browsers, and I’d rather not bore you with typing the other tags, so let’s just leave it at that for our test.

The editor automatically saved the changes, so now go back to the website and add “/test.html”. That one line of code actually brought up a chat box. Let’s try “run bot offline” again. Yes, it was able to talk to the bot.

In the next lesson, I’ll explain how to get your bot to support speech. So if you’re ready, then go to the next video.