What is Chatwoot and how to integrate it on your website?
Tags: webdev, chat, automation, tutorial
Published: 2022-03-28 08:19:19

**Live chat** support is one of the advanced support channels these days. There are lots of live chat services out there. But in this blog, we will be learning about Chatwoot and how to set up and integrate it on your website.

## What is Chatwoot?

![chatwoot.com](https://cdn.hashnode.com/res/hashnode/image/upload/v1646893042645/IVzd0G3Yy.png)

**[Chatwoot](https://www.chatwoot.com)** is an open-source alternative to [Intercom](https://www.intercom.com), [Zendesk](https://www.zendesk.com), [HubSpot](https://www.hubspot.com) etc. Not just live chat, it has support for multiple channels like Email, Facebook page, Twitter handle, WhatsApp etc.

## Why Chatwoot? 
You can use it for free by hosting on your own infrastructure. It has great features and integrations. All multiple channels mentioned above can be viewed in a single view, hence it's easy to switch between channels.

**Features overview:**
- **Shared inbox** - Collaboration made easy
- **Live chat**
- **Channels** - Multiple channels - Single view
- **Automations** - Automate repetitive tasks
- **Chatbots** - Build chatbots with Dialogflow and connect to your inbox
- **Mobile apps(IOS & Android)** - Engage with customers instantly from anywhere
- **Integrations** - Integrate with Slack, Wordpress, Dialogflow and Rasa.

## Here's what we are going to make

![chatwoot demo](https://cdn.hashnode.com/res/hashnode/image/upload/v1646907222347/9GeV7W7JG_.png)

I integrated Chatwoot live chat widget on my own website, try it out - [itsrakesh.co](https://itsrakesh.co)

## How to integrate Chatwoot?

### Prerequisites
- Create a [Chatwoot](https://app.chatwoot.com/app/auth/signup) account if you don't have one already.
- A website

### Step 1 - Setting up profile
After you create an account, you will be taken to the dashboard. From there click on your **profile icon** on the bottom left and then click on **Profile Settings**.

![chatwoot dashboard](https://cdn.hashnode.com/res/hashnode/image/upload/v1646896113949/XQOlfF95p.png)

Update your profile picture and display name - these details will be shown in all the communication channels.

### Step 2 - Create a website channel
Now we have to create a channel. This is where all the communication happens.
- Click on **Settings** -> **Inboxes** -> **Add Inbox**.

![Navigation to "Add Inbox"](https://cdn.hashnode.com/res/hashnode/image/upload/v1646898278412/OMuqCEqzx.png)

- From the list of channels, choose **Website**.

![website channel](https://cdn.hashnode.com/res/hashnode/image/upload/v1646898498631/eIyjVP47w.png)

- Next, fill in your website details and configure the widget however you want. Click on **Create inbox**.

**Tip**: For domain name, if you are testing locally, just write `localhost`.

![website details page](https://cdn.hashnode.com/res/hashnode/image/upload/v1646908138606/mbZhYjNiZ.png)

- Choose agents that you want to give access to your inbox. If there are no extra agents, then just add yourself.
- That's it! Copy the code given and store it somewhere. And then click on **Take me there**.

![copy the code](https://cdn.hashnode.com/res/hashnode/image/upload/v1646899913235/epNLYuXn9.png)

### Step 3 - Integrate the widget on your website
- To feel fancy I downloaded a bootstrap template from [here](https://startbootstrap.com/theme/agency)(_Free_).

- Now, all you have to do is put that copied `script` from the above step in your `index.html` file above closing `body` tag.

- If you are using Content Management System like WordPress, research on google on how to insert code.

Here's how our widget appears on successful installation-

![installed widget](https://cdn.hashnode.com/res/hashnode/image/upload/v1646908682903/mVQ1_Lr24.png)

![open view of widget](https://cdn.hashnode.com/res/hashnode/image/upload/v1646908752437/SpqA2uln7.png)

**Tip**: You can also download Chatwoot [IOS](https://apps.apple.com/app/id1495796682)/[Android](https://play.google.com/store/apps/details?id=com.chatwoot.app&hl=en) app to manage conversations from anywhere.

GitHub repository for reference - [here](https://github.com/RakeshPotnuru/chatwoot-tutorial)

---

Some cool things you should explore
- **Labels** - Categorize conversations with labels like important, pricing related, product related etc.., so that you can quickly assign them to the right agent.

To add a label, go to **Settings** -> **Labels** -> **Add label**

- **Automation** - Set some automation rules to avoid repetitive tasks.

To add automation rules, go to **Settings** -> **Automation** -> **Add Automation Rule**

- **Canned Responses** - Quickly reply to common messages by creating reply templates. Just type "/" to pick a reply from saved templates and quickly reply.

To add canned responses, go to **Settings** -> **Canned Responses** -> **Add Canned Response**

- **Integrations** - Chatwoot currently provides slack and webhooks integrations.

To get started with integrations, go to **Settings** -> **Integrations** -> Choose what you want.

- **Dialogflow** - Use the power of Natural Language Processing. Build chatbots with Dialogflow and connect to your inbox to better handle communications. 

To add Dialogflow, go to **Settings** -> **Applications** -> **Configure** Dialogflow -> **Add a new hook**

That's it! See how powerful Chatwoot is and all the functionalities it provides for free.

---

Do comment if you have any doubts.
Follow me for more weekly awesomeness 🤡.