Integrate Chatwoot Inside Angular 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]

Commercial enterprises and firms today recognize that any competitive advantages they seek through their core products and services are quickly lost when competitors imitate them. Because of the intense competition, businesses are continuously looking for ways to differentiate their products from those of their competitors. One practical and vital technique is to focus on providing high-quality customer support and services. Customer service and assistance should strive to help organizations flourish. It has the potential to provide firms in all industries with a competitive advantage. Effective customer support and service are critical in generating client loyalty and establishing the link between the firm and its clients. Businesses are now beginning to offer full-fledged customer service as well.As a result, they can expand their activities to better serve their clientele. Both customers and businesses may benefit from customer service. Many customers base their final purchase selections not only on the product’s price, but also on its variety and level of customer service.

Many buyers base their final purchasing decisions on the goods’ pricing, range, and level of customer care. As a result, businesses and enterprises should use customer service technologies to provide excellent service.Chatify, Salesforce, Intercom, and Chatwoot are just a few examples of customer support technologies.

This tutorial focuses on the most critical tasks and concepts for better understanding and building Angular applications from absolute ground up, including how to integrate chatwoot. It’s for folks who are serious about learning ‘Angular’ and integrating ‘chatwoot’ from scratch and want to concentrate on the fundamentals. We’ll use Angular and Chatwoot to develop a full landing page that allows users to take advantage of all of Chatwoot's capabilities. This blog session will go through the fundamentals of Angular as well as how to integrate chatwoot into an Angular app.

Here’s a look at what our app will look like when it’s completed:

Why chatwoot ?

Chatwoot is a user-friendly platform as well. Its user-friendly interface allows business agents to focus entirely on providing excellent customer service rather than learning how to use the platform. In the year 2016, Chatwoot was founded. The operation was shut down in 2017 due to business failure. Rather than let the code linger in their private repository, they decided to open-source it during the 2019 Hacktoberfest. Chatwoot becoming a prominent Hacker News project was a pleasant surprise. A failed attempt looks to have been revived, with very impressive and promising outcomes.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’s characteristics and features:

• Real-time reports: Chatwoot provides real-time reporting, making it simple to record and analyse discussions, messages, and reaction times in real-time, regardless of size or industry/businessess.

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

• Private Notes:Inter-team communication as well as coordination is possible through private notes in a chat that can be marked to communicate important information, solve problems, and address concerns.

• Webhooks:Webhooks can also be used to share information across programs like Slack and GitHub. Chatwoot may 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 get monotonous 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.

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

Angular Installation requirements

We’ll need to install NodeJS to get started because we’ll be using it with Angular.js. You can get NodeJS from their official website; but, It is highly recommend to download the latest LTS version because it should be more stable.To see if you’ve installed NodeJS correctly, open your terminal and type the following command:

node -v
npm -v

It will tell you what version of NodeJ and NPM (Node Package Manager) you have installed on your system.

Install the Angular CLI

Now that we’ve installed Node and NPM, it’s time to install Angular’s Command Line Interface before we even proceed to install Angular application.The Angular CLI is used to create projects, produce application and library code, and conduct ongoing development operations including testing, bundling, and deployment.

Open a terminal window and enter the following command to install the Angular CLI:

npm install -g @angular/cli

The preceding script tells npm to install the Angular.js Command Line Interface globally, so you don’t have to install it in each directory. If you receive an error about not having permission, it signifies that ‘npm’ lacks the appropriate permissions to modify the file.

You may test your newly installed Angular.js CLI by typing the following command into your terminal:

ng version

You’ll also need an editor, often known as a ‘Integrated Development Environment (IDE)’. For this tutorial, we’ll be using Visual Studio Code, but feel free to use whatever you’re most comfortable with.

Create a workspace and a start-up application.: step by step installation guide

You develop apps in the context of an Angular workspace.So, a workspace is basically a collection of Angular projects (that is, applications and libraries) that are often co-located in a single source-control repository and are powered by the Angular CLI.To make a new workspace and an initial beginning app, follow these steps:

• Run the CLI command “ng new” and provide the name “angularjs-chatwoot-integration”, as shown in the image below

ng new angularjs-chatwoot-integration

• The ng new command asks for details about the features you want to include in the application.For example, at this particular step, you will be prompted to select a routing feature; simply press enter to go to the next step.

• In this step, you’ll be asked if you want to utilize “CSS,” “LESS,” “SASS,” or “SCSS” for your project’s stylesheet formatting. For the time being, simply select “CSS” and HIT ENTER, as we will be using TailwindCSS later.

• It is possible that the installation might take some time(depends on your network and PC speed).

