Integrate Chatwoot inside the React 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]

Several firms are being chastised by their competitors at the moment. Because of the fierce competition, businesses are constantly looking for creative ways to create new products. One practical and crucial strategy is to concentrate on offering high-quality customer support and services. Customer service and support can aid businesses in their growth and possibly give them a competitive advantage. Client support and service plays an essential role in developing client loyalty for those businesses, in addition to improving the interaction between the business and its customers. Both customers and businesses gain from good customer service. Many buyers base their final purchasing decisions on the product’s pricing, range, and level of customer care.

This article focuses on the most important tasks and concepts for better understanding and constructing react applications from the bottom up, as well as integrating chatwoot. It’s for people who are serious about learning react and integrating chatwoot from the ground up and want to focus on the basics. We’ll create a full landing page with react and chatwoot that allows users to fully utilize the chatwoot features. This blog session will cover the basics of react as well as how to incorporate chatwoot into a react application.

Here’s a sneak peek at the final version of our app:

Many customers rely their final purchase selections on the price, range, and level of customer service provided by the goods. As a result, enterprises and companies should use customer service tools to give great customer service. Chatify, Salesforce, Intercom, and Chatwoot are just a few examples of customer support technologies.

What is Chatwoot ?

Customer service tools such as Chatwoot, on the other hand, remain the finest in class. Chatwoot is a free open source live chat platform that offers enterprise-level features. Real-time reporting, live chats, automatic agent assignment, chatbots, shared inboxes, strong APIs/webhooks, premade responses, conversation continuity, discussion labels, and many other features are included. Chatwoot is also very easy to use, with a user-friendly dashboard that allows business agents to concentrate their efforts on helping clients rather than learning how to utilize the platform.

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.

• open source
• chatbots
• Real-time reporting
• live chats, automatic agent assignment
• shared inboxes
• strong APIs/webhooks
• canned responses
• conversation continuity
• conversation labels, and many other features

Features Overview

• open source:Chatwoot is an open source customer relationship platform built using Ruby and Vue.js. It was built from the ground up to help customer service teams build end-to-end issue management and support solutions. It is entirely free tool, and absolutely open sourced tool with enterprise-level functionality.

• Real-time reports: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 prefer live chat because it allows them to receive prompt responses to their questions and concerns. The Chatwoot live chat interface is both easy and appealing, which is a great combination for prospective customers. It’s also simple to operate and maintains a nice aesthetic, which will persuade most customers to make use of it to its full potential.

• Shared inboxes:Chatwoot provide help to communicate with your customers and team members from a single location with ease.

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

• Webhooks:Webhooks can also be used to communicate various events across programs such as Slack and GitHub. Chatwoot can be linked with Slack directly so that It can be easily possible to handle conversations without ever having to log in to the platform’s dashboard.

• Canned responses:Typing the same response over and over might be tiresome. Chatwoot solves this problem by offering prefabricated and pre-recorded short responses, substantially simplifying the interaction.

Follow this link to discover more about chatwoot’s characteristics and features.

Integration of Chatwoot inside React project.

Configuring our React application

To begin, we’ll use create-react-app to develop our ui. From the ground up, we’ll create the user interface and its functionality. Let’s get right to work building our application.

Creating a bootstrapped react application with create-react-app(CRA)

Let’s start with the react portion and build it from there. The first step is to install Node.js on your computer if it isn’t already installed. So, go to the official Node.js website and get the most recent version. To use the node package manager, also known as npm, you’ll need Node js. Now open the folder in your code editor of your choice. For this article tutorial, we’ll be utilizing the VScode code editor. Then type npx create-react-app into the integrated terminal. In the current directory, this program will create a react application.

It often only takes a couple of minutes to get everything set up. Normally, we’d use npm to add packages to a project, but in this case, we’ll use npx, the package runner, which will download and configure everything for us so that we can get started right away with a great template. It’s time to start our development server, so type npm start into your command prompt / terminal, and react-app will open right away.

So, this is how the boilerplate template appears right away. Now it’s time to investigate the file and folder structure provided by create-react-app. There is a folder called node module that contains all of our node dependencies. Then there’s a public folder, where the only thing that matters is the index.html file. So this appears to be a standard HTML file, complete with head, body, and meta tags. You’ll notice a div with the id root inside our body tag, followed by the fallback noscript tag, which will be visible only if the user’s browser has javascript disabled.

