Integrate Chatwoot inside the Nextjs project.

Outline: [Article Title]

Keyword: [Enter Targeted Keyword]

Keyword MSV: [Enter Targeted Keyword’s Monthly Search Volume]

Author: [Enter Author Name]

Due Date: [Enter Due Date]

Publish Date: [Enter Desired Publish Date]

User Persona: [Enter Targeted Reader and/or User Persona]

Countless businesses are currently being reprimanded by their rivals.Hence, businesses are continually looking for innovative ways to generate new items as a result of the severe competition. Focusing on providing high-quality customer support and services is one pragmatic and vital method. Customer service and support can help companies expand and even provide them a competitive edge. Client support and service is critical in building customer retention and strengthening interactions between organizations and their customers. Good customer service benefits both customers and businesses. Most customers rely their final purchasing selections on the price, range, and level of customer service provided by the goods.

This article focuses on the most critical tasks and concepts for better understanding and building Next.js based application from the ground up, including integrating chatwoot. It’s for folks who want to learn Next and integrate chatwoot from the ground up and want to concentrate on the fundamentals. We’ll use Next.js(a react framework) and chatwoot to build a full blog page that allows users to fully utilize the chatwoot functionalities. This blog post will go through the fundamentals of react as well as how to use chatwoot in a Nextjs based application.

Here’s a sneak glance at our app’s final version:

Numerous customers/buyers base their final purchasing decisions on the product’s pricing, range, and level of customer care. As a result, businesses and corporations should employ customer service solutions to provide excellent service. Customer support technologies include Chatify, Salesforce, Intercom, and Chatwoot, to name a few.

Chatwoot’s main characteristics.

Chatwoot provides a unified view of conversations taking place across several communication channels, such as email, websites, APIs, and other social media platforms.Chatwoot is a free open source live chat platform that offers enterprise-level features.

Chatwoot’s features Overview

• Real time reports:Reports are essential tools for any organization, regardless of its size or industry. They enable the tracking and analysis of performance and overall health, as well as the discovery of areas for improvement and growth potential. Inside Chatwoot, real-time reporting is integrated, allowing you to easily record and analyze conversations, messages, and reaction times in real-time.

• Live chat:Customers enjoy live chat because they can get quick answers to their inquiries and problems. The Chatwoot live chat interface is simple and inviting to potential consumers, which is a winning combination. It’s also easy to use and has a pleasant appearance, which will persuade most customers to use it to its maximum potential.

• open source:Chatwoot is a Ruby and Vue.js-based open source customer relationship platform. It was created from the ground up with the goal of assisting customer care teams in developing end-to-end issue management and support solutions. It’s a completely free and open-sourced solution with enterprise-level features.

• Shared inboxes:Chatwoot allows you to easily communicate with your customers and team members from one central area with ease.

• Private Notes:Inter-team communication is possible through the use of private notes in a chat that can be tagged to transmit essential information, resolve difficulties, and address concerns.

• Webhooks:Webhooks can also be used to share information across programs like Slack and GitHub. Chatwoot can be immediately linked to Slack, allowing users to manage discussions without ever having to log in to the platform’s dashboard.

• Canned responses:It can be tedious to type the same response over and over. Chatwoot solves this difficulty by providing prefabricated and pre-recorded quick responses, making the engagement significantly easier.

To learn more about this topic, click on this link chatwoot’s characteristics and features.

Let’s get started. The goal of this article is to create an Nextjs application and integrate chatwoot inside it. So, in a previous article, we created a simple Reactjs chatwoot Integration application, and in this article, we’ll redo it but by using next.js, with the goal of simply showing you how to do it using the most popular framework or UI library.So let’s get started with our Next js application with Javascript. To do so, simply follow the instructions below.

You can create a Nextjs project by:

npx create-next-app@latest

# or

yarn create next-app

Now, let’s use the following command to start the application.

yarn run dev

Your application’s folder structure should look something like this.

