Click here to Skip to main content
15,867,330 members
Articles / Artificial Intelligence

Adding a Self Hosted Chatbot to an ASP.NET Website

Rate me:
Please Sign up or sign in to vote.
5.00/5 (19 votes)
26 Aug 2020CPOL7 min read 105K   9.5K   45   44
Automated Chat bot agent in an ASP.NET website that does not depend on any external API services
In this article, I will be exploring the semantics behind an automated Chat bot agent in an ASP.NET website that is hosted on the web app itself and does not depend on any external API services.

Introduction

These days, automation has found itself a place in every trend of Business and Development. And one such automation deals with automated online conversational entities. The idea behind this article is to deploy a Chat Bot in an ASP.NET website (via a Widget) that is not connected to any online bot API services and is directly hosted within the web app itself.

Getting Started

So without further adieu, let's get started.

Let's create an ASP.NET website that will contain the chat bot widget. For this, let us follow the steps below:

  • Open Visual Studio (I am on VS 2019 Community Edition).
  • Select the ASP.NET Web Application (.NET Framework) template.

    Image 1

  • Hit Next and give the project a name. I have chosen to name the project BotWebsite.

    Image 2

  • And for this project, we'll select Empty for an empty web application project.

    Image 3

Next, we'll add a Web Form to the project. This Web Form will be our default web page to which we'll later add our chat bot widget.

Image 4

To add a Web Form, right click the Project name under Solution Explorer and select Add->New Item..->Web Form and name the file Default.aspx.

Now that we've added the Web Form. We'll import the required NuGet package, click on Tools->NuGet Package Manager->Package Manager Console and type:

C++
PM> Install-Package Syn.Bot.Channels

This will add a reference to the Syn.Bot.Channels library that we will be making extensive use of in this tutorial. The library we've just imported will provide us with the following crucial elements for our Automated Chat bot.

  • JavaScript for deployment and HTML elements that will automatically be inserted into the web page.
  • An emulated REST API URL for interacting with our Chat bot.
  • A WidgetChannel class to customize the core (cosmetic) attributes of our chat bot.
  • A hassle-free means of connecting the internal bot's NLP system to the externally Chat Bot widget.

Creating the Chatbot Service URL

Every time a Chat Request is sent to our Chat bot widget, the message will be passed as parameters to a URL that will point to a Web Form in our Project. The Web Form (containing the backed Bot system) will then process the message part and return a bot response with the proper headers.

The same URL will also serve the purpose of sending the required JavaScripts, CSS and HTML elements to the browser whenever the Default.aspx page is loaded.

  • Right click on your Project name under the Solution Explorer.
  • and click Add->New Item..->Web Form.
  • Name the file BotService.aspx.
  • Right click this newly created Web Form file and select View Code.
  • Replace the code within this file with the following:
C#
using System;
using System.Web;
using System.Web.UI;
using Syn.Bot.Channels.Testing;
using Syn.Bot.Channels.Widget;
using Syn.Bot.Oscova;

namespace BotWebsite
{
    public partial class BotService : Page
    {
        private static WidgetChannel WidgetChannel { get; }
        private static OscovaBot Bot { get; }

        static BotService()
        {
            Bot = new OscovaBot();
            WidgetChannel = new WidgetChannel(Bot);

            //Add the pre-built channel test dialog.
            Bot.Dialogs.Add(new ChannelTestDialog(Bot));

            //Start training.
            Bot.Trainer.StartTraining();

            var websiteUrl = 
                HttpContext.Current.Request.Url.GetLeftPart(UriPartial.Authority);
            WidgetChannel.ServiceUrl = websiteUrl + "/BotService.aspx";
            WidgetChannel.ResourceUrl = websiteUrl + "/BotResources";

            WidgetChannel.WidgetTitle = "Our Smart Bot!";
            WidgetChannel.LaunchButtonText = "Ask";
            WidgetChannel.InputPlaceHolder = "Ask your query here...";
        }

        protected void Page_Load(object sender, EventArgs e)
        {
            WidgetChannel.Process(Request, Response);
        }
    }
}

Time to demystify the above code.

We start by using the static constructor for the BotService page object. Inside the static constructor, we create and initialize a new OscovaBot instance. The static constructor is opted to ensure that our WidgetChannel object will be initialized only once per session.

  • ServiceUrl - Main URL that the Bot Widget will use to interact with the underlying Bot system
  • ResourceUrl - Location to the directory where we'll keep the required image resource files
  • WidgetTitle - Title of the chat bot widget
  • InputPlaceHolder - Default watermark-text that is displayed within the Input box
  • LaunchButtonText - Text that is displayed when the Bot widget is visible on the website