<!--index.html-->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <title>React Chatwoot Integration</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

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

Now, head over to our App.js file

// App.js

import logo from "./logo.svg";
import "./App.css";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}
export default App;

In this situation, we’re simply using regular javascript to import react from react and logo from our logo. Following that, we have a regular javascript function called APP, 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 header and then the image, and notice on the image source that we have our logo, which is actually a javascript variable that we imported at the top, so we must surround it with curly brackets in order to use the javascript within JSX, and then we have a paragraph, an anchor tag, and that’s it for this component.

NOTE: We may extract the component and place it on the webpage because of the export. export appears at the bottom of the app.js file, indicating that the App function is being exported.

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

// index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);
reportWebVitals();

We’re importing react from react again, and this time we’re also importing react-dom, and then we’re importing the CSS stylesheet file, and finally, we’re importing App from App.js, which is the file we just discussed, and there’s also service worker, which is used to make your app work completely offline. After that, we use ReactDom.render, which takes two parameters. The first parameter is the jsx object, and within jsx we can include our user-defined components, so react strict mode is a react defined component, whereas App is a user-defined component; the second parameter is document.getElementById('root'), which targets the root div in our index.html file and is how we access the content in our webpage.

Note: ReactDom renders our content into our root div located at our index.html file.

React boilerplate files cleanup

We must first tidy up our projects by eliminating some of the files provided by create-react-app before we can begin creating them. After you’ve cleaned up your files and folder , they should look like this.

Adding and Installing some packages

This project will necessitate the installation of a few third-party packages. so, in your terminal, copy and paste the following command

Installing react-scroll

This package contains a React component that aids with vertical scrolling animation.

npm install react-scroll

Installing react-pricing-table

This package creates React pricing tables that are quick, adaptable, and easy to use.

npm install react-pricing-table

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

// package.json
{
  "name": "landingpage-reactjs-chatwoot",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^12.0.0",
    "@testing-library/user-event": "^13.2.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-pricing-table": "^0.3.0",
    "react-scripts": "5.0.0",
    "react-scroll": "^1.8.5",
    "web-vitals": "^2.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": ["react-app", "react-app/jest"]
  },
  "browserslist": {
    "production": [">0.2%", "not dead", "not op_mini all"],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

We can begin now that our project and dependencies have been established. To begin, create a component folder within the source directory, and then construct eight separate components within that directory that are required for this project. So, let’s take it step by step. First, make a Navbar component, then a Home component, then an About component, an AboutBox component, an Contact component, an Offer component, a Pricing component, and finally a PricingTable component. Also, don’t forget to make distinct “css” files for each component. Finally, your project’s folder and file structure should look something like this.

Now that you’ve finished creating your component, go ahead and get all of the assets required for this project so you don’t have to worry about anything. If you want to follow along with this tutorial, simply go to this link and download all of the assets and resources required/used for this project.

Here’s how your folder structure should appear.

It is now time to bring our project to life. To do so, go to the Navbar component that you just created and type ‘rfce’ inside it (You’ll need to install this extension first).A snippet/boilerplate will get generated, after that, you’ll need to import a few things at the top: first, react as well as useState hooks, then “Link” from react-scroll, then the logo from the assets folder, and finally the css style for this Navbar, which we’ll add later.

Head inside the Navbar function/component and make a state named nav with the initial state value of false. Then make a function called changeBg with a if-else statement so that if the window-scrollY is greater than or equal to 50, pass the state value to be true or else pass the state value to be false and now, create a Event Listener so that when the scroll event occurs, that function is called.Let’s go on to the return statement, so first make a nav tag and utilize the Link component that we just imported from the react-scroll package, then create a img tag and simply make use of the logo that we just imported from assets and wrap that tag with the Link component after that. Make a list of all the menu items you want to show, then tie it up with the Link component in the same way.The “Navbar” component’s final code should look somewhat like this.

// Navbar.js
import React, { useState } from "react";
import logo from "../assets/logo.png";
import { Link } from "react-scroll";
import "./Navbar.css";

function Navbar() {
  const [nav, setNav] = useState(false);
  const changeBg = () => {
    if (window.scrollY >= 50) {
      setNav(true);
    } else {
      setNav(false);
    }
  };
  window.addEventListener("scroll", changeBg);

  return (
    <nav className={nav ? "nav active" : "nav"}>
      <Link to="#" className="logo">
        <img src={logo} alt="" />
      </Link>
      <input className="menu-btn" type="checkbox" id="menu-btn" />
      <label className="menu-icon" for="menu-btn">
        <span className="nav-icon"></span>
      </label>
      <ul className="menu">
        <li>
          <Link to="main" smooth={true} duration={1500}>
            Home
          </Link>
        </li>
        <li>
          <Link to="about" smooth={true} duration={1500}>
            About
          </Link>
        </li>
        <li>
          <Link to="offer" smooth={true} duration={1500}>
            Offer
          </Link>
        </li>
        <li>
          <Link to="pricing" smooth={true} duration={1500}>
            Pricing
          </Link>
        </li>
        <li>
          <Link to="contact" smooth={true} duration={1500}>
            Contact
          </Link>
        </li>
      </ul>
    </nav>
  );
}

export default Navbar;

Also, don’t forget to style the component, so copy and paste the CSS code below into your Navbar.css file.

/* Navbar.css */

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1;
  background-color: transparent;
  transition: 0.6s ease-in-out;
}
nav.active {
  box-shadow: 5px 10px 30px rgba(0, 0, 0, 0.157);
  background-color: #000000;
}
nav ul {
  display: flex;
}
.active {
  background-color: #00bfa6;
  color: #ffffff;
  box-shadow: 5px 10px 30px rgba(64, 198, 162, 0.411);
  transition: all ease 0.2s;
}
.active:hover {
  background-color: #000000;
  color: #ffffff;
  box-shadow: 5px 10px 30px rgba(64, 196, 198, 0.411);
  transition: all ease 0.2s;
}
nav ul li a {
  font-family: "Poppins";
  height: 40px;
  line-height: 43px;
  margin: 5px;
  padding: 0px 25px;
  display: flex;
  font-size: 0.8rem;
  text-transform: uppercase;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 1px;
  border-radius: 30px;
  transition: 0.2s ease-in-out;
}