First, let’s add some third party dependencies to our application before integrating chatwoot. We’ll be adding react Hook library called useSwr , which is a full fledged React Hook library made by Vercel. It fetches data from an API or other external source, then saves that data in a cache, and renders the data we are doing this because we will be building a blog site first and then we will proceed to chatwoot integration part.

let’s add that library to our application.So, to add those libraries to our application, simply run the command below in the terminal of your root project file directory.

yarn add swr

Finally, your package.json file should look like this once you’ve installed all of your project’s dependencies.

// package.json
{
  "name": "nextjs-chatwoot-integration",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "12.1.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "swr": "^1.2.2"
  },
  "devDependencies": {
    "eslint": "8.9.0",
    "eslint-config-next": "12.1.0"
  }
}

So you’re undoubtedly curious about the source of the content. Remember that all of our source code is housed in the pages folder, and react/next will inject it into the root div element.Let’s take a look at our pages folder, which contains some javascript files and one api folder.

Now, head over to our index.js file

// index.js

import Head from "next/head";
import styles from "../styles/Home.module.css";

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to <a href="https://nextjs.org">Next.js!</a>
        </h1>

        <p className={styles.description}>
          Get started by editing{" "}
          <code className={styles.code}>pages/index.js</code>
        </p>

        <div className={styles.grid}>
          <a href="https://nextjs.org/docs" className={styles.card}>
            <h3>Documentation &rarr;</h3>
            <p>Find in-depth information about Next.js features and API.</p>
          </a>

          <a href="https://nextjs.org/learn" className={styles.card}>
            <h3>Learn &rarr;</h3>
            <p>Learn about Next.js in an interactive course with quizzes!</p>
          </a>

          <a
            href="https://github.com/vercel/next.js/tree/master/examples"
            className={styles.card}
          >
            <h3>Examples &rarr;</h3>
            <p>Discover and deploy boilerplate example Next.js projects.</p>
          </a>

          <a
            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
            className={styles.card}
          >
            <h3>Deploy &rarr;</h3>
            <p>
              Instantly deploy your Next.js site to a public URL with Vercel.
            </p>
          </a>
        </div>
      </main>

      <footer className={styles.footer}>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{" "}
        </a>
      </footer>
    </div>
  );
}

In this situation, we’re simply using regular javascript to import HEAD from next/head and styles from our Home.module.css. Following that, we have a regular javascript function called Home, which is known as a functional component in react, and this function returns a react-element that looks like HTML but is actually a jsx, as you can see there is a div tag with a className of APP, which we can’t say class by itself because class is a reserved word in javascript, so we have to use className in jsx.Following that, we have the Head and then the titles, and all the other stuffs that next js provides. So now we need to remove all these boilerplate codes from our index.js file.

So, Now let’s look at the _app.js file.

// _app.js
import "../styles/globals.css";

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

The App component is used by Next.js to create pages. You can control the page initialization by simply overriding it. It allows you to do amazing things like: “Persisting layout across page changes”, “Keeping state while navigating pages”, “Custom error handling using componentDidCatch”,”Inject additional data into pages and Add global CSS” are just a few of the great things you can accomplish with it.

In the above _app.js code the Component parameter represents the active page, when you switch routes, Component will change to the new page. As a result, the page will receive any props you pass to Component. Meanwhile pageProps is an empty object that contains the initial props that were preloaded for your page by one of the data fetching methods.

