Creating a Web Chat App
Start course

In this course, you will learn how to create a chatbot to answer support questions about specific products and services. Along with this, you will learn how to combine the Azure Bot Service and Azure QnA Maker and to add speech input and output capabilities to help customers on mobile devices and those with impaired sight.

This course requires some previous knowledge of Azure and coding.

Learning Objectives

  • Create and configure an Azure QnA Maker knowledge base
  • Create an Azure Bot Service chatbot that answers questions
  • Enable speech recognition and synthesis on an Azure chatbot

Intended Audience

  • Those interested in artificial intelligence services on Azure, especially chatbots


  • Previous experience using Azure
  • Previous experience with writing code


The GitHub repository for this course is at


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.

About the Author
Learning Paths

Guy launched his first training website in 1995 and he's been helping people learn IT technologies ever since. He has been a sysadmin, instructor, sales engineer, IT manager, and entrepreneur. In his most recent venture, he founded and led a cloud-based training infrastructure company that provided virtual labs for some of the largest software vendors in the world. Guy’s passion is making complex technology easy to understand. His activities outside of work have included riding an elephant and skydiving (although not at the same time).