nav ul li a:hover {
  background-color: #00bfa6;
  color: #ffffff;
  box-shadow: 5px 10px 30px rgba(2, 255, 230, 0.336);
  transition: all ease 0.5s;
  cursor: pointer;
}

nav .menu-btn,
.menu-icon {
  display: none;
}

Let’s move on to the Home component. This component is fairly straightforward. First, we construct a simple div tag with the className main and two seperate div tags inside it. We will give the first div a className of name and pass a header and paragraph to it, then we will simply construct a button in the second div tag.

// Home.js
import React from "react";
import "./Home.css";

const Home = () => {
  return (
    <>
      <div id="main">
        <div className="name">
          <h2>More than Fitness</h2>
          <h1>
            Stay<span>Healthy</span>and <span>Active</span>.
          </h1>
          <p className="details">
            We are a group of people who are passionate about fitness and want
            to be able to help others. We are here to help you achieve your
            goals and help you stay healthy and active.
          </p>
          <div className="header-btns">
            <a href="#" className="header-btn">
              BOOK NOW
            </a>
          </div>
        </div>
      </div>
    </>
  );
};

export default Home;

Also, don’t forget to style the component, so copy and paste the CSS code below into your Home.css file.

/* Home.css */
#main {
  width: 100%;
  height: 768px;
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("../assets/banner.jpg");
  position: relative;
  z-index: 0;
}

#main::before {
  content: "";
  position: absolute;
  background: -moz-radial-gradient(
    center,
    ellipse cover,
    rgba(95, 8, 181, 0.38) 0%,
    rgba(0, 0, 0, 0.6) 100%
  );
  background: -webkit-radial-gradient(
    center,
    ellipse cover,
    rgba(74, 8, 181, 0.38) 0%,
    rgba(0, 0, 0, 0.6) 100%
  );
  background: radial-gradient(
    ellipse at center,
    rgba(95, 8, 181, 0.38) 0%,
    rgba(0, 0, 0, 0.6) 100%
  );
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.name {
  text-align: center;
  font-family: "Montserrat";
  width: 900px;
  position: absolute;
  left: 50%;
  top: 55%;
  transform: translate(-50%, -55%);
}
.name span {
  color: #8661d1;
}
.name .details {
  font-size: 19px;
  color: #c5c5c5;
  text-align: justify;
  text-justify: inter-word;
}
.name h2 {
  font-family: "Lato";
  font-size: 2.7rem;
  margin: 0px;
  letter-spacing: 2px;
  color: #ffffff;
}
.name h1 {
  font-family: "Lato";
  font-size: 5rem;
  margin: 0px;
  letter-spacing: 2px;
  color: #ffffff;
}
.header-btns {
  display: flex;
  margin-top: 40px;
  margin-left: 40%;
}
.header-btn {
  width: 160px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.4rem;
  background-color: #8661d1;
  box-shadow: 5px 10px 30px rgba(135, 116, 165, 0.336);
  border-radius: 5px;
  color: #ffffff;
}
.header-btn:hover {
  background-color: transparent;
  transition: all ease 0.5s;
  color: #ffffff;
  border: 2px solid #8661d1;
}

