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

Many businesses are currently being chastised by their competitors. Businesses are continually looking for new ways to craft new items as a result of the severe competitive market. Focusing on providing high-quality customer support and services is one practical and crucial technique. Customer service and support can help organizations prosper and might even provide them a competitive advantage. Client support and service, in addition to improving the relationship between the business and its customers, plays an important role in increasing customer loyalty for those businesses.Customer service benefits both customers and businesses. Many purchasers 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.

Chatwoot’s Revolution and Evolution

Chatwoot is a Ruby and Vue.js based open source customer relationship platform. It was created from the ground up to enable customer-service teams to create end-to-end issue management and support systems.Chatwoot is a free open source live chat platform that offers enterprise-level features.

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

Chatwoot is also very user-friendly. Its user-friendly interface lets business agents to concentrate solely on customer service rather than learning how to use the platform itself. To learn more about chatwoot, click this Links.What is Chatwoot?

Chatwoot’s main characteristics.

Chatwoot provides a standardized view of discussions occurring across a variety of communication channels, including email, websites, APIs, and other social media platforms.

Chatwoot has a number of significant features, including:

• Real-time reports: Reports are critical and important assets for any organization, regardless of size or industry, and chatwoot delivers real-time reporting, making it simple to record and evaluate discussions, messages, and reaction times in real-time.

Overview reports

The overview section simply displays up with Overview of the Reports.

Reports can be created for a variety of time periods. This is done by choosing a time period from the drop-down menu as shown below. It is set to the latest 7 days by default.

Conversations

Inside Overview reports section, head over to the Conversations tab. The plot will display the conversations that took place on the particular days.

Incoming message

Inside Overview reports section, head over to the Incoming message tab. The plot will display the incomming messages that took place on that particular days.

Outgoing message

Inside Overview reports section, head over to the Outgoing message tab. The plot will display the outcoming messages that took place on that particular days.

Response time

Inside Overview reports section, head over to the Response time tab. The plot will display the average number of hours taken to give first response to a conversation with a customer.

Resolution time

Inside Overview reports section, head over to the Resolution time tab. The plot will display the average number of hours taken to resolve a particular conversation with a customer.

Resolution count

Inside Overview reports section, head over to the Resolution count tab. The plot will display the number of conversations resolved on that particular days.

CSAT reports

Inside this sections, you can find all of the Customer Satisfaction Surveys that were collected from consumers at the end of the conversation.

Agents reports

In this sections,Reports can also be filtered and downloaded by agent.

Labels reports

In this sections,Reports can also be filtered and downloaded by labels.

Inbox reports

In this sections,Reports can also be filtered and downloaded by inboxes.

Team reports

In this sections,Reports can also be filtered and downloaded by teams.

• 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.

• 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.

• 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.

• Chatbots:Around the turn of the twenty-first century, chatbots began to appear in large numbers. Interactive technology, which is commonly combined with AI, has infiltrated and occupied online chat. Chatbots aren’t just for virtual assistants; they’re also used by a variety of companies to promote their products, ideas, and services on websites, apps, and instant messaging platforms. Chatwoot’s chatbot functionality includes built-in connectivity with Rasa (open-source conversational AI) and Dialogflow (closed source conversational AI owned by google). Customers/users can delegate conversations to bots and communicate with actual humans when necessary, which is one of the best aspects of this technology.

Integration of Chatwoot inside Vanilla HTML,CSS and Javascript project.

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.

Now copy the created code and put it into a notepad somewhere.

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. Now, proceed in the same manner and follow the same steps that we previously did when creating a website channel.The main benefit of deploying chatwoot on Heroku is that you have full control over your entire application and your entire data.

HTML landing page project setup:

Now that we’ve completed the chatwoot setup, let’s get to work on our landing page using standard HTML, CSS, and Javascript. Create a folder for the project and name it whatever you like, then create a index.html file and three other folders called scripts, styles, and assets inside that particular folder.So, inside the scripts folder, we add all of our javascript files, inside the styles folder, we put all of our project’s styles, and finally, inside the assets folder, we put all of our images and logos. Your final folder structure should resemble something like this:

Give this project a title, then make a header section, and within that header section, create three div with the class names logo, toggle, and navigation, and then go to that navigation and create a ul tag and a div tag, respectively.Give that last div a class name of social-bars and put all the social media links and image source inside it . Finally, inside the index.html file, your code should look like this.Also, at the very top inside the head section, do not forget to import all the styles from the styles folder.

<!-- index.html -->
<!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" />
    <link rel="stylesheet" href="./styles/style.css" />
    <title>Aviyel</title>
  </head>
  <body>
    <header>
      <div class="logo">Aviyel</div>
      <div class="toggle"></div>
      <div class="navigation">
        <ul>
          <li><a href="index.html">HOME</a></li>
        </ul>
        <div class="social-bar">
          <ul>
            <li>
              <a href="https://www.facebook.com">
                <img
                  src="./assets/Facebook.png"
                  alt="facebook"
                  style="width: 120%; height: auto"
                />
              </a>
            </li>
            <li>
              <a href="https://twitter.com/pramit_armpit">
                <img
                  src="./assets/twitter.png"
                  alt="twitter"
                  style="width: 100%; height: auto"
                />
              </a>
            </li>
            <li>
              <a href="https://www.github.com/pramit-marattha">
                <img
                  src="./assets/github.png"
                  alt="github"
                  style="width: 100%; height: auto"
                />
              </a>
            </li>
          </ul>
          <a href="mailto:pramit@aviyel.com" class="email-icon">
            <img
              src="./assets/email.png"
              alt="email"
              style="width: 100%; height: auto"
            />
          </a>
        </div>
      </div>
    </header>
  </body>
</html>

Now that you’ve finished with the header section, let’s move on to the main page layout. To do so, first make a section tag, then inside that section tag, create one img tag with the class name home-image and another div tag with the class name home-content.Create a “heading”(h1) tag and a “paragraph”(p) tag within that final “div” tag with the class name of home-content, and your final code should now look like this.

<!-- index.html -->
<!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" />
    <link rel="stylesheet" href="./styles/style.css" />
    <title>Aviyel</title>
  </head>
  <body>
    <header>
      <div class="logo">Aviyel</div>
      <div class="toggle"></div>
      <div class="navigation">
        <ul>
          <li><a href="index.html">HOME</a></li>
          <li><a href="services.html">SERVICES</a></li>
          <li><a href="work.html">WORK</a></li>
          <li><a href="contact.html">CONTACT</a></li>
        </ul>
        <div class="social-bar">
          <ul>
            <li>
              <a href="https://www.facebook.com">
                <img
                  src="./assets/Facebook.png"
                  alt="facebook"
                  style="width: 120%; height: auto"
                />
              </a>
            </li>
            <li>
              <a href="https://twitter.com/pramit_armpit">
                <img
                  src="./assets/twitter.png"
                  alt="twitter"
                  style="width: 100%; height: auto"
                />
              </a>
            </li>
            <li>
              <a href="https://www.github.com/pramit-marattha">
                <img
                  src="./assets/github.png"
                  alt="github"
                  style="width: 100%; height: auto"
                />
              </a>
            </li>
          </ul>
          <a href="mailto:pramit@aviyel.com" class="email-icon">
            <img
              src="./assets/email.png"
              alt="email"
              style="width: 100%; height: auto"
            />
          </a>
        </div>
      </div>
    </header>

    <!-- Main Home page -->
    <section class="home">
      <img
        src="./assets/whatIsAviyel.png"
        class="home-image"
        src="agency image"
      />
      <div class="home-content">
        <h1>What is Aviyel ?</h1>
        <p>
          Aviyel is a community-based, open source monetization platform. We are
          commited to a widespread adoption of open source projects from
          developer, creator and maintainer communities.
        </p>
        <a href="contact.html" class="getstarted">Get started</a>
      </div>
    </section>
  </body>
</html>

Don’t forget to import all the scripts from the scripts folder at the very end, immediately below the section tag.

<script src="./scripts/app.js"></script>

Let’s add some toggling script to our project, so go to the scripts directory and create a file called app.js in that folder, then paste the following code within it.

// scripts/app.js
const toggle = document.querySelector(".toggle");
const navigation = document.querySelector(".navigation");

toggle.addEventListener("click", () => {
  toggle.classList.toggle("active");
  navigation.classList.toggle("active");
});

Finally, let’s give our project some styles. To do so, navigate to the styles directory and create a file called styles.css in that folder, then paste the following styles into it.

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

:root {
  --primary-color: #8661d1;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  font-family: "Poppins", sans-serif;
  color: rgb(47, 46, 46);
  background-color: aliceblue;
}

section {
  display: flex;
  flex-direction: column;
  height: 100vh;
  align-items: center;
  padding: 100px;
  margin-top: 70px;
}

section.home {
  flex-direction: row;
  margin-top: 0;
}

h1 {
  font-size: 30px;
  font-weight: 500;
}

p {
  margin: 20px 0 10px;
  font-size: 1.1rem;
}

.getstarted {
  background: var(--primary-color);
  color: white;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  margin: 25px 0;
  padding: 10px 30px;
  border-radius: 10px;
  border: 0;
}

.getstarted:hover {
  transform: scale(0.97);
}

.logo {
  position: absolute;
  top: 30px;
  left: 100px;
  font-size: 3rem;
  font-weight: 600;
  z-index: 20;
}

/* Toggle navigation */

.toggle {
  position: fixed;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  background: var(--primary-color) url(../assets/menu.png);
  background-size: 50px;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 20;
  border-radius: 5px;
  cursor: pointer;
}

.toggle.active {
  background: var(--primary-color) url(../assets/exit.png);
  background-size: 40px;
  background-position: center;
  background-repeat: no-repeat;
}

.navigation {
  /* display: none; */
  position: fixed;
  top: 0;
  left: 100%;
  width: 100%;
  height: 100%;
  /* background-color: var(--primary-color); */
  background-color: white;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
}

.navigation.active {
  left: 0;
}

.navigation ul {
  position: relative;
}

.navigation ul li {
  position: relative;
  list-style: none;
  text-align: center;
}

.navigation ul li a {
  font-size: 2.2rem;
  color: black;
  text-decoration: none;
  font-weight: 300;
}

.navigation ul li a:hover {
  color: var(--primary-color);
}

.navigation .social-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.navigation .social-bar a {
  display: inline-block;
  transform: scale(0.5);
}

.navigation .email-icon {
  position: absolute;
  bottom: 40px;
  transform: scale(0.5);
}

/* Home content and images */
.home-image {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 100%;
}

.home-content {
  position: relative;
  z-index: 5;
  max-width: 500px;
}

Now, insdie assets folder download everything from here and add all of the assets used in this project.

Finally, it’s time to connect the chatwoot website channel. To do so, simply copy and paste the complete javascript code provided for us by chatwoot into our app.js file located within the scripts folder, so your final code should look something like this.

// app.js
const toggle = document.querySelector(".toggle");
const navigation = document.querySelector(".navigation");

toggle.addEventListener("click", () => {
  toggle.classList.toggle("active");
  navigation.classList.toggle("active");
});

(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: //"your secret code",
      baseUrl: BASE_URL,
    });
  };
})(document, "script");

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

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!