Integrating Chatwoot in your web dev project

Ever thought of implementing a chatbot or live chat option in your website, but didn’t know the specific tool, or method on how to implement a chatbot, or just writing 100s of lines of code is tiresome for you? Don’t worry, Chatwoot is here to save the day!

In this tutorial, we are going to learn how to integrate a live chat feature into your web application with Chatwoot. For this tutorial I’ll be using a simple weather app created using HTML, CSS and JavaScript which is deployed on Netlify.

So what is Chatwoot?

Chatwoot is a customer support tool for instant messaging channels that can assist businesses in providing exceptional customer service via an omnichannel inbox. Chatwoot provides you with all of the tools you need to manage conversations, build relationships, and delight your customers all in one place. I found out about this while going through free Open-Source live chat services, and didn’t know how to implement a chatbot from scratch. This service has been very useful for me.

Chatwoot's open source software can also be used to integrate Facebook, Twitter, and WhatsApp channel integrations, website live chats, API channels, and mobile apps.

Why do you need a chatbot?

Chatbots assist customers in getting from point A to point B as quickly and smoothly as possible without feeling left behind or disoriented. Consider a chatbot to be a small guide that assists customers in navigating their way through the information on your website. Chatbots are virtual assistants for websites.

They help in solving common troubleshooting problems which users might face while browsing through a website. It is cost effective as you don’t have to appoint an agent for every single complaint/problem. It improves overall experience of a website.

Integrating the live chat widget

As mentioned above, we will be using a simple weather app, you can check the GitHub repository here. You might be asking what will be the use of a chatbot in simple weather app. Well this project uses OpenCageData API by default ****to fetch live location of the user, sometimes user may have blocked location access, which prevents the app from working or if someone finds a bug in the code, they can report it using live chat interaction.

Let’s get into implementation of chatbot!!

• First you would need to create an account on Chatwoot. Visit this link. Use enterprise link to create an account.

• Here’s how your dashboard will look if you successfully create an account.

• Now to integrate the live chat feature, we would select inbox to get embedded code and we would select Website as our channel since we want to integrate our chatbot there.

• On Create Inbox page, we would have to fill website details. Make sure you have a valid website URL in hand before proceeding further. In our case it would be: https://weather-geo.netlify.app/. You can customize heading, channel greeting, tagline, add links to make your chatbot feel more personal. Finally click on Create Inbox.

• On Add Agents page, you would have to select a member of your project’s support staff who would act as site responder. In this case it would be me.

• Voila!! Our inbox is ready. Copy the JavaScript code, this would come in handy in our next step. A website token is generated and it is unique to every user, we will hide that so people won’t misuse the token.

• Open your favorite text editor, in my case it’s VS Code, and create a new file called chatwoot.js . Paste the copied code snippet in that file.

• Add script tag containing the source location of chatwoot.js in your index.html file.

<script src="src/chatwoot.js"></script>

• Now to hide the website token, create a config.js file. I had two API keys already stored in that file for weather and live location, so I’ll be editing that. Make sure to add config.js in .gitignore file to avoid your API keys to be pushed in repository.

• Now in your chatwoot.js file, to export the TOKEN, use config.CHATWOOT_KEY.

• You have implement live chat feature successfully! See your implementation locally on Live Server.

• Now in Chatwoot dashboard, you would see a new inbox message. You can either reply, or mark it as resolved after you are done testing.

• We are seeing this work locally, now if you want to host it on platform like Netlify, you would have to follow a few more steps. After linking your repository in Netlify app, you would need to build config.js file which contain our API keys and TOKEN. To do that, go to Netlify>Deploy>Deploy Settings and edit Build Command.

cd src && echo -e "var config = {\nWEATHER_API : 'API_KEY',\nGEOLOCATION_API : 'API_KEY',\nCHATWOOT_KEY: 'WEBSITE_TOKEN'\n}" > config.js

Let me brief you about this, in src folder, create a config.js file with following keys in correct order at the time of deployment.

You are now finally done with basic implementation of Chatwoot on your website!! Afterwards, we can now continue with our chat successfully.

Conclusion

In this post, we learnt about basic implementation of Chatwoot and it’s features. You can further add more features like campaigns, Dialogflow or Raas implementation for automated messages as chatbot. This tutorial just scratched the surface of Chatwoot service.

To know more about Chatwoot, visit here.

Happy Coding!!</>