Run the application

You can use the Angular CLI’s server to create and serve your app locally. So go to the workspace folder, such as “angularjs-chatwoot-integration,” and run the command inside it:

cd angularjs-chatwoot-integration
ng serve --open

The ng serve command starts the server, watches your files, and rebuilds the app as you modify them. The --open (or simply -o) option opens your browser to http://localhost:4200/ by default. If your installation and setup went smoothly, you should see something like this.

Tailwind css integration

Let’s add TailwindCSS, postcss, and autoprefixer to our project before we start constructing our angular application. To do so, go to the application root folder and open the terminal there, then type npm install -D tailwindcss postcss autoprefixer in the terminal. Tailwind CSS, postcss, and autoprefixer are all installed with one command. To fully leverage the capabilities of TailwindCSS, we must now configure our application correctly.

After you’ve installed the dependencies, your package.json file should look like this:

// package.json
{
  "name": "angularjs-chatwoot-integration",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~13.2.0",
    "@angular/common": "~13.2.0",
    "@angular/compiler": "~13.2.0",
    "@angular/core": "~13.2.0",
    "@angular/forms": "~13.2.0",
    "@angular/platform-browser": "~13.2.0",
    "@angular/platform-browser-dynamic": "~13.2.0",
    "@angular/router": "~13.2.0",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.2.4",
    "@angular/cli": "~13.2.4",
    "@angular/compiler-cli": "~13.2.0",
    "@types/jasmine": "~3.10.0",
    "@types/node": "^12.11.1",
    "autoprefixer": "^10.4.2",
    "jasmine-core": "~4.0.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.1.0",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "postcss": "^8.4.5",
    "tailwindcss": "^3.0.23",
    "typescript": "~4.5.2"
  }
}

Seting up Vue.js and TailwindCSS

When you’ve finished installing all of the dependencies, you’ll need to create a configuration file for Tailwind to work on our application. You can either manually create a tailwind.config.js file in your application’s root directory, or you can use the npx tailwindcss init command that Tailwind already provides, which will load all of the necessary configuration files on your project.

After you’ve finished with that configuration file, you’ll need to copy and paste the following code exactly into that tailwind.config.js file.

