How to create and embed Chat Window to any Webpage (Part-1)

Ever felt a need of chat window on your webpage through which your visitors can ask their queries? Well,it’s implementation is tedious, starting with setup of server and control console where you can have overview of queries, and moreover in case you are a individual, it won’t be possible to handle all queries live, and what’s the point of chat box if  you are going to answer queries later !!

Sounds like a familiar situation, then you should read this tutorial to find solutions starting from listing of free service to creating your own server and a chatbot that can automatically answer queries using Artificial Intelligence, 24 x 7 , and could intimate you when it is unable to answer queries or need manual takeover of chat.

Screen Shot 2017-03-17 at 10.37.49 AM

Tawk.to :

While working on a project related to a chatbot, we faced a challenge to integrate a chat window without messing with HTML and stuff like CSS or JS, and required something like embed code to be pasted directly.So while searching such solutions, stumbled upon this service, Tawk.to.

Tawk.to

This is a free service where upon signup you would receive, a embed code, which you are required to paste directly under Body tag and voila! a chat window becomes live on your webpage and you could monitor all chats from its console.

Screen Shot 2017-03-17 at 10.49.04 AM

Though it’s free, but it was not a feasible solution because it can’t be connected with API and although they claim it 100% free, free comes with some restrictions, like incustomisable chat window where a branding of tawk.to is present and color scheme can’t be modified as per webpage color scheme.

So if you have a CRM team and you don’t bother about branding or don’t mind paying their subscription charges you can consider it.

Now comes our own custom solution to create  a customisable chat window that can be connected to various API like firebase storage service or cognitive services.This solution is itself free but involves costs that I assume you already are incurring, like server hosting and storage service like firebase.

Yeah, it of course requires you to dive into amazing world of HTML,CSS and JS, which some of you may not be willing to do so, but you got to believe that it is going to be lot easier with use of various frameworks and technology like Bootstrap,Node.js.You are absolutely not required to be familiar with any of above mentioned, because all things will be explained as we proceed in this tutorial.

This tutorial is divided into 3 parts, first part just teaches you to setup Node.js development environment and demonstrate the method we are going to implement the chat window in its most basic form, by printing Hello World at client side and log the connection on server side.In second part we would design the chat window with CSS and equip it with a machine learning API that would provide the answers to query of visitors.In third part we are going to build the control console where you can monitor all the ongoing chat sessions and could takeover the chat session from the chatbot anytime.

Let’s start by listing the various techniques, frameworks and services we used:

Node.js :

Screen Shot 2017-03-17 at 10.09.24 AM

Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js’ package ecosystem, npm, is the largest ecosystem of open source libraries in the world.

So for those who didn’t understood these heavy terms, Node.js is an javascript  built to implement and achieve various goals, like to create a server and respond to requests from client. The reason we chose it over others options is its widespread popularity and off the shelve support for almost all API services like Firebase or any other which you are required to use in your project.

Bootstrap :

Screen Shot 2017-03-17 at 10.09.36 AM

Now this is the reason , to be held responsible for those beautiful looking and responsive websites.It is a CSS and JS created as a part of twitter and now is the top project on Github.It provides a readymade set of web components like buttons and input fields that are compatible with all device like mobiles, desktop etc.

Heroku:

Screen Shot 2017-03-17 at 10.09.12 AM

While all that listed above is free and open-source, this service will require you to shell out money if you are going to use it above allowed free usage limit.It is used here just for demonstration and testing purpose, you are not required to subscribe if you already have a server hosting service but those who do not, it can be considered viable solution, as Heroku is a great service for server deployment and frees us from all hassles related to hosting of website.

These were the most basic requirements and further now we would get introduced to new technology, whenever we encounter them.

We start by installing node.js,this would also install npm. From Here, you can find the suitable installation package for the platform you are working on,I am on Mac ,as shown below.

Screen Shot 2017-03-17 at 10.09.24 AM

Once the download is finished, Linux and mac users, open up your Terminal(don’t expect any help for locating it) and windows user open CMD.

Now set your working directory in the folder where you want to start this project,as in this figure we have created a folder on desktop named “node”,and change the directory as shown in fig.

Screen Shot 2017-03-17 at 10.13.00 AM

Screen Shot 2017-03-17 at 10.17.03 AM

npm init

This command is going to create a new file called package.json, and this file is later used by your hosting server to setup the environment remotely.