C#
protected void Page_Load(object sender, EventArgs e)
{
    WidgetChannel.Process(Request, Response);
}

This is where the magic happens. Every time the BotService.aspx page is about to load the page, Request and Response objects are passed to the WidgetChannel as arguments.

The agent then processes the Request and returns a Response with a proper header. These responses include (but are not limited to):

  • JavaScripts
  • Cascading Style Sheets
  • HTML elements

The following line however, adds a pre-built Channel testing dialog that has the following in-built test commands ready:

  • Ping - Bot responds Pong
  • Text Message - Bot responds with a random text value
  • Quick Reply Message - Bot responds with a set of options the user can select from
  • Image Url Message - Bot responds with an image
  • Basic Card Message - Bot responds with a card that has a title, description and image
C#
//Add the pre-built channel test dialog.
Bot.Dialogs.Add(new ChannelTestDialog(Bot));

Adding Relevant Images

The chat widget that will be displayed on our web page uses certain images and apparently, we'll have to import a few image files into our Project.

  • For this, create a new folder by right clicking on the Project name under the Solution Explorer.
  • and select Add->New Folder.
  • Name the folder "BotResources". In this folder, we'll now add a number of image files required by the Chat Panel.

Next:

  • Download the Resource Files I've made available with this article and extract them to any desired folder in your machine.
  • In Visual Studio, right click the BotResources folder, we've just created, and choose Add->Existing Item..
  • Select all the files you've extracted

The BotResource folder now has all the required image files.

The Final Touch

Now that our project is ready, there's this one last thing that we'll have to do to fire up our chatbot.

  • Double click the Default.aspx and replace the code with the following:
ASP.NET
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" 
    Inherits="BotWebsite.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>My Website with a Bot</title>
</head>
<body style="background-color: #1d1f21">
    <form id="form1" runat="server">
        <div>
        </div>
        <script type="text/javascript">
            (function () {
                var scriptElement = document.createElement('script');
                scriptElement.type = 'text/javascript';
                scriptElement.async = false;
                scriptElement.src = '/BotService.aspx?Get=Script';
                (document.getElementsByTagName('head')[0] || 
                 document.getElementsByTagName('body')[0]).appendChild(scriptElement);
            })();
        </script>

    </form>
</body>
</html>

The above code pretty much explains it all.

The JavaScript calls the ServiceUrl and passes "Script" as a value for the Get parameter. The Web Form BotService.aspx upon receiving the aforementioned parameter will return the JavaScript to the browser that will automatically add a Style Sheet along with the HTML elements that make up the cosmetics of your Chat bot widget.

Running the Project

Interestingly, we are done with our coding, copying, extracting and what not. We'll go ahead and run the project. To do so, press F5 and you should see the Chat Bot Widget.

If for some reason, you don't see the widget, then refresh the page.

Screenshot

Image 5

Congratulations! You are ready to test the bot.

To test the bot, try saying ping or quick reply message and you should receive a response.

Adding a Custom Knowledge Base to your Bot

So we've finally hit the million dollar question.

As the NuGet package we've imported into our Project is centered around Workspace Bot project. We'll have to make use of Oryzer Studio for development of the Knowledge Base and later export the project into our project's BotResources folder.

For this, I've painstakingly put together a separate article on Creating an On-Premise Offline Bot in C# using Oscova.

You'll have to go through the article and create a simple knowledge base for the Bot using Oryzer Studio. Once you've created your Knowledge Base, there's one nifty little trick you'll have to do.

Every knowledge base project file you export using Oryzer Studio gets suffixed with the .west extension.

Since access to unknown extensions is forbidden by default in an ASP.NET environment, you can either add that extension to your ASP.NET environment (via IIS) or you'll have to rename the extension to .txt or json.

To do so (while saving your Knowledge Base), enclose the name of your Package (with the .txt or json extention) within double quotes and click Save.

Image 6

Once you've exported the Workspace project, right click the BotResource folder (in Visual Studio) Add->Existing Item.. and select the exported file. Then using our example code, you can change the first 2 lines in the static constructor to:

C#
Bot = new OscovaBot();
Bot.ImportWorkspace("Path to File");

Points of Interest

While trying to disect the cosmetics behind the Chat Widget, in an attempt to check if any external resources were being used by the Virtual Chat Agent, I learnt that the Chat Bot Widget uses pure JavaScript and has multiple placeholder values within double {{}} curly brackets. You can also extract the internal script by calling WidgetChannel.ExportResources("Directory-Path-Here"); You may want to tinker around the code for customization.

The knowledge base I've used in this article is a pre-built testing dialog. It just lets the developer test how certain types of responses are displayed within the chat panel.

On a side note, I ain't an ASP.NET pro and I firmly believe that there's gotta be a better approach than using a Web Form as the service URL. WCF would probably be a better way to go about? Either way, I'd rather stick with a simpler approach instead of introducing a complex WCF service that might not work as expected for many readers.

History

  • 31st January, 2015: Initial release
  • 26th August, 2020: Major update
    1. Previous dependencies removed as they became obsolete
    2. Updated the entire article to latest library
    3. Newer screenshots

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior)
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionHow to connect Exported Resource file back to project?? Pin
Member 160633039-Oct-23 21:05
Member 160633039-Oct-23 21:05 
QuestionRuntime Error Pin
Member 1570678614-Jul-22 9:39
Member 1570678614-Jul-22 9:39 
QuestionBot box not displaying over the page content Pin
Member 1563418729-May-22 10:38
Member 1563418729-May-22 10:38 
AnswerRe: Bot box not displaying over the page content Pin
Member 83787193-May-23 5:04
Member 83787193-May-23 5:04 
QuestionRegarding the response generation Pin
ramsha naaz22-May-22 5:34
ramsha naaz22-May-22 5:34 
AnswerRe: Regarding the response generation Pin
Member 1563418729-May-22 10:41
Member 1563418729-May-22 10:41 
QuestionHow to get User defined Message Pin
Member 122425837-Feb-22 6:50
Member 122425837-Feb-22 6:50 
How to make dynamic Expression if user type employee code the it should give response as your employee code is 1224

QuestionChatbot for web app which is written .NET core Pin
unique identifier7-Feb-22 1:08
unique identifier7-Feb-22 1:08 
QuestionAdding your own C# class file instead of .west file as knowledge base Pin
Member 1537255426-Oct-21 17:09
Member 1537255426-Oct-21 17:09 
AnswerRe: Adding your own C# class file instead of .west file as knowledge base Pin
DaveMathews30-Oct-21 1:40
DaveMathews30-Oct-21 1:40 
QuestionCode Does not work at my end. Pin
shwetaliv22-Sep-21 4:38
shwetaliv22-Sep-21 4:38 
QuestionGetting Error while running the project Pin
vinitha venugopal23-Aug-21 20:51
vinitha venugopal23-Aug-21 20:51 
AnswerRe: Getting Error while running the project Pin
DaveMathews29-Aug-21 6:04
DaveMathews29-Aug-21 6:04 
QuestionThere was a problem adding a custom knowledge base Pin
Member 1521147222-May-21 5:47
Member 1521147222-May-21 5:47 
AnswerRe: There was a problem adding a custom knowledge base Pin
DaveMathews29-Aug-21 6:06
DaveMathews29-Aug-21 6:06 
QuestionModify the design of the chatbot Pin
Member 1521133522-May-21 3:44
Member 1521133522-May-21 3:44 
AnswerRe: Modify the design of the chatbot Pin
DaveMathews29-Aug-21 6:12
DaveMathews29-Aug-21 6:12 
QuestionHow to customize the chatbot Pin
Member 1521100122-May-21 0:22
Member 1521100122-May-21 0:22 
AnswerRe: How to customize the chatbot Pin
DaveMathews29-Aug-21 6:14
DaveMathews29-Aug-21 6:14 
QuestionMultiple sesstions Pin
rangak8122-Nov-20 15:26
rangak8122-Nov-20 15:26 
AnswerRe: Multiple sesstions Pin
DaveMathews23-Nov-20 23:02
DaveMathews23-Nov-20 23:02 
GeneralRe: Multiple sesstions Pin
rangak8124-Nov-20 7:50
rangak8124-Nov-20 7:50 
GeneralRe: Multiple sesstions Pin
DaveMathews26-Nov-20 2:41
DaveMathews26-Nov-20 2:41 
QuestionDatabase Pin
Member 149782356-Nov-20 1:45
Member 149782356-Nov-20 1:45 
AnswerRe: Database Pin
DaveMathews23-Nov-20 22:58
DaveMathews23-Nov-20 22:58 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.