Now that you’ve finished building this component, be sure to update it in the App.js file. So, when you’ve imported this specific component, your App.js should look like this.

// App.js
import React from "react";
import Navbar from "./components/Navbar";
import Home from "./components/Home";

function App() {
  return (
    <div className="App">
      <Navbar />
      <Home />
    </div>
  );
}

export default App;

Also, don’t forget to modify the styles in the “index.css” file before restarting or running the server.

// index.css
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,500;1,500&display=swap");

* {
  box-sizing: border-box;
}

body {
  margin: 0px;
  padding: 0px;
  background-color: rgb(24, 24, 24);
  font-family: "Poppins", sans-serif;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

button {
  outline: none;
  border: none;
}

input {
  outline: none;
  border: none;
}

.logo img {
  width: 95px;
}

Simply run npm start on your terminal when you’ve successfully integrated everything, and your final application should look like this.

Let’s move on to our About section, which is also fairly straightforward. However, before we make any changes to the component, let’s segregate the card into a separate component. To do so, first create a AboutBox component and inside it simply load the props as an argument and inside the return statement create one div with the class name of about-box and inside it create two seperate div with the class names of a-b-box and a-b-text respectively. Then, create a heading and a paragraph inside the first div then load the title and paragraph supplied as props into the second div.Finally, inside the About component, first import all of the images from the assets folder, then import the AboutBox component and use it, passing the image, title, and paragraph props to it.

// AboutBox.js
import React from "react";

function AboutBox(props) {
  return (
    <div className="about-box">
      <div className="a-b-box">
        <img src={props.image} alt="" />
      </div>
      <div className="a-b-text">
        <h2>{props.title}</h2>
        <p>{props.paragraph}</p>
      </div>
    </div>
  );
}

export default AboutBox;

and the About.js

// About.js
import React from "react";
import AboutBox from "./AboutBox";
import aboutImage from "../assets/1.svg";
import aboutImage1 from "../assets/2.svg";
import aboutImage2 from "../assets/3.svg";
import aboutImage3 from "../assets/4.svg";
import "./About.css";

function About() {
  return (
    <div id="about">
      <h1>About</h1>
      <div className="about-container">
        <AboutBox
          image={aboutImage}
          title="Crunches and lift"
          paragraph="Your abdominal muscles are a complicated group of muscles that can be tough to strengthen through regular aerobic activity or weight training. Your abs will benefit from targeted crunches and leg lifts."
        />
        <AboutBox
          image={aboutImage1}
          title="Yoga and stretch"
          paragraph="Yoga poses stretch your muscles and increase your range of motion. With regular practice, they'll improve your flexibility."
        />
        <AboutBox
          image={aboutImage2}
          title="Cardios"
          paragraph="Cardio is a type of physical activity that uses the body's natural movement to help you stay active. It's a great way to keep your body healthy and fit."
        />
        <AboutBox
          image={aboutImage3}
          title="Push Ups and weigth lifting"
          paragraph=" Push Ups and weigth lifting is a great way to keep your body healthy and fit"
        />
      </div>
    </div>
  );
}

export default About;

Also, don’t forget to style the component, so copy and paste the CSS code below into your About.css file.

/* About.css */
#about {
  width: 100%;
  height: 120vh;
  box-sizing: border-box;
  font-family: "Poppins";
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 40px;
  background-color: rgb(24, 24, 24);
}
#about h1 {
  color: #fff;
  font-size: 3rem;
}
.about-container {
  display: flex;
  justify-content: center;
  align-content: center;
}
.about-box {
  background-color: #000000;
  width: 300px;
  height: 470px;
  margin: 20px;
  border-radius: 10px;
  overflow: hidden;
  transition: 0.4s ease-in-out;
  position: relative;
}
.a-b-img {
  width: 100%;
  height: 60%;
}
.a-b-img img {
  padding: 15px;
  margin-top: 40px;
  width: 100%;
  height: 50%;
}
.about-box:hover {
  border: 1px solid #8661d1;
  box-shadow: 2px 2px 12px rgba(126, 0, 184, 0.445);
}
.a-b-text {
  width: 100%;
  height: 40%;
  background-color: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-direction: column;
}
.a-b-text h2 {
  color: #fff;
}
.a-b-text p {
  margin: 0px;
  color: #ffffffa6;
  font-size: 1.1rem;
  font-family: "Lato";
  display: block;
  display: -webkit-box;
  max-width: 80%;
  margin-top: 5px;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 10px;
}
.a-b-text p:hover {
  color: #ffffff;
}
.a-b-text a {
  margin-top: 15px;
}

