Chatwoot (a zendesk open source alternative) with Next js

Supporting clients from website contact is hard right? If you are an eCommerce owner then you can relate to this quickly easily. A lot of questions/complaints come every day. Tracking them, replying to them is hard. Especially if you have a medium-big team then this is harder to maintain. But good thing there are some solutions to it. Today we are going to into chatwoot. Chatwoot going to make this process easier for you! How?

Chatwoot is easy to add to your website (Saves a lot of time to setup + developer bill)
Chatwoot helps to manage team easily (Saves a ton of time)
Managing support tickets easily (Saves a lot of time)
You can integrate chatbot here (AI opportunities)
You can manage multiple projects from one dashboard (Easy to manage)

There is also a lot of feature in chatwoot. So we are going to explore chatwoot today with the

How to start?
- First, we need to create chatwoot project
- We need to add the chatwoot in our next js website

Chatwood Project Creation

There is two way to start with chatwoot

1. Create an account on their website
2. Self-hosted chatwoot

For an easier way, I’ll show today how you can create your account with chatwoot and add this to your website within 10 mins. Amazing right?

Creating an account is pretty straightforward and easy. You’ll get a confirmation email too. You just need a valid email to start.

Once you logged into it, you’ll find some more details on this page

If you have a team you can invite your team members and you can add multiple teams. Pretty good right? All team questions can be managed from here. Look into the pricing before adding multiple people. There is a free version but it has a limit -

Now, lets start our journey to integrate this amazing service with our website -

We’ll create an inbox first then choose whatever service you want to add. For now, we’ll just go with the website

Here I’m doing an example for portfolio. I’m adding my website domain here, you’ll put your details here (as per the project)

Once the create inbox part is complete then click on the add agents

here I can add only me as an agent because I didn’t add any team members. If you add team-member then you’ll see other people here too!

Once you assign the agent successfully, the next page should be like this. You can copy this into a safe place to use later. (I’m going to delete my project after the tutorial, so get your own code) If you forgot to save the code here anyhow. I have a solution for you too!

Once the inbox is created you’ll see your project under the Inboxes tab. I can see my Portfolio project there. To get the code again I’ll click on the Inboxes

This will lead to

This page where I can see the settings of the portfolio and if I’ve multiple inbox projects then I can see all of them here. Now click on the settings

From here we can change any data we want. We can add campaigns to it + business hours. You can modify as much as you want.

If you go to the configuration tab then you can find the script code for adding to your website. If you have HTML, CSS, and vanilla javascript website then you can just add this script in HTML body and it’ll work fine. Here an example code -


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Chatwoot integration</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .main-body {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }
      .heading {
        font-size: 40px;
      }
      .helper-text {
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <div class="main-body">
      <h1 class="heading">Chatwoot Integration by nerdjfpb</h1>
      <p class="helper-text">Click in chat icon to contact with us</p>
    </div>
    <!-- Adding chatwoot in the website -->
    <script>
      (function (d, t) {
        var BASE_URL = "https://app.chatwoot.com";
        var g = d.createElement(t),
          s = d.getElementsByTagName(t)[0];
        g.src = BASE_URL + "/packs/js/sdk.js";
        s.parentNode.insertBefore(g, s);
        g.onload = function () {
          window.chatwootSDK.run({
            websiteToken: "UiK961dgutY7mskgTzNDDszd",
            baseUrl: BASE_URL,
          });
        };
      })(document, "script");
    </script>
  </body>
</html>

Here the output -

Once you click on the chat icon it’ll start the chat -

Pretty easy right? But our goal is to add this with the next js right?

Why next js?

Next js built upon react js. In react project, we normally add a ton of libraries to make react act properly for a single page application and other features. But with the next js, we get many features when we install it. Some are

- Image optimization (without adding any extra library)
- Hybrid: SSG & SSR (without adding any extra library)
- File System Routing (without adding any extra library)
- Fast refresh (Easier for a developer to work with)
- Typescript support (For static types)
- Built-in-css support (Easy to work with CSS)
- Code splitting & building (More optimized)

Requirements for Next js

Node js 12.0 or later
Windows, linux or mac machine
Knowledge about react js

You can read the rest from this link - Chatwoot with Next js

Blog

Chatwoot (a zendesk open source alternative) with Next js

Muhammad Ali (Nerdjfpb)

Chatwood Project Creation

Why next js?

Join Our Newsletter. No Spam, Only the good stuff.

Related