Now that we’ve completed all of the cleansing tasks, let’s go to the api folder in the pages directory and create a file called posts.js within it.So, API routes offer a way to use Next.js to create an API. Any file in the pages/api subdirectory is mapped to /api/* and regarded as an API endpoint rather than a page. They’re exclusively server-side bundles, therefore they won’t add to the size of your client-side bundle. Now, copy and paste the following code inside it. So

// api/posts.js
export default (req, res) => {
  res.status(200).json({
    posts: [
      {
        id: 1,
        title: "Learn Nextjs from scratch [Part-1]",
        body: "A very comprehensive and thorough guide about Nextjs",
        published: true,
      },
    ],
  });
};

The above API route pages/api/posts.js, for example, delivers a json response with a 200 success code.Let’s add a few more posts now.

// api/posts.js
export default (req, res) => {
  res.status(200).json({
    posts: [
      {
        id: 1,
        title: "Learn Nextjs from scratch [Part-1]",
        body: "A very comprehensive and thorough guide about Nextjs",
        published: true,
      },
      {
        id: 2,
        title: "Learn Nextjs from scratch [Part-2]",
        body: "A very comprehensive and thorough guide about Nextjs",
        published: true,
      },
      {
        id: 3,
        title: "Learn Nextjs from scratch [Part-3]",
        body: "A very comprehensive and thorough guide about Nextjs",
        published: true,
      },
      {
        id: 4,
        title: "Learn Nextjs from scratch [Part-4]",
        body: "A very comprehensive and thorough guide about Nextjs",
        published: true,
      },
      {
        id: 5,
        title: "Learn Nextjs from scratch [Part-5]",
        body: "A very comprehensive and thorough guide about Nextjs",
        published: true,
      },
      {
        id: 6,
        title: "Learn Nextjs from scratch [Part-6]",
        body: "A very comprehensive and thorough guide about Nextjs",
        published: true,
      },
    ],
  });
};

Let’s go ahead and fetch this data, display it on our frontend UI, and style it appropriately.

So, first and foremost, let’s add the url for our api routes and save it in the url variables. Then we’ll import the useSWR react hook library and pass that above url inside it, along with an asynchronous function that returns the data (you can use native fetch or tools like Axios as well). This hook returns two values: data and error, based on the request status, so let’s destructure it first. After we’ve gotten our data, we’ll do some error handling too.So the final code inside index.js should look something like this.

// index.js
import Head from "next/head";
import styles from "../styles/Home.module.css";
import useSWR from "swr";

export default function Home(props) {
  const url = "http://localhost:3000/api/posts";

  const { data, error } = useSWR(
    url,
    async () => {
      const res = await fetch(url);
      return res.json();
    },
    { initialData: props, revalidateOnMount: true }
  );

  if (error) {
    return <div>Failed to Load Data</div>;
  }

  if (!data) {
    return <div>Loading...</div>;
  }

  const { posts } = data;
  return (
    <div className={styles.container}>
      <Head>
        <title>Nextjs chatwoot integration</title>
        <meta name="description" content="Nextjs chatwoot integration" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <footer className={styles.footer}></footer>
    </div>
  );
}

Now that we’ve finished fetching the data, it’s time to render it. To do so, first destructure all of our data into posts, then head over inside the main element and insdie it map all of the posts and fetch only the title and body from our api, and last add some styles to it and you’re done. Hence, your final index.js should resemble something like this.

// index.js
import Head from "next/head";
import Image from "next/image";
import styles from "../styles/Home.module.css";
import useSWR from "swr";

export default function Home(props) {
  const url = "http://localhost:3000/api/posts";

  const { data, error } = useSWR(
    url,
    async () => {
      const res = await fetch(url);
      return res.json();
    },
    { initialData: props, revalidateOnMount: true }
  );

  if (error) {
    return <div>Failed to Load Data</div>;
  }

  if (!data) {
    return <div>Loading...</div>;
  }

  const { posts } = data;
  return (
    <div className={styles.container}>
      <Head>
        <title>Nextjs chatwoot integration</title>
        <meta name="description" content="Nextjs chatwoot integration" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          <a href="https://nodejs.org">Nextjs Blog</a>
        </h1>

        <div className={styles.grid}>
          {posts.map((item, index) => (
            <div className={styles.card}>
              <h3 className={styles.card_title} key={item}>
                {item.title}
              </h3>
              <p>{item.body}</p>
            </div>
          ))}
        </div>
      </main>

      <footer className={styles.footer}></footer>
    </div>
  );
}

It’s now time to add some styles to our project, so go to the globals.css file located at the root directory of the project inside the styles folder and make the following changes.

/* globals.css */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600&family=Poppins:ital,wght@0,100;0,200;0,300;1,100;1,200&display=swap");