// tailwind.config.js
module.exports = {
  content: ["./src/**/*.{html,ts}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Now Add the @tailwind directives for each of Tailwind’s layers to your styles of your project. To do so, go to the source directory and edit the styles.css file.Copy and paste the following command exactly as mentioned below.

/* styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Your final folder structure should look something like this once you’ve finished with the tailwind integration and all of the project setup.

Now it’s time to bring our project to life. To do so, go to the main sourcesrc directory and look for the app directory. Inside that directory, you’ll find a slew of files, including routing, module, and component files for the app. To make some changes to your project, go to the app.component.html file and paste the following code inside it.

<!-- app.component.html -->
<h1 class="text-3xl font-bold underline">Hello there!</h1>

Simply type ng serve on your terminal to restart the application, and it should now appear like this.

Simply copy and paste the complete code template exactly as described below into your app.component.html file. We’ve already prepared the landing page template using vanilla HTML with tailwind CSS.

<!-- app.component.html -->
<div class="text-indigo-400 m-6 bg-cover bg-fixed">
  <div class="h-full">
    <div class="w-full container mx-auto">
      <div class="w-full flex items-center justify-between">
        <a
          class="flex items-center text-blue-500-500 no-underline hover:no-underline font-bold text-2xl lg:text-4xl"
          href="#"
        >
          <span
            class="bg-clip-text text-5xl text-transparent text-red-500 pr-2"
          >
            Angular</span
          >
          <span class="bg-clip-text text-transparent text-white pr-2">& </span>
          <span
            class="bg-clip-text text-5xl text-transparent text-blue-500 pr-2"
          >
            Chatwoot</span
          >
          <span class="bg-clip-text text-transparent text-white pl-2">
            Integration</span
          >
        </a>
      </div>
    </div>

    <!--Main-->
    <div
      class="container pt-24 md:pt-30 mx-auto flex flex-wrap flex-col md:flex-row items-center"
    >
      <!--Left Col-->
      <div
        class="flex flex-col w-full xl:w-2/5 justify-center lg:items-start overflow-y-hidden"
      >
        <h1
          class="my-4 text-3xl md:text-3xl text-white font-bold leading-tight text-center md:text-left"
        >
          <span class="text-transparent text-red-500">Angular</span> +
          <span class="text-transparent text-blue-500"> Chatwoot </span>
        </h1>
        <p
          class="text-base md:text-2xl mb-8 md:text-left text-white my-4 text-justify"
        >
          <span
            >It's for people who are serious about learning
            <span class="text-transparent text-red-500">Angular</span> and
            integrating
            <span class="text-transparent text-blue-500">chatwoot</span> from
            the ground up and want to focus on the basics. We'll create a full
            landing page with
            <span class="text-transparent text-red-500">Angular</span> and
            <span class="text-transparent text-blue-500">chatwoot</span> that
            allows users to fully utilize the
            <span class="text-transparent text-blue-500">chatwoot</span>
            features. This blog session will cover the basics of
            <span class="text-transparent text-red-500">Angular</span> as well
            as how to incorporate
            <span class="text-transparent text-blue-500">chatwoot</span> into a
            <span class="text-transparent text-red-500">Angular</span>
            application.</span
          >
        </p>

        <div class="w-full xl:w-3/5 p-2 overflow-hidden">
          <img
            class="mx-auto w-full md:w-11/12 transition"
            src="../assets/AngularChatwoot.svg"
          />
        </div>
      </div>
      <!--Right Col-->
      <div class="w-full xl:w-3/5 p-2 overflow-hidden">
        <img
          class="mx-auto w-full md:w-11/12 transition"
          src="../assets/browserCard.svg"
        />
      </div>
    </div>
  </div>
</div>

Now that the template is locked and loaded, add the following styles to your project by going to your app.component.css file and copying the exact following code.

/* app.component.css */
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;1,200;1,400;1,500&display=swap");
:host {
  margin: 0;
  padding: 0;
  background-image: url("../assets/background.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: "Poppins", sans-serif;
}

If you’d want to use any of the assets used in this project, you can get them all from this link for absolutely free.

Simply, restart the application by typing ng serve on your terminal, and your application will now look like this.

Chatwoot Configuration.

Chatwoot Setup on Heroku

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

• Step First: Go to https://www.heroku.com/ to create a free Heroku account, then go to the chatwoot’s GitHub repository and click the Deploy to Heroku button located inside the readme section.

• Step Second: You’ll be able to view the basic setup that chatwoot has already accomplished after you click that button. Give the App name, and then select Deploy App, replacing the FRONTEND_URL with the App name, you just specified.

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

• Step Fourth:Go to the dashboard’s settings panel after the app has been deployed.

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

• Step Sixth: Make sure the web and worker resources are enabled in the Resources section.

• Step Seventh: If everything went well, you should be able to log into your chatwoot account.

So, you’ve successfully made your first account. The biggest advantage of running chatwoot on Heroku is that you have complete control over your application and 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 get started by creating an inbox. The inbox channel serves as a communication hub, allowing you to manage everything from live chat to a Facebook page, a Twitter profile, email, and WhatsApp.

• Step Second: Now, as seen below, set up a website and domain name, as well as all of the heading and tagline information.

• Step Third: Finally, add Agents to control your mailbox. Keep in mind that only approved Agents will have complete access to the inbox.

• Step Fourth:

Web channel Script update

The website channel must now be connected. Simply copy and paste the entire javascript code provided by chatwoot. Now, head back to our Angular app and head over inside the main index.html file and inside it create a script tag and add async attribute which helps to loads the Chatwoot asynchronously and will helps things to get downloaded in the background while the page is being parsed and, executed as soon as it is available. Simply follow the exact same steps outlined in the following code below.

Now is the time to connect the website channel. Simply copy and paste the whole javascript code that chatwoot has provided. Return to our Angular app and create a script tag and add async attribute, within the main index.html file, which will help to load the Chatwoot asynchronously and will allow items to be downloaded in the background while the page is being parsed and executed as soon as it is available. Simply repeat and follow the procedures shown in the code below.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Angularjs Chatwoot Integration</title>
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
  </head>
  <body>
    <app-root></app-root>
    <script async>
      (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: "9rFYcGWNWi3m8AjN74TeUdnD",
            baseUrl: BASE_URL,
          });
        };
      })(document, "script");
    </script>
  </body>
</html>

One of the best part of chatwootSetting is that you can customize it to your liking. You can move the floating bubble around, lengthen it, change the language, and hide the message bubble.

So, inside the script tag, but before the self-invoking function, paste this exact chunk of code.

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

Your final code of index.html file should resemble something similar to this.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Angularjs Chatwoot Integration</title>
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
  </head>
  <body>
    <app-root></app-root>
    <script async>
      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: "9rFYcGWNWi3m8AjN74TeUdnD",
            baseUrl: BASE_URL,
          });
        };
      })(document, "script");
    </script>
  </body>
</html>

Now that you’ve accomplished the chatwoot integration in an Angular application, your finished project should look 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!