Now that you’ve finished building this component, be sure to update it in the App.js file. So, when you’ve imported this specific component, your App.js should look like this.

// App.js
import React from "react";
import Navbar from "./components/Navbar";
import Home from "./components/Home";
import About from "./components/About";

function App() {
  return (
    <div className="App">
      <Navbar />
      <Home />
      <About />
    </div>
  );
}

export default App;

Again, simply run npm start on your terminal when you’ve successfully integrated everything, and your application should look like this.

Let us add the Offer section to ouir project so simply head over to the Offer component; it’s the same as the Home component, so follow the same code structure as mentioned below.

// Offer.js
import React from "react";
import "./Offer.css";

const Offer = () => {
  return (
    <div id="offer">
      <div className="pr-heading">
        <h1>
          Heavy discounts on <span>memberships</span>
        </h1>
        <p className="details">
          If you want to reduce weight, increase your cardio, or build and tone
          your muscles, 24/7 Fitness can help you. We provide a variety of
          membership specials and discounts at 24/7 Fitness. It is not necessary
          to spend a lot of money to live an active and healthy lifestyle.
        </p>
        <div className="pr-btns">
          <a href="#" className="pr-btn">
            CLAIM NOW!
          </a>
        </div>
      </div>
    </div>
  );
};

export default Offer;

Now, style the component, so copy and paste the CSS code below into your Offer.css file.

/* Offer.css */
#offer {
  padding-top: 30px;
  width: 100%;
  height: 768px;
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(../assets/offer.jpg);
  text-align: center;
  z-index: 0;
}

#offer::before {
  content: "";
  position: absolute;
  background: -moz-radial-gradient(
    center,
    ellipse cover,
    rgba(8, 181, 170, 0.38) 0%,
    rgba(0, 0, 0, 0.6) 100%
  );
  background: -webkit-radial-gradient(
    center,
    ellipse cover,
    rgba(8, 181, 164, 0.38) 0%,
    rgba(0, 0, 0, 0.6) 100%
  );
  background: radial-gradient(
    ellipse at center,
    rgba(8, 172, 181, 0.38) 0%,
    rgba(0, 0, 0, 0.6) 100%
  );
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.pr-heading {
  text-align: center;
  font-family: "Poppins";
  width: 600px;
  position: absolute;
  left: 50%;
  top: 55%;
  transform: translate(-50%, -55%);
}
.pr-heading span {
  color: #00bfa6;
}
.pr-heading .details {
  font-size: 23px;
  color: #ffffff;
}
.pr-heading .details {
  font-size: 1.2rem;
}
.pr-heading h1 {
  font-family: "Poppins";
  font-size: 4rem;
  margin: 0px;
  letter-spacing: 2px;
  color: #ffffff;
}
.pr-btns {
  display: flex;
  margin-top: 40px;
  margin-left: 35%;
}
.pr-btn {
  width: 160px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.4rem;
  background-color: #00bfa6;
  box-shadow: 5px 10px 30px rgba(2, 255, 247, 0.336);
  border-radius: 5px;
  color: #ffffff;
}
.pr-btn:hover {
  background-color: transparent;
  transition: all ease 0.5s;
  color: #ffffff;
  border: 2px solid #00bfa6;
}

Now that you’ve finished building this component, be sure to update it in the App.js file. So, when you’ve imported this specific component, your App.js should look like this.

