Create And Connect A Chat Bot With Azure Bot Service

Rajeesh Menoth
Jan 04, 2018

18.2k
0
7
- facebook
- twitter
- linkedIn
- Reddit
- WhatsApp
- Email
- Print
- Other Artcile

Introduction

This article explains how to Create and Connect a chat bot with Azure Bot Service.

Azure Account

First, we need to create an account on the Azure portal. Only then can we host the application in the cloud environment. So, please check the following steps to create an Azure account.

Azure Account Registration

Create an account through this link to Azure portal.

Web App Bot

Click on “New” on the left side menu and it will open an Azure Marketplace , there we can see list of services so click on “AI + Cognitive Services” then click on the “Web App Bot” for our bot service app.

BOT Service Registration

Bot name : The display name of our bot service and that appears in channels and directories. We can change this name at any time.
Subscription : We can select our Azure subscription for chat bot service.
Resource group : We can create a new resource group or choose from an existing one ( We selected our existing resource group as “AzureDemo” ).
Location : We can select our location of resource group. The best thing is we can choose a location closest to our customer. The location cannot be changed once the bot is created.
Pricing tier : Select a pricing tier of bot service.
App name : The unique URL name of our bot service , We given “menothbot” as our App name and the URL is look like this : http://menothbot.azurewebsites.net/
Bot template : There are two templates available in bot C# and Node.js. We can choose any of the template and that will create a echo bot.
App service plan/Location : We can choose a 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 on or off this option.
Click on the “Create” button and wait for the build success.
Once the build is succeeded, then click on the “Dashboard” and we can see “menothbot” bot is created in the All resources list . Bot is ready for use !!.

Online Code Editor

Click on the “menothbot” bot in dashboard window , Then After we can see a list option available for our bot service. So click on the “Build” option in left side menu and it will open multiple option in right side. Just click on “Open online code editor” link.
Online code editor will open a source code window of our bot service app. So we can edit and add code in this section and 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 then click on the “build console” option on the left side menu and run it “build.cmd” command for the execution and deployment of the code.

Test in Web Chat

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

Code

using System;
using System.Threading.Tasks;
using Microsoft.Bot.Connector;
using Microsoft.Bot.Builder.Dialogs;
using System.Net.Http;
namespace Microsoft.Bot.Sample.SimpleEchoBot
{
[Serializable]
public class EchoDialog : IDialog<object>
{
protected int count = 1;
public async Task StartAsync(IDialogContext context)
{
context.Wait(MessageReceivedAsync);
}
public async Task MessageReceivedAsync(IDialogContext context, IAwaitable<IMessageActivity> argument)
{
var message = await argument;
if (message.Text == "reset")
{
PromptDialog.Confirm(
context,
AfterResetAsync,
"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 ?");
context.Wait(MessageReceivedAsync);
}
else if (message.Text == "how are you ?")
{
await context.PostAsync($"{this.count++}: fine , What about u ?");
context.Wait(MessageReceivedAsync);
}
else if (message.Text == "hello")
{
await context.PostAsync($"{this.count++}: Hello , Tell Me !!");
context.Wait(MessageReceivedAsync);
}
else
{
await context.PostAsync($"{this.count++}: You said {message.Text} , This is Azure Bot Service !! Thank You All !!
by
RajeeshMenoth !! ");
context.Wait(MessageReceivedAsync);
}
}
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.");
}
context.Wait(MessageReceivedAsync);
}
}
}

Connect a bot to Web Chat

This is very simple way to connect our bot service app to Web Chat in Azure. Please check the following steps !!.

Click on the "Channels" menu in the left side option. Then it will open a window with channels details there you can see edit option in “Web Chat” channel.
Click on the edit option in "Web Chat" channel and It will display two "Secret Keys" with Iframe code. So choose the first "Secret Key" and add it on iframe code.

iframe code

Copy paste your iframe code in your html code and add the secret key available in the web chat edit option . Then it will display the Web chat bot in your app.