DEV Community

Cover image for Chatwoot (a zendesk open source alternative) with Next js
Muhammad Ali (Nerdjfpb)
Muhammad Ali (Nerdjfpb)

Posted on • Originally published at aviyel.com

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
Enter fullscreen mode Exit fullscreen mode

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?

chatwoot landing page

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

Registering a new user

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

homepage after login

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 -

pricing for chatwoot

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

creating a new inbox

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

click website for setup it

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)

homepage for creating inbox

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

adding 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!

final page after creating as successful image

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

after creating inbox page

This will lead to

when we click on the inboxes

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

editing portfolio inbox

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.

integration code for adding it

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>

Enter fullscreen mode Exit fullscreen mode

Here the output -

html output

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

when we click in the button

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)
Enter fullscreen mode Exit fullscreen mode

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

Discussion (0)