// App.js
import React from "react";
import Navbar from "./components/Navbar";
import Home from "./components/Home";
import About from "./components/About";
import Offer from "./components/Offer";

function App() {
  return (
    <div className="App">
      <Navbar />
      <Home />
      <About />
      <Offer />
    </div>
  );
}

export default App;

simply run npm start on your terminal, and your application will now look like this.

Let’s make a Pricing component now, so first import one image from our assets and add a description to it, then make a separate component for the pricing card and name it PricingCard and import PricingTable, PricingSlot, and PricingDetail from react-pricing-table .Then, inside the return statement, wrap two PricingSlot components around the PricingTable component because we’ll only be displaying two cards for now.Finally, wrap that previously generated PricingSlot component around another component called PricingDetails which we just imported from react-pricing-table and finally pass buttonText, title, and priceText as props to the PricingSlot component.

// Pricing.js
import React from "react";
import pricingImage from "../assets/pricing.jpg";
import PricingCard from "./PricingCard";
import "./Pricing.css";

const Pricing = () => {
  return (
    <div id="pricing">
      <h1 className="pricing-heading">Pricing</h1>
      <div className="pricing-text">
        <PricingCard />
      </div>
      <div className="pricing-image">
        <img src={pricingImage} alt="pricing image" />
        <p>
          STRUCTURE DISCIPLINE. BUILD A HONORABLE HONOR WITH A MEMBERSHIP , YOU
          CAN BUILD EVERY SINGLE DAY. GET THE BEST PRICE ON AMENITIES, WORKOUTS,
          EQUIPMENT, AND PERSONAL TRAINING !
        </p>
        <button>Join Now !</button>
      </div>
    </div>
  );
};

export default Pricing;

PricingCard.js

// PricingCard.js
import React from "react";
import { PricingTable, PricingSlot, PricingDetail } from "react-pricing-table";

const PricingCard = () => {
  return (
    <PricingTable highlightColor="#8661d1">
      <PricingSlot
        onClick={() => console.log("submit")}
        buttonText="TRY IT FREE"
        title="FREE"
        priceText="$0/month"
      >
        <PricingDetail>
          {" "}
          <b>Gym</b> Plans
        </PricingDetail>
        <PricingDetail>
          {" "}
          <b>Awesome</b> Diet plans
        </PricingDetail>
        <PricingDetail strikethrough>
          {" "}
          <b>Scheduled</b>Councelling
        </PricingDetail>
        <PricingDetail strikethrough>
          {" "}
          <b>Time tracking</b>
        </PricingDetail>
      </PricingSlot>
      <PricingSlot
        highlighted
        onClick={() => console.log("submit")}
        buttonText="SIGN UP"
        title="BASIC"
        priceText="$2/month"
      >
        <PricingDetail>
          {" "}
          <b>Gym</b> Plans
        </PricingDetail>
        <PricingDetail>
          {" "}
          <b>Awesome</b> Diet plans
        </PricingDetail>
        <PricingDetail>
          {" "}
          <b>Scheduled</b>Councelling
        </PricingDetail>
        <PricingDetail>
          {" "}
          <b>Time tracking</b>
        </PricingDetail>
      </PricingSlot>
    </PricingTable>
  );
};

export default PricingCard;

Now, style the component, so copy and paste the CSS code below into your Pricing.css file.

/* Pricing.css */
#pricing {
  margin-top: 100px;
  width: 100%;
  height: 90vh;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px 5% 0px 5%;
  position: relative;
}

#pricing::before {
  content: "";
  position: absolute;
  background: -moz-radial-gradient(
    center,
    ellipse cover,
    rgba(8, 181, 170, 0.136) 0%,
    rgba(24, 24, 24, 0.109) 100%
  );
  background: -webkit-radial-gradient(
    center,
    ellipse cover,
    rgba(8, 181, 170, 0.136) 0%,
    rgba(24, 24, 24, 0.109) 100%
  );
  background: radial-gradient(
    ellipse at center,
    rgba(8, 181, 170, 0.061) 10%,
    rgba(24, 24, 24, 0.095) 100%
  );
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.pricing-heading {
  position: absolute;
  justify-content: center;
  align-items: center;
  top: 0;
  font-size: 3rem;
  color: #8661d1;
  font-weight: 500;
  margin: 0px;
  padding: 0px;
}

