Why Chatwoot is My Favorite Open Source Project? Integrations, Integrations, and Integrations.

Full article available on Aviyel for free (leave a like here before you check it out on Aviyel)

When you’re a business owner or you work in a large team, you’ll probably be overwhelmed by the number of messages that you receive from customers via mail, Telegram, Twitter, Facebook (recently rebranded to Meta) Messenger, and so on. Chatwoot solves this problem by integrating all your social media platforms into a single dashboard so you can connect with your customers from one app. It is an open-source project so you can be assured with engineers working 24/7 to improve this product from all over the world. Moreover, the live chat feature allows your agents to communicate with the customers instantly, leaving no chance for user dissatisfaction.

Plus, it ensures that all customers from all different types of social media would not be neglected. This is important because the success of a business in my opinion starts with you taking care of the customer and working backward.

You never build fancy software without knowing whether the customers need it first.

In this post, I’ll take you through Chatwoot’s architecture and how you can integrate the self-hosting customer engagement platform with your social media channels.

Chatwoot Architecture

To know more, you may refer to the architecture written in official docs. To run Chatwoot in production (means to deploy it live for public use), you need these components:

• Chatwoot web servers (built using Ruby or Node.js)
• Chatwoot workers (such as Sidekiq for Ruby)
• PostgreSQL database
• Email service (such as SendGrid by Twilio)
• Object storage (such as AWS S3)

If you have got these parts in your application (which might look complicated in my article but I can assure you it’s not), Chatwoot will do its magic and allow you to seamlessly interact with a whole lot of customers effortlessly. There are two recommended methods for deploying Chatwoot which I don’t want to write here because they’re documented clearly in the official docs, and they are using Heroku or Caprover. You can also use Docker which may get slightly complicated for beginners, but if you are a little friendly towards docker-compose and Nginx, you’re good to go.

Why Choose Chatwoot?

Chatwoot doesn’t have any bloatware features, but only the ones you need. Here are some of the features of Chatwoot that bought me in:

• Integrations with platforms that businesses really use in 2021 include Slack, Dialogflow, Calendly, Shopify, WooCommerce, WordPress, Stripe, FullContact, and so on.
• Create campaigns: That means when you have a lot of contacts (customers) saved, you can select a list of users and send a one-time message such as festive greetings, promotions, etc. On the other hand, you can also create ongoing campaigns where Chatwoot would take a much personalized approach where you can send a certain message if a user stayed on your page for x minutes (and there’s a lot of variations of conditions you can create) by just clicking a couple of buttons in the simple UI.

• Canned responses: Basically, you don’t want to manually type out the repetitive responses to your customers. So you can set type ‘/’ followed by a shortcode which you will set such as “greet” to automatically fill the input box with the long greeting message.
• Interactive messages: With this, your customers wouldn’t only get text messages but also interactive ones where they can make selections, order a product, and so on in the chatbox itself.

• And a lot of other features like managing contacts easily, conversation workflow (users say something like ‘hi’ and a certain reply is given and the conversation is carried in this manner without you having to answer them), multilingual support, etc.

Integrations in Chatwoot

First, let me show you how to integrate all your social media to Chatwoot’s powerful dashboard.

• First, register to Chatwoot here. I believe there’s no need for me to explain this step-by-step as it could bore you (and I’m sure you would know how to register). You can also contribute to Chatwoot on Github easily.

• Upon registration, you will see your dashboard. If this dashboard looks complicated, trust me, this looks very clean compared to other alternatives to Chatwoot. Click “Inboxes” in the column to your left and then click “Integrations”.
• You’ll see options(s) such as Slack integrations and so on. As of writing this article, I only saw the Slack option being displayed as the other platforms are set to be integrated in the near future. If you want to integrate your Slack account, click connect for the Slack option. You can also use Chatwoot with Rasa.
• Enter your Slack URL in the displayed form, grant the required permission, and that’s it.

With this, you can sync your Slack messages with Chatwoot in its dashboard. To connect with WhatsApp, Twitter, or other social platforms, you should click the same “Inboxes” button like in the previous step and then click “Add Inbox”. The rest of the steps are easy, just provide the information that is asked. For instance, if you select WhatsApp, you need to provide your phone number, Twilio Account SID, and a little more data and you’re good to go.

Installing Chatwoot to Your System

Now, I’ll explain how to install Chatwoot using Next.js because I believe that Next.js is most likely to be used by companies in 2021 to build websites as it has a bunch of powerful features such out of the box as code-splitting, server-side rendering, image optimization, etc.

• Anyway, just like previous instructions that I’ve written in this article, click the same “Inboxes” button in the left column on your Chatwoot app and click “Add Inbox”. Then click “Website” because you want to integrate Chatwoot to your site.

• Fill up the necessary details such as your website URL, and so on. At the end of the step, you’ll be given a short script based on the information you’ve given like the following image. Refer to this source.

• Remember the script Chatwoot gave you? In your project folder, add a file named chatwoot.js or whatever you want to call and paste the script (without script tag because we’re using Next.js, not vanilla JavaScript).
• Go to index.js file and add the script. Here’s a simple template.

import Script from "next/script";
​​function Home() {
​​ return (
​​  <>
​​       <h1>
         All implementation stay as usual, but just add the script 
         below
       </h1>
​​    <Script src="/chatwoot.js" />
​​  </>
​​ );
​​}
​​export default Home;

Done. You’ll see a clickable blue button at the bottom right of your site which will pull up Chatwoot’s chat box and Chatwoot will be up and running in no time.

That’s all for today. As you can see, Chatwoot is very powerful and convenient to use. Even if you don’t need this tool right now, do remember it as you’ll surely need it in the future when you build bigger projects or work in a larger team. If you find this article useful, drop a like and share this with your friends and the tech community that you’re in.

Also, Aviyel is partnering with Chatwoot to scale open source projects within communities. You can checkout Aviyel discussions and follow their Twitter space.