How to build a chatbot that auto responds

Siva Kishore G

Posted : 13 Mar 2022
Modified : 31 Jul 2023

Expert Developers

What is a chatbot?

A chatbot is a robot predefined with a certain set of commands to interact with users. Sometimes, these bots are coupled with AI (artificial intelligence) so that it understands the user's query and responds accordingly. They decrease human effort and guide the user in the right direction. Mostly they are implemented on the websites.

Chatbot Use Cases

A chatbot's primary function is to interact with users. Back in the days, companies would hire someone to do so. But with the advent of AI, and other techniques, these bots are filling up those positions quickly and moreover, they are available all the time since it's just a computer responding to the user. It all boils down to how it is implemented whether simply going through a predefined script or coupled with AI to generate answers.

For the scope of this tutorial, we will go with a set of predefined questions and answers. Lets design the chatbot for a "General contractors" company website

Simple Chatbot

The current implementation is very simple and it's an in-browser chatbot which means, the Q&A will be loaded into the page instantly along with the chatbot. There is no server integration. This is the easiest implementation and can be upgraded to carry the messages to the server via ajax or fetch or by sockets ( socket io).

Chatbot window UI in website

The user interface consists of two components. Minimized and maximized.

Chatbot ICON floating at bottom right
Chat window with a header, body of certain height and footer where user can input
A three dots animation to show the message being received
Close chat confirm window

Logic

We will start with the chat window minimized where only a small floating icon (UI #1) will be shown to the user. Upon clicking it, the icon will disappear and the chat window will appear (UI #2). Lets create an object of objects which will act as an answer lookup for our bot.

View code

var qa = {
  "intro" : {
    "answer" : "Hi. This is BotPro. How may I assist you. Please choose from the options below",
    "related" : ["services","contact","pricing"]
  },
  "pricing" : {
    "answer" : "We have multiple pricing options. Choose as you wish",
    "related" : ["contact"]
  },
  "services" : {
    "answer" : "We offer roofing, siding and flooring services",
    "related" : ["roofing","siding","flooring"]
  },
  "roofing" : {
    "answer" : "Professional roofer in all connecticut. We will give you the quote on the job site",
    "related" : ["siding","flooring","quote"]
  },
  "siding" : {
    "answer" : "Siding is our main business and it's relatively cost effective with our solution",
    "related" : ["roofing","flooring","quote"]
  },
  "flooring" : {
    "answer" : "Currently going unser registration. Check back with us later.",
    "related" : ["siding","roofing","call"]
  },
  "call" : {
    "answer" : "Call us at 1-800-123-1234 if you have any questions",
    "related" : ["services","contact"]
  },
  "contact" : {
    "answer" : "We are at 123 broad st, portvan, conigan - 345091 ",
    "related" : ["services","contact"]
  },
  "quote" : {
    "answer" : "Call us for a free quotation"
  },
}

Conditions

Post message when the user inputs. Same should happen when the send button is pressed.
Clear the input box after #1
Run the message through a list of foul words to determine if the user is using foul words and warn him/her against it
After #3, check the message if it consists of the questions we prepared and if it does, respond with the answer, if the question is not found, respond with all the applicable question to select from
When the user closes the chat, confirm it with a confirm box (UI #4)

Download Full Code

Bot Icon

Conclusion

This is by far the simplest bot I've designed. At large companies, they use AI (artificial intelligence) to provide answers and when the bot fails, it takes over to a live agent. By then the agent already knows what the user wants. In other words, the bot serves as an onboarding agent. Think of how much time and manpower will be saved with this type of ability.

Some Interesting Facts About Chatbots

According to recent stats, chatbots are the fastest growing technology. 73% of the users interact with chats and is the most favorite goto method of communication, especially for the millennials.

Expected a market share of $987 million by the year 2023.
60% of the users wanted a quick answer for their queries.
46% of the users find it the most efficient form of communication.
22% of the users don't like talking on the phone! Surprising isn't it?
Improved efficiency of company's query redirection by a whopping 83%.
Facebook has an active 300K chatbots.
#1 tool for providing answers very quickly.
Chatbots play a crucial role in e-commerce and account for 34% of online stores adoption.
Chatbots provide 55% more high quality leads compared to websites with no chatbots / Live chat.
Reduced business operation costs by 30%.

Chatbot builder

Create your own chatbot. Prepare questions, attach relations and download the html code. Also includes 3 UI designs to start with. Must have bootstrap 5 and fontawesome in your project.

BotPro