.pricing-text {
  width: 25%;
  color: #fff;
  list-style: circle;
}

.pricing-image p {
  font-family: "Poppins";
  width: 80%;
  font-size: 1.2rem;
  color: #f3f1f1;
  text-align: justify;
  text-justify: inter-word;
}

.pricing-image button:hover {
  box-shadow: 5px 10px 30px rgba(141, 2, 255, 0.336);
  background-color: rgb(0, 0, 0);
  transition: all ease 0.3s;
  color: #ffffff;
}
.pricing-image {
  width: 50%;
  color: #f3f1f1;
}
.pricing-image button {
  font-family: "Poppins";
  font-size: 20px;
  margin-top: 20px;
  width: 80%;
  height: 45px;
  border-radius: 10px;
  border: none;
  outline: none;
  color: #ffffff;
  background-color: #8661d1;
}
.pricing-image img {
  width: 600px;
}

Now that you’ve finished building this component, be sure to update it in the App.js file. So, when you’ve imported this specific component, your App.js should look like this.

// App.js
import React from "react";
import Navbar from "./components/Navbar";
import Home from "./components/Home";
import About from "./components/About";
import Offer from "./components/Offer";
import Pricing from "./components/Pricing";

function App() {
  return (
    <div className="App">
      <Navbar />
      <Home />
      <About />
      <Offer />
      <Pricing />
    </div>
  );
}

export default App;

Re-run the application by typing npm start on your terminal, and your application will now look like this.

Lastly, we’ll use our final UI component, the “Contact” section, to create a simple looking form. To do so, simply copy and paste the code below into this component.

// Contact.js
import React from "react";
import "./Contact.css";

const Contact = () => {
  return (
    <div id="contact">
      <h1>Contact Us</h1>
      <form>
        <input type="text" placeholder="Enter your name" required />
        <input type="email" placeholder="Enter your email" required />
        <textarea placeholder="Explain in brief..." name="message"></textarea>
        <input type="submit" value="send" />
      </form>
    </div>
  );
};

export default Contact;

Remember to include styles as well; simply paste the following code into the Contact.css file.

/* Contact.css */
#contact {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
#contact h1 {
  color: #fff;
  font-size: 3rem;
}
#contact form {
  width: 600px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 40px;
}
#contact form input,
#contact form textarea {
  width: 100%;
  height: 50px;
  margin: 5px 0px;
  padding: 10px;
  border: none;
  outline: none;
  background-color: #ffffff2d;
  color: #ffffff;
  border-radius: 5px;
}
#contact form textarea {
  height: 150px;
}
#contact form input[type="submit"] {
  height: 45px;
  background: linear-gradient(90deg, #00bfa6 20%, #00bf92);
  color: #ffffff;
  text-transform: uppercase;
}

Now that you’ve finished building this component, be sure to update it in the App.js file. So, when you’ve imported this specific component, your App.js should look like this.

// App.js
import React from "react";
import Navbar from "./components/Navbar";
import Home from "./components/Home";
import About from "./components/About";
import Offer from "./components/Offer";
import Pricing from "./components/Pricing";
import Contact from "./components/Contact";

function App() {
  return (
    <div className="App">
      <Navbar />
      <Home />
      <About />
      <Offer />
      <Pricing />
      <Contact />
    </div>
  );
}

export default App;

Simply, re-run the application by typing npm start on your terminal, and your application will now look like this.

Chatwoot setup: a step-by-step installation guide

Chatwoot cloud setup

There are several ways to get started with chatwoot. 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 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.

import React, { 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 your secret token here,
          baseUrl: BASE_URL,
        });
      };
    })(document, "script");
  }, []);

  return null;
};

export default ChatwootWidget;

It’s now time to import the full ChatwootWidget component into our App.js component, so the code insideApp.js file should look exactly like this after you’ve imported and integrated chatwoot to your application.

// App.js
import React from "react";
import Navbar from "./components/Navbar";
import Home from "./components/Home";
import About from "./components/About";
import Offer from "./components/Offer";
import Pricing from "./components/Pricing";
import Contact from "./components/Contact";
import ChatwootWidget from "./components/ChatwootWidget";

function App() {
  return (
    <div className="App">
      <Navbar />
      <Home />
      <About />
      <Offer />
      <Pricing />
      <Contact />
      <ChatwootWidget />
    </div>
  );
}

export default App;

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!