Introduction

Live Chat and Chatbot have been a common dilemma amongst business owners because of their diversity. Live Chat allows you to answer customer-query with a human on the other end, using their intellect. A chatbot is a calculated effort to answer the most common questions about your product and services to ensure that your customers are satisfied with their purchase decision.

Introduction

More than 41% of your customers are hoping to talk to a human on the other side. It is more satisfying to know that someone on the other side can empathize with their current emotional state and answer accordingly.

For instance, Zomato uses a hybrid model of Chatbot and Live Chat to address customer queries regarding their food orders. It usually begins with a list of options that lets the software narrow down their query and then assigns an executive on the other end to facilitate redressal.

There are a few software that can help us build a Live Chat, and for this blog, we shall leverage React, Node.js, and Twilio.

What Is Twilio?

Twilio is a CPaaS (Communication Platform as a Service) that leverages the power of online conversation to provide legendary solutions to companies looking to connect with their customers.

Twilio has been highly regarded, primarily because of its cost-effective and efficient solutions.

Since the business arena is changing by leaps and bounds, business owners are always trying to bring up something new to be in touch with their niches. Be it the traditional way by reaching out personally or helping them solve their query via Live Chat – customers appreciate a quick response and remain loyal to the brand.

The combination React, Node.js, and Twilio is a great way of beginning a Live Chat for start-ups and large businesses alike, and its scalability is pocket-friendly.

Before we begin creating the application, we will need some api keys from Twilio. Let’s get those by following the process:

We will need 4 keys from Twilio:

Twilio Account SID

  • Twilio API Key and API Secret: The API key and it’s secret can be generated from the API keys page. Just keep in mind that the secret will be shown only once, so copy and store it at a safe place.

Twilio API Key and API Secret

Twilio Chat Service ID:

Now that we have all the keys with us, we can jump to the coding side.

Step: 1) Let’s create a React app by running npx create-react-app client command in your command line. It will create a react app in the client directory.

Step: 2) Now install packages related to Node.js in the root directory.
npm install express Twilio body-parser dotenv concurrently

Step: 3) Create a .env file in the root directory and place all of the 4 generated keys in it.

Create a .env file

Step: 4) Now we will create a Node.js api to get a unique token for the person who wants to chat. For that create index.js file in the root directory and import the dependencies to run a Node.js server.

create index.js file

Step: 5) Create a /token api by following the official twilio documentation. The final code will look like below. Until now we have a working Node.js api which will return a unique Twilio access token for our use to perform the chat action.

Create a /token api

Step: 6) Now we will create a UI for users to login and perform the chat activity. For that move inside the react directory which we created in the beginning. I will not write the whole code here just to avoid complexity, but basically we will initialize the state with a token, channel and messages. For that install the twilio-chat package. Run below command.

npm install twilio-chat

Step: 7) Moreover we will add a proxy in the React package.json, so that the node.js api can be called directly without involving the url.

add a proxy in the React package.json

Step: 8) Get the token and initialise the chat client by following the documentation. By using the Twilio chat client we can create a channel, join a channel, send a message and fetch all the messages.

Get the token and initialise

Step: 9) Now we will create a start-client file in the root directory to run both client and server concurrently, and add run command in server package.json file.

start-client.js

start-client.js

package.json

package.json

Step: 10) Run npm start in the root directory to start client and server.

Check out the whole code here.

Wrapping Up

React, Node Js, and Twilio is a powerful combination that provides speed and a plethora of storage. When you hire a Node.js developer and pair it up with Twilio, you’re unlocking the world of seamless possibilities with your customers.

Needless to say, Twilio is a cost-effective and reliable communication building solution with the power of authorizing industries to leverage the opportunities brought forth during the lockdown.