Add a ChatBot to your JavaScript app in 10 mins!!

ChatBots are everywhere, they are changing world everyday. Latest bots are built in such a way that it is difficult to tell wether you were talking to a human or a bot.

There are many tools which we can use without any knowledege of machine Learning and deep learning. Yes you heard that right, all you need to do is just get known to that tool environment and you can build a bot which can take jobs of all the selling staff at any pizza-shop. You only need a supervisor to whom bot will transfer the calls whenever it is unable to solve customer queries.

We will be using Dialogflow in this tutorial because It is the most easiest one to get started and have a huge community behind it. Also it is the most powerfull one by the fact that it uses the same algorithms that Google Assistant uses. There are many other tool powered by Amazon and Microsoft which you can explore.

lets dive in to topic:

How can i add a chatbot in my web app. Here we go..

Lets take an Example of a Coffee Shop named Coffee-Mart

Here is the demo :
VIEW demo
CODE Github
you can import .zip file in Dialogflow UI console under settings>Export and Import

Coffee-Mart provides only 5 flavors of coffee:

1. French Vanilla
2. Caramel Macchiato
3. Mocha
4. Hazelnut
5. Chocolate

with 3 different cup sizes:

1. small
2. medium
3. large

Now we want to add a bot in side of the web app through which customers can easily placed there orders without navigating around your website.
just like this

Here we go:

There are some terms to which you have to get familar with, I will be discussing them under the example in detail

• intents
• entities
• contexts

Go to https://dialogflow.com/ and sign in. Then go to Console and click on create a new agent. Name your agent as you want then click CREATE.
If you want you can attach your GCP(Google Cloud Project) to it, GCP is usually preferred for data handling between chatbot and database, but we can use other options too to store our data like AWS using Firebase Cloud Functions.

Intents:

these are the actions performed by the user. a bot contains number of intents. Whenever a user says anything, an intent is targeted.
we create intents for every specific tasks which are to be performed by our bot. Every intent have 2 major components.
Main one is Training Phrases where we add all example texts that user can says.
Second one is Responses where we define the response shown to the user whenever an intent is matched.

For our coffee-Mart example, we will be creating our first intent as shop-hours which will be called whenever a user asks about shop timings.
Click on create intents and enter intent name. Under Training phrases add sample dialogues which user can say when he will be asking about shop timings like these:

Now we will be adding a response under response section:

then click SAVE. We have just created our first intent. You can test it by asking about shop timings on the right side. Note that if you ask shop timings in a different way our agent will reply it accurately. This is because of the deep learning and machine learning algorithms used by Dialogflow . Sounds crazy lets create a second intent.

If you click on Intents from left bar, you will be seeing list of all intents. There is a Default Welcome Intent which we will be modifying now.

Welcome intent is used whenever user greets or try to start conversation by saying 'hi' , 'hello'. There is a range of training phrases examples which you can see. We dont need to modify it but we need to modify it's response as follows:

Try to add more than one responses so that our agent don't sound like a machine. Then click SAVE and test..

Now we will be creating our second(main) Intent named as "coffee-order". This will be used to place orders by user. For now it is a simple intent which will be fired whenever a user sounds like that he want to place order. User can say that 'I want a cup of coffee', but wait which type of coffee and cup size. This is where Entities comes in action..

Entities:

these are used to extract important data from what user says. For example user can say "can i have a cup of Vanilla coffee", in this sentense Vanilla is a seperate entity which provides usefull information for our intent. There are 2 types of entities

1. System Entities: these are built in entities provided by Dialogflow, they usually cover quantity, numbers, time, date and many others.
2. Developer Entities: these are custom built entities which are created for getting specific data.

putting entities in our coffee-order intent

first of all we will be listing all types of entities that will be required for coffee-order

• coffee-cup-size
• coffee-flavor
• delivery-date and delivery-time [system entity]
• number of cups [system entity]

Click on create Entity , named it as 'coffee-cup-size'. Make sure to check on 'Define Synonyms' because user can enter alternatives keywords.
Now we will be adding our cup sizes and there Synonyms one by one in the list. Make sure to add all possible synonyms . Then click SAVE

In the Similar way we create our second entity named 'coffee-flavor'. Passed them our 5 available flavors and there synonyms as follows

Now its time to connect our intent with these 2 entities. System Entities are connected by default so no need to connect them.
Custom Entities are added through training phrases portion under intent declartion.
After creating an intent named as 'coffee-order', we will be adding training phrases of ordering coffee. To connect intents we have to double click on keywords and assign a particular entity to it from the prompted list. Each sentence can have any number of entities.

In this way entities are connected to our intent. But what if user didn't provide any detail about coffee, what if he just says 'i want a coffee'. In such situations agent should prompt for details that were not provided.
To do this we have to check all entities as required under 'Action and parameters' section. now we also have to pass prompt text for each of it under prompt column..

A menu will be opened after clicking on Define Prompts. Here we can input the prompt message for each of the entity.

In this way we have entered prompt message for all 5 entities. Also not that system entities are connected by default but we have to make them required.

Now it's time to provide a response for our order-coffee intent, but this time we want to repeat what user have ordered, this can be done using $keywords from value column under 'Action and parameters'. Using these in response, will be replaced by original data that user provided.

click SAVE and test
Working , if not please provide your issues in comments section.

Now we will be deploying it on web so that we can add it in our javascript app. Go to Integrations and enable web demo, a link will be provided which you can use as a i-frame in your website. There are also other options which you can use easily not covered in this post.

There's a lot more stuff left like
-the contexts which are used to continue our intents
-placing orders in database
-receiving entities from database.
i will be covering them in other posts,

These are some resources from where you can become master in chatbots development:
Official free Dialogflow course
free course on Udemy
Dialogflow Documentation

See you on the next post.
Thanks Alot.