Enter the name of your app, here it is given talkingbot, remember to provide name without using any capital letters.Further on enter name of script as server.js ,

Screen Shot 2017-03-17 at 10.17.03 AM

and skip other entries if you wish.Add this line as shown below in file later, this is required for later use when we deploy app on remote server, Heroku,  in our case.

"start": "node server.js"

Finally file may look like this depending on your input:

{
 "name": "talkingbot",
 "version": "1.0.0",
 "description": "bot to talk",
 "main": "server.js",
 "scripts": {
 "start": "node server.js"
 },
 "author": "",
 "license": "MIT",
 "dependencies": { }
}

Now We are going to install package called Express, it is used to provide routing and other web services to our app, you can dig up more information from here!.To install it enter

npm install --save express

In above depicted command we have used npm to install package from online repository and we have used  –save option to avoid setting up our environment again at any other location, as now a entry is created in package.json as shown,

{
 "name": "talkingbot",
 "version": "1.0.0",
 "description": "bot to talk",
 "main": "server.js",
 "scripts": {
 "start": "node server.js"
 },
 "author": "",
 "license": "MIT",
 "dependencies": {
    "express": "^4.15.2"
   }
}

Next we are going to install Socket.IO, this an easy implementation for Websockets. Websockets can be understood as a service which notifies of any event that happen either on server or on client.They are better than AJAX and are responsible for making it damn easy to create a dynamic and responsive webpage.

npm install --save socket.io

Now we are going to install JQuery which is again a javascript to make our task easy to create a dynamic webpage.

npm install --save jquery

This part is not essentially necessary as many of you familiar with node.js may point out but we are creating it as a fellback method, in case CDN services are down.

As for now we have created environment for node server, now create a new file named server.js in folder we are working and write code in it as shown below:

var express=require('express');
var app=express();
var http=require('http').Server(app);
var io=require('socket.io')(http);
var port = process.env.PORT || 3000;
app.use(express.static(__dirname + '/assets')); 
app.get('/', function(req,res){
 res.sendFile(__dirname +'/index.html');
});
io.on('connection',function(socket){
 console.log('a user connected');
socket.on('disconnect',function(){
 console.log('user disconnected');
});
});
http.listen(port, function(){
 console.log('Listening on, *:%d',port);
});

Now let’s try to understand things we have written here

var express=require('express');
var app=express();
var http=require('http').Server(app);
var io=require('socket.io')(http);
var port = process.env.PORT || 3000;

All these var initiate the required the packages that are express and socket.io

app.get('/', function(req,res){
 res.sendFile(__dirname +'/index1.html');
});

This function provides the routing service to page and serves the file mentioned in it to the requesting client.

app.use(express.static(__dirname + '/assets'));

This line serves the assets like CSS file, images and JS files to the client, from the folder named “assets” present in root directory, node, we created above.

io.on('connection',function(socket){
 console.log('a user connected');
socket.on('disconnect',function(){
 console.log('user disconnected');
});
});

This line create a notification to the console whenever a new client is connected to our service or gets disconnected.

http.listen(port, function(){
 console.log('Listening on, *:%d',port);
});

This makes our server listen to this port for any incoming requests, default here set is, 3000.

Now create a new file called index.html in folder node,we are keeping it simple for this part of article and just put following code in it

Screen Shot 2017-03-17 at 10.35.13 AM

All these line are doing is holy ritual that all developer have gone through, yes , printing  Hello World.

Now save this file and its time to conclude this part of tutorial by executing this all coding exercise we have done above.

Go to your terminal and with present working directory set to folder where we have set up this code i.e. node, execute this line

node server.js

your output should be some thing like this

Screen Shot 2017-03-17 at 10.23.54 AM

and now launch your favourite web browser and enter localhost:3000, and you should see Hello World waiting for you and following entry in your terminal window.

Screen Shot 2017-03-17 at 10.26.57 AM

Screen Shot 2017-03-17 at 10.24.17 AM

That’s all for this part of tutorial and ideally it should take you hardly 10-20 minutes depending on your proficiency, in next part we would be learning how to serve dynamic webpage for chatting and connect to api if required.

Thanks for reading.If you have any queries or suggestion, please contact using this form.We respect your privacy, so Email is not mandatory but if you do expect reply, please mention valid contact method.