Over a million developers have joined DZone.

Create and Connect a Chatbot With Azure Bot Service

DZone 's Guide to

Create and Connect a Chatbot With Azure Bot Service

In this beginner's tutorial, learn how you can quickly and easily create and connect a chatbot by using Azure Bot Service.

· AI Zone ·
Free Resource

This article explains how to create and connect a chatbot with Azure Bot Service.

First, we need to create an account on the Azure portal. Only then can we host the application in the cloud environment. Click here to create your free account.

Web App Bot

Click New on the left-side menu and it will open the Azure Marketplace, where we can see a list of services. Click AI + Cognitive Services > Web App Bot for our bot service app.

Bot Service Registration

  • Bot name: The display name of our bot service that appears in channels and directories. We can change this name at any time.
  • Subscription: We can select our Azure subscription for the chatbot service.
  • Resource group: We can create a new resource group or choose from an existing one (we chose our existing resource group to be “AzureDemo”).
  • Location: We can select the location of the resource group. We can (and should) choose the location closest to our customer. The location cannot be changed once the bot is created.
  • Pricing tier: Select a pricing tier of the bot service.
  • App name: The unique URL name of our bot service. We put “menothbot” as our app name and the URL looks like this: http://menothbot.azurewebsites.net/
  • Bot template: There are two templates available for the bot: C# and Node.js. We can choose any of the templates and that will create an echo bot.
  • App service plan/location: We can choose the best service plan that closest to our customer.
  • Azure storage: We can create a new data storage account or use an existing one. By default, the bot will use table storage. 
  • Application insights: This will provide service-level and instrumentation data like traffic, latency, and integrations. We can switch this option on or off. 

  • Click on the Create button and wait for the build to be successful.

  • Once the build is successful, click Dashboard. We can see that “menothbot” is created in the All resources list. The bot is ready for use!

Online Code Editor

  • Click on menothbot in Dashboard window. Then, we can see a list of options available for our bot service. Click on the Build option on the left-side menu and it will open multiple options on the right side. Click Open online code editor.

  • The online code editor will open a source code window of our bot service app. We can edit and add code in this section. Currently, it will display the default echo bot code of our bot service. Click on WWWROOT > Dialogs > EchoDialog.cs.

  • If you made any changes in the online code editor, click Build console on the left-side menu and run the build.cmd command to execute and deploy the code.

Test in Web Chat

We can quickly test our bot through the Test in Web Chat option. Just click on the Test in Web Chat on the left-side menu and it will open a chatbot on the right-side window. Here, it will display a few messages that we already added in EchoDialog.cs in the online code editor.


using System;
using System.Threading.Tasks;
using Microsoft.Bot.Connector;
using Microsoft.Bot.Builder.Dialogs;
using System.Net.Http;

namespace Microsoft.Bot.Sample.SimpleEchoBot {
  public class EchoDialog: IDialog < object > {
   protected int count = 1;

   public async Task StartAsync(IDialogContext context) {

   public async Task MessageReceivedAsync(IDialogContext context, IAwaitable < IMessageActivity > argument) {
    var message = await argument;

    if (message.Text == "reset") {
      "Are you sure you want to reset the count?",
      "Didn't get that!",
      promptStyle: PromptStyle.Auto);
    } else if (message.Text == "hi") {
     await context.PostAsync($ "{this.count++}: Hi , How may I assist you ?");
    } else if (message.Text == "how are you ?") {
     await context.PostAsync($ "{this.count++}: fine , What about u ?");
    } else if (message.Text == "hello") {
     await context.PostAsync($ "{this.count++}: Hello , Tell Me !!");
    } else {
     await context.PostAsync($ "{this.count++}: You said {message.Text} , This is Azure Bot Service !! Thank You All !!
      by RajeeshMenoth!!");

    public async Task AfterResetAsync(IDialogContext context, IAwaitable < bool > argument) {
     var confirm = await argument;
     if (confirm) {
      this.count = 1;
      await context.PostAsync("Reset count.");
     } else {
      await context.PostAsync("Did not reset count.");


Connect a Bot to Web Chat

This is a very simple way to connect our bot service app to a web chat in Azure. 

  • Click on the Channels menu on the left side. Then it will open a window with channels details. There, you can see the Edit option on the Web Chat channel.

  • Click on the Edit option in Web Chat channel and it will display two secret keys with iFrame code. Choose the first Secret Key and add it to the iFrame code.

  • Copy and paste your iFrame code into your HTML code and add the secret key available in the web chat edit option. Then, it will display the web chatbot in your app.





We learned how to create and connect a chatbot with Azure Bot Service. I hope this article is useful for all Azure chatbot beginners.

ai ,chatbot ,bot development ,azure bot service ,tutorial

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}