html,
body {
  padding: 0;
  margin: 0;
  background-color: #d5cde4;
  /* image no repeat */
  background-repeat: no-repeat;
  /* image position */
  background-position: center;
  /* image size */
  background-size: cover;
  /* image attachment */
  background-attachment: fixed;
  /* image origin */
  background-origin: border-box;
  /* image clip */
  background-clip: content-box;

  background-image: url("https://i.pinimg.com/originals/15/17/4a/15174a8695a5efa262a6d6897610c8f8.gif");

  font-family: "Poppins", sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

Now that we’ve finished with the global styling, let’s add some styles to our main container, footer, post cards, and title. To do so, open Home.modules.css and make the following adjustments.

/* Home.modules.css */
.container {
  padding: 0 2rem;
}

.main {
  padding: 2rem 0;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.footer {
  display: flex;
  flex: 1;
  padding: 2rem 0;
  border-top: 1px solid #eaeaea;
  justify-content: center;
  align-items: center;
}

.footer a {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
}

.title a {
  color: #8661d1;
  text-decoration: none;
}

.title a:hover,
.title a:focus,
.title a:active {
  text-decoration: underline;
}

.title {
  margin: 0;
  line-height: 1.15;
  font-size: 4rem;
}

.title,
.description {
  text-align: center;
}

.description {
  margin: 4rem 0;
  line-height: 1.5;
  font-size: 1.5rem;
}

.code {
  background: #fafafa;
  border-radius: 5px;
  padding: 0.75rem;
  font-size: 1.1rem;
  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
    Bitstream Vera Sans Mono, Courier New, monospace;
}

.grid {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 900px;
  padding-top: 40px;
}

.card {
  margin: 10px auto;
  width: 250px;
  height: 250px;
  border-radius: 40px;
  box-shadow: 5px 5px 30px 7px rgba(0, 0, 0, 0.25), -5px -5px 30px 7px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  transition: 0.4s;
  padding: 25px;
  /* awesome background color */
  background-color: white;
}

.card .card_title {
  border-radius: 0px 0px 40px 40px;
  font-family: sans-serif;
  font-weight: bold;
  height: 40px;
  color: #8661d1;
}

.card:hover {
  transform: scale(0.9, 0.9);
  box-shadow: 5px 5px 30px 15px rgba(0, 0, 0, 0.25), -5px -5px 30px 15px rgba(0, 0, 0, 0.22);
}

.logo {
  height: 1em;
  margin-left: 0.5rem;
}

@media (max-width: 600px) {
  .grid {
    width: 100%;
    flex-direction: column;
  }
}

Simply run npm run dev on your terminal after you’ve made all of the adjustments, your finished application should look like this.

Chatwoot Configuration

Chatwoot configuration on Heroku

Let’s get started by creating a chatwoot instance on Heroku.

• Step First: Create a free Heroku account by going to https://www.heroku.com/ and then going to the chatwoot GitHub repository and clicking the Deploy to Heroku button in the readme section.

• Step Second: After you click that button, you’ll be able to see the basic setup that chatwoot has already completed. Give the App name and replace the FRONTEND_URL with the App name you just gave, then click Deploy App.

• Step Third: Depending on your PC, network status, and server location, the program may take 10 to 15 minutes to install.

• Step Fourth: After the app has been deployed, go to the settings panel in the dashboard.

• Step Fifth: The domain section can be found in the settings menu. In a new window, open that URL. Finally, you’ve configured chatwoot in Heroku successfully.

• Step Sixth: Inside the Resources section, make sure the web and worker resources are enabled.

• Step Seventh: You should be able to log onto your chatwoot account if everything went smoothly.

So, your first account has been created successfully.The main benefit of deploying chatwoot on Heroku is that you have full control over your entire application and your entire data.

Chatwoot cloud setup

There is another way to get started with chatwoot which is the cloud way so this is the most straightforward way to get started is to register directly on the chatwoots website.

• Step First: Fill out all of the required information to create an account.

• Step Second: You’ll get an email asking you to confirm your account after you’ve signed up.

• Step Third: Proceed to login after you’ve confirmed your account by clicking the “Confirm my account” option.

• Step Fourth: You may now visit the Chatwoot dashboard and begin connecting it with plethora of platform (websites, Facebook, Twitter, etc.).

Chatwoot Cloud Configuration

• Step First: Let’s set up an inbox. The inbox channel acts as a communication hub where everything can be managed, including live-chat, a Facebook page, a Twitter profile, email, and WhatsApp.

• Step Second: Now, configure a website and domain name, as well as all of the heading and tagline information like shown below

• Step Third: Finally, to control your mailbox, add “Agents.” Keep in mind that only the “Agents” who have been authorized will have full access to the inbox.

• Step Fourth: Blammmm!. The website channel has been created successfully.

The website channel must now be connected. Simply copy and paste the entire javascript code provided by chatwoot.Now, head back to our react app and create a new component folder and inside that folder create a new file/component called ChatwootWidget and inside it create a script which helps to loads the Chatwoot asynchronously. Simply follow the exact same steps outlined in the following code below.

// ChatwootWidget.js
import { useEffect } from "react";

const ChatwootWidget = () => {
  useEffect(() => {
    // Add Chatwoot Settings
    window.chatwootSettings = {
      hideMessageBubble: false,
      position: "right",
      locale: "en",
      type: "expanded_bubble",
    };

    (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";
      g.defer = true;
      g.async = true;
      s.parentNode.insertBefore(g, s);
      g.onload = function () {
        window.chatwootSDK.run({
          websiteToken: ""// add you secret token here,
          baseUrl: BASE_URL,
        });
      };
    })(document, "script");
  }, []);

  return null;
};

export default ChatwootWidget;

The best part about chatwoot is that you can customize it to your liking. For example, you can modify the position of the floating bubble, extend it, change the language, and hide the message bubble. All it takes is the addition of the following line of code.

window.chatwootSettings = {
  hideMessageBubble: false,
  position: "right",
  locale: "en",
  type: "expanded_bubble",
};

Finally, it’s time to import the ChatwootWidget component into our index.js file. To do so, simply navigate to the “index.js” file and import the widget, then render that component. Your final code of index.js should look like this.

// index.js
import Head from "next/head";
import Image from "next/image";
import styles from "../styles/Home.module.css";
import useSWR from "swr";
import ChatwootWidget from "../components/ChatwootWidget";

export default function Home(props) {
  const url = "http://localhost:3000/api/posts";

  const { data, error } = useSWR(
    url,
    async () => {
      const res = await fetch(url);
      return res.json();
    },
    { initialData: props, revalidateOnMount: true }
  );

  if (error) {
    return <div>Failed to Load Data</div>;
  }

  if (!data) {
    return <div>Loading...</div>;
  }

  const { posts } = data;
  return (
    <div className={styles.container}>
      <Head>
        <title>Nextjs chatwoot integration</title>
        <meta name="description" content="Nextjs chatwoot integration" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          <a href="https://nodejs.org">Nextjs Blog</a>
        </h1>

        <div className={styles.grid}>
          {posts.map((item, index) => (
            <div key={index} className={styles.card}>
              <h3 className={styles.card_title} key={item}>
                {item.title}
              </h3>
              <p>{item.body}</p>
            </div>
          ))}
        </div>
      </main>

      <footer className={styles.footer}>
        <ChatwootWidget />
      </footer>
    </div>
  );
}

Now that you’ve completed the chatwoot integration, your finished project should resemble something like this.

Entire source code of the application can be found here

Closing

Chatwoot was built with several distinctive features primarily aimed at making the developer’s job easier while also giving customer as well as user the ability to provide a better customer support experience as possible.This article may have been entertaining as well as instructive in terms of how to install chatwoot from the ground up on a variety of platforms. Join Aviyel’s community to learn more about the open source project, get tips on how to contribute, and join active dev groups.

Call-to-Action

Aviyel is a collaborative platform that assists open source project communities in monetizing and long-term sustainability. To know more visit Aviyel.com and find great blogs and events, just like this one! Sign up now for early access, and don’t forget to follow us on our socials!