Connect your Chatwoot to Netlify integration in 10 minutes

Published in

Geek Culture

5 min readMay 25, 2022

Implement a functional chatbot without writing 1000 lines of code!

Did it ever strike your mind to implement a conversational chatbot or a chat option on your website? But alas! You were not aware of an amazing tool that would help you to implement a functional chatbot without writing 1000 lines of code! If that’s the case, you need not worry, as Chatwoot is here as an excellent solution!

So, what is Chatwoot?

In a nutshell, Chatwoot is a customer support tool for instant messaging channels which can help businesses to provide exceptional customer support.

Chatwoot is predominantly a customer engagement suite with a range of features. Keep track of conversations across different communication platforms, automate bot conversations, etc. The software can significantly decrease your time and effort to keep track of your customers on the go.

Some of the highlights of the features that Chatwoot provides to carve its niche in the software and business industry are its shared inbox, cloud compatibility, privacy, custom menus, and multiple integrations with platforms like Rasa, DialogFlow, etc.

Read this blog till the end to explore how to integrate a live chat feature of Chatwoot into your web application deployed on Netlify. I’ll be using a simple weather app created using HTML, CSS and JavaScript, and some open-source APIs.

Why do you need a chatbot?

More and more customers expect businesses to be available and responsive online. Having a communications system with your customers and prospects shall help you build a human connection, understand them better, and serve them faster.

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 solve common troubleshooting problems that users might face while browsing through a website. It is cost-effective as you don’t have to appoint a customer care agent. Long story short, it improves the overall experience of a website.

How to Connect your Chatwoot to Netlify Website?

Let us quickly start by implementing the Chatwoot tool.

Create a new account on Chatwoot by following this link, or login into your existing account.
Enter your details and click on Submit.

Once you are logged in, the main Chatwoot Dashboard would look something like the below snapshot.

Now click on +New Inbox option in the left pane. It shows multiple channels where we want to integrate our Chatbot feature.

Select the Website option as we want to deploy the chatbot in our weather website on Netlify. Fill in your website details and customise your chatbot colour and greetings.

Click on Create Inbox. On Add Agents page, you would have to select a few members of your project’s support staff who would act as site responder. For this blog, that would be me.

Yay!! Our inbox is ready. Copy the JavaScript code, this would come 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.

Let’s now put this piece of code in our original weather app!

Clone the weather app repo from GitHub and open it in your code editor.
Paste the Inbox code created by Chatwoot in previous step in the chatwoot.js 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. 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.
And that’s it! You have successfully implemented the live chat feature on your website! Refresh to see your implementation locally on Live Server.

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 then edit Build Command.

Paste the following in Build Command section: cd src && echo -e "var config = {\nWEATHER_API : 'API_KEY',\nGEOLOCATION_API : 'API_KEY',\nCHATWOOT_KEY: 'WEBSITE_TOKEN'\n}" > config.js
Click on Save and then Deploy your web app. Click on the site link generated and check the bot feature live!

You are now finally done with basic implementation of Chatwoot on your website hosted on Netlify!

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.

One-in-all Conversations Inbox on Chatwoot

Conclusion

In this blog, we learnt about basic integration of Chatwoot to your Netlify website. You can further add more features like campaigns, Dialogflow or Rasa implementation for automated messages as chatbot.

To learn more about Chatwoot visit here.

Thanks for reading till the end! Hope it helps… 👩‍💻

Feel free to get in touch with me for your queries or just to say Hi!👇

Chandrika Deb | Software Developer | Content Freelancer

Chandrika Deb is a Software Developer at Amdocs, who loves learning new things and helping tech beginners.

chandrikadeb7.github.io