Build A Powerful Live Chat In 100 Lines Of Code With Twilio

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.
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: We can find the account SID from Twilio Account Console
- 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 Chat Service ID: The chat service ID can be generated from the Programmable Chat Dashboard.
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.
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.
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.
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.
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.
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
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.
It varies from customer to customer, based on their usage. For development purposes, they provide free credits which can last for your whole project development. For business purposes, they charge $0.03 per active user per month and $0.25 for storage per GB per month. Click here to check more details.
Twilio provides many services, for instance, programmable voice, programmable SMS, API for WhatsApp, programmable video, Notify (push notification service), Verify (for OTP authentication), etc. All of these services can be integrated with our project to make it more user friendly and interactive. We will see more about these APIs and SDKs in some other article, till then stay safe and stick around.
Neetin Solanki
Hello Ovesh,
For Angular + Laravel project, you can try two ways.
1) You can install ‘twilio-chat’ package on Angular side
> https://www.npmjs.com/package/twilio-chat
2) You can handle it on Laravel side also by following official twilio guide here,
> https://www.twilio.com/blog/add-chat-laravel-php-app-twilio-chat
If you implement it on Laravel side then, you’ll have to manage the data on backend and will have to send it to the angular by making api call.
Thank you for reading this article!
ovesh kazi
can i user this same as in my angular project for create chat-web-app, actually I’m using laravel API and twilio secret token use in my API and chat create in my angular project, so how can I create live chat using angular nad laravel APi using twilio, plz suggest me some code or logic or idea and plz response as soon as possible
Comments are closed.