Create And Connect A Chat Bot With Azure Bot Service

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 
  1. Bot name : The display name of our bot service and that appears in channels and directories. We can change this name at any time.
  2. Subscription : We can select our Azure subscription for chat bot service.
  3. Resource group : We can create a new resource group or choose from an existing one ( We selected our existing resource group as “AzureDemo” ).
  4. 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.
  5. Pricing tier : Select a pricing tier of bot service.
  6. 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/
  7. 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.
  8. App service plan/Location : We can choose a best service plan that closest to our customer.
  9. Azure Storage : We can create a new data storage account or use an existing one. By default, the bot will use Table Storage.
  10. Application Insights : This will provide service-level and instrumentation data like traffic, latency, and integrations. We can switch on or off this option.

     

  11. Click on the “Create” button and wait for the build success.
  12. 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
  1. 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.



  2. 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".



  3. 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
  1. using System;  
  2. using System.Threading.Tasks;
  3. using Microsoft.Bot.Connector;  
  4. using Microsoft.Bot.Builder.Dialogs;  
  5. using System.Net.Http;  
  6.    
  7.    
  8. namespace Microsoft.Bot.Sample.SimpleEchoBot  
  9. {  
  10.     [Serializable]  
  11.     public class EchoDialog : IDialog<object>  
  12.     {  
  13.         protected int count = 1;  
  14.    
  15.         public async Task StartAsync(IDialogContext context)  
  16.         {  
  17.             context.Wait(MessageReceivedAsync);  
  18.         }  
  19.    
  20.         public async Task MessageReceivedAsync(IDialogContext context, IAwaitable<IMessageActivity> argument)  
  21.         {  
  22.             var message = await argument;  
  23.    
  24.             if (message.Text == "reset")  
  25.             {  
  26.                 PromptDialog.Confirm(  
  27.                     context,  
  28.                     AfterResetAsync,  
  29.                     "Are you sure you want to reset the count?",  
  30.                     "Didn't get that!",  
  31.                     promptStyle: PromptStyle.Auto);  
  32.             }  
  33.             else if (message.Text == "hi")  
  34.             {  
  35.                 await context.PostAsync($"{this.count++}: Hi , How may I assist you ?");  
  36.                 context.Wait(MessageReceivedAsync);  
  37.             }  
  38.             else if (message.Text == "how are you ?")  
  39.             {  
  40.                 await context.PostAsync($"{this.count++}: fine , What about u ?");  
  41.                 context.Wait(MessageReceivedAsync);  
  42.             }  
  43.             else if (message.Text == "hello")  
  44.             {  
  45.                 await context.PostAsync($"{this.count++}: Hello , Tell Me !!");  
  46.                 context.Wait(MessageReceivedAsync);  
  47.             }  
  48.             else  
  49.             {  
  50.                 await context.PostAsync($"{this.count++}: You said {message.Text} , This is Azure Bot Service !! Thank You All !!  
  51.  by  
  52.  RajeeshMenoth !! ");  
  53.                 context.Wait(MessageReceivedAsync);  
  54.             }  
  55.         }  
  56.    
  57.         public async Task AfterResetAsync(IDialogContext context, IAwaitable<bool> argument)  
  58.         {  
  59.             var confirm = await argument;  
  60.             if (confirm)  
  61.             {  
  62.                 this.count = 1;  
  63.                 await context.PostAsync("Reset count.");  
  64.             }  
  65.             else  
  66.             {  
  67.                 await context.PostAsync("Did not reset count.");  
  68.             }  
  69.             context.Wait(MessageReceivedAsync);  
  70.         }  
  71.    
  72.     }  
  73. }  
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 !!.
  1. 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.



  2. 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.
  1. <iframe src='https://webchat.botframework.com/embed/menothbot?s=YOUR_SECRET_HERE'></iframe>  
Output
 
 
Reference
See Also
 
You can download other ASP.NET Core source codes from MSDN Code, using the link, mentioned below.
Summary
 
We learned how to Create and Connect a chat bot with Azure Bot Service. I hope this article is useful for all Azure chat bot beginners. 

X

Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now