How to Make an Online Assistance by Using JavaScript Chatterbot

(This post is archived and may be outdated)

In previous post, I talked about a chatterbot called "Anna" who will answer your question about IKEA and bring you to the pages you want to visit.

Today let's try to build our online assistance to help visiting the website. Here is my requirement of the online assistance. Basically, the chatterbot can show me the pages I want to visit. For example, if I type "Please show me the company history". Then the page will got to "Company_history.htm".

There are several chatterbot program that can be download and used on the web. Most of them need sever-side script such as PHP / ASP and a database. Here I used a Javascript chatterbot that I talked in previous post about "Build your own chatterbot". However it need some code modification to make it work as a navigator and online assistance of your website.

First, you need to download the script from Alkali's Website or here. Then include the script within HEAD section.

Afterwards we need to an onLoad statement in the BODY tag:

  <body onLoad="document.AI.BOT.value = beginPhrase;">

and the chat box for conversation:

<form name=AI onSubmit="return doAI();">
    Chatbot:<br>
    <textarea cols=50 rows=4 name=Bot wrap=virtual></textarea>


    You:<br>
    <input type=text size=50 name=User>
</form>

Of course you can modify the style to make it user-friendly. For example you can put your avatar image there or some other decorations.

Here we come to the main point.

Open the chatbot.js file and you will see a guideline to make your own respond:

//Prefixes:
//  >    Display this text to change the subject or as a response.
//  !    Display this text only as a response.
//  ^    Evaluate this JavaScript expression (placed below > or !).
//  &    Require one of these words to match a response.
//  *    Provide these words as context.
Here we need to use "^" prefix to execute javascript such as change webpage. (so that the chatbot can guide the customer to the webpage they want to go)

The pattern will look like it:

"I","&YEARS;","&OLD;",
"!Wow, that's old!",
"HOW","&OLD;","YOU","YOUR","&AGE;",
"!I do not remember my age.",

// add here (anywhere between the conversation pairs)
"&HELP;","&SITEMAP;","SHOW",
"!Get lost? Let me show you the sitemap now.",
"^location.href='sitemap.htm'",

//...other conversation pairs

The ^ statement will always follows an ! statement. The chatbot answers the ! statement and execute the ^ statement at the same time.

You can add as many pairs of keywords and responds script as you want here.

You may think your chatterbot can work fine now. Actually it is not. You can try chat with your bot now with newly add keywords. You will find that your chatbot responds well on the first time but on the second times the chatbot will respond another thing rather then your preset respond. And of cource the second time your navigation script will not run.

This is because the javascript chatterbot is designed to keep the previous chat state and it never repeats the same respond twice.

PS. This problem appeared if the page navigate to another page without reset your chatterbot state. For example, you call Ajax called but not a whole page refresh at the respond.

In Part 2, I will suggest some methods to avoid it. Although the solution is not so good

Published on 2008-05-06 by Makzan. More articles like this:

Previous ← Build Your Own Chatbot
Next → Quick and Handy Way to Toggle Fullscreen Terminal in Mac OSX