How to Add an Automated Live Chat to an ASP.NET Website

Step-by-Step Guide

1. 1

   Step 1: Import SynChat library from NuGet.

   In your ASP Website project click Tools->NuGet Package Manager->Package Manager Console and type Install-Package SynChat.
   
   This will import the SynChat class library from NuGet along with it's dependency library. , Right click your project and click Add->New Item.. and select Web Form.
   
   Name this new web form "ChatService.aspx".
   
   Now double click the file and remove all the lines of code except the first line., Replace the www.example.com string with your website address. using System; using Syn.Automation.Chat; namespace Automated_Live_Chat_Demo { public partial class ChatService :
   System.Web.UI.Page { private static readonly ChatAgent Agent; static ChatService() { Agent = new ChatAgent { ServiceUrl = "http://www.example.com/ChatService.aspx"
   
   ResourceUrl = "http://www.example.com/Assistant"
   
   Name = "Maya"
   
   Title = "Syn Web Assistant"
   
   Intro = "Hi I am Maya, I am here to answer your questions."
   
   InputText = "What can I help you with?"
   
   Footer = "Syn"
   
   FooterLink = "http://www.example.com"
   
   RestartId = "restart"
   
   PackageFileName = "Package.txt" }; } protected void Page_Load(object sender, EventArgs e) { Agent.Process(Request, Response); } } } , Once you have created the folder add the image files required to give your agent a Female avatar.
   
   These images can be found in the GitHub example project cited below., Google "Syn Chatbot Studio" and download the program.
   
   Select File->New->Project and fill in the details required.
   
   Make sure you select Syn Web Assistant as the project template.For more details on working with SIML, google "Synthetic Intelligence Markup Language"
   
   and check the Quick Start tutorial on the official website., By default Syn Chatbot Studio will save the file with the extension .simlpk which stands for SIML Package however if this file is to be referenced from a URL its mimetype should be accessible therefore change the extension to .txt as shown in the image above., Right click the Assistant folder and select Add->Existing Item.. and select the Package.txt file., To do so paste the following coding just above the </form> tag element in your Master Page's HTML code and change www.example.com with your website address. <script type="text/javascript"> (function () { var scriptElement = document.createElement('script'); scriptElement.type = 'text/javascript'; scriptElement.async = true; scriptElement.src = 'http://www.example.com/ChatService.aspx?Get=Script'; (document.getElementsByTagName('head')|| document.getElementsByTagName('body')).appendChild(scriptElement); })(); </script>
   
   ,
2. 2

   Step 2: Add a new Web Form to your project.

3. 3

   Step 3: Right Click the above file and select View Code and add the following.

4. 4

   Step 4: Add a new folder to the project and name it "Assistant".

5. 5

   Step 5: Create a knowledge base for your Virtual Agent.

6. 6

   Step 6: Export the knowledge base to an SIML Package but change the extension.

7. 7

   Step 7: Add the created package file to the Assistant folder.

8. 8

   Step 8: Add a simple JavaScript to display the Virtual Chat agent on your website.

9. 9

   Step 9: Run your website project and check if the Virtual Chat Agent's Window is visible.

10. 10

    Step 10: Chat with the Virtual Agent and check if you are presented with the desired responses.

Detailed Guide

About the Author