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 you configure the communication channels for your bot. You 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 you, which makes your job a little easier. Click “Edit”. You’ll see that it has a couple of secret keys and then some code that you 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.

Now we just have to find a place to put this code. One option would be to start up a web server on your desktop or local server and add a page there, but let’s take advantage of Azure App Service instead. We could create a new web app, but since we already have one running for our QnA service, let’s just piggyback on that one. This probably wouldn’t be a good idea if you were creating a real customer-facing web chat, but it’ll be fine for demo purposes.

Open up your QnA service. I’m going to bring up the portal in another tab so I’ll still have the bot configuration open too. I called it “caqna”, so I’ll search for that. 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”. Click on “Go”.

The list of files is on the left. There’s only one right now called “hostingstart.html”. This is what comes up by default when you go to this website. I’ll show you what it looks like. If you go back to the previous tab and go to the overview, you’ll see the URL for its website. Click on it to bring it up. This is the hostingstart.html page. It’s the generic page that comes up until you put in your own index.html file. 

OK, so let’s go back to the editor and create a new page. Right-click and select “New File”. I’m going to call it test.html because this is just going to be a simple test. 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”. Great! That one line of code actually brought up a chat box. Type “languages supported”. 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.