Integrate Chatwoot Inside Vuejs application

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]

Lots of business corporations and firms nowadays understand that any competitive advantages they seek through their core products and services are soon lost when competitors duplicate them. Due to the strong rivalry, businesses are constantly looking for ways to differentiate their products from those of their competitors. One practical and important method is to focus on offering high-quality customer support and services. Customer service and assistance should strive to aid organizations in growing. It has the ability to give enterprises in all industries with a competitive advantage. Effective customer support and service is vital in developing client loyalty, in addition to establishing the link between the firm and its clients.Businessess now they are starting to provide full fledge customer assistance as well. As a result, they are able to expand their activities in order to better serve their clients. Customer service may be beneficial to both customers and businesses. Many shoppers make their final purchase decisions not only on the price of the product, but also on its variety and level of customer care.

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 Vue apps from the ground up, as well as integrating chatwoot. It is intended for those who are serious about learning Vue and integrating chatwoot from the ground up and want to concentrate on the fundamentals. We’ll build a complete landing page with ‘Vue’ and chatwoot that will allow users to fully utilize the chatwoot functionalities. This blog post will go through the fundamentals of ‘Vue’ as well as how to integrate chatwoot into a Vue application.

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

Why chatwoot ?

Chatwoot is incredibly easy to use. Its user-friendly design allows business representatives to focus only on customer care rather than learning how to use the platform. Chatwoot was launched in 2016. In 2017, the operation was forced to close due to a business failure. Rather than letting the code rot in their private repository, they decided to open-source it during the 2019 Hacktoberfest. When Chatwoot became a popular project on Hacker News, it came as a pleasant surprise. A failed program looks to have been restarted, with very impressive and promising outcomes. Click this link to learn more about chatwoot.What is Chatwoot?

Chatwoot’s main characteristics.

Chatwoot provides a standardized view of conversations taking place across many communication channels, such as email, websites, APIs, and other social media platforms.

Chatwoot’s characteristics and features:

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

• Live chat:Customers love live chat because it allows them to get quick answers to their inquiries and concerns. The Chatwoot live chat interface is simple and appealing, which is a winning mix for potential consumers. It’s also easy to use and has a beautiful look, which will entice most clients to use it to its full capacity.

• Shared inboxes:Chatwoot allows you to easily communicate with your customers and team members from a single spot.

• Private Notes:Communication within a team is allowed by using private notes in a chat that can be marked to communicate important information, resolve problems, and address concerns.

• Webhooks:Webhooks can also be used to convey events between apps like Slack and GitHub. Chatwoot can be seamlessly integrated with Slack, allowing you to manage discussions without ever having to log in to the platform’s dashboard.

• Canned responses:Typing the same response over and over again might be tedious. Chatwoot addresses this issue by providing prefabricated and pre-recorded short responses, significantly simplifying the engagement.

• Real-time reports: Reports are key assets for every organization, regardless of size or industry, and chatwoot provides real-time reporting, making it simple to record and analyse conversations, messages, and reaction times in real-time.

• Chatbots:Chatbots began to arise in huge numbers around the turn of the twenty-first century. Online conversation has been penetrated and occupied by interactive technology, which is frequently integrated with AI. Chatbots aren’t just for virtual assistants; many businesses use them to market their products, ideas, and services on websites, apps, and instant messaging platforms. Chatwoot’s chatbot features built-in integration with Rasa (open-source conversational AI) and Dialogflow (closed source conversational AI owned by google). One of the best benefits of this technology is that customers/users can delegate discussions to bots and engage with genuine humans when necessary.

Now that we’ve covered the basics of chatwoot, let’s get started and build our frontend application from the ground up.

Vuejs Installation requirements

We’ll need to install NodeJS to get started because we’ll be using it with Vue.js. You can get NodeJS from their official website; but, It is highly recommend to download the 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 you have installed, as well as what version of NPM (Node Package Manager) you have inside your system.

Now that we’ve installed Node and NPM, it’s time to install Vuejs’s Command Line Interface before we even proceed to install Vuejs. To install the CLI, open your terminal or cmd and type the following command:

yarn global add @vue/cli

The above script instructs yarn to install the Vue.js Command Line Interface globally, allowing you to use the CLI commands without having to install in each directory. If you get an error about not having permission, it means that yarn doesn’t have the necessary permissions to make changes to the file.

By running the following command into your terminal, you may test your freshly installed Vue.js CLI:

vue -V

You will also require an editor or Integrated Development Environment (IDE). We’ll be using VS Code for this tutorial, but feel free to use whatever you’re most familiar with.

Getting started: step by step installation guide

Navigate to your development folder and launch your terminal from there. Enter the following command:

vue create .

This command instructs the Vue.js CLI to build a project in that folder, though you are free to name the project whatever you like.So, type y or yes and press Enter

Next, using the arrow keys, navigate to Default ([Vue 3],babbel,eslint) and press “Enter.”

Then, you will be asked to “pick the package manager to use when installing dependencies”, using the arrow keys, navigate to use Yarn and press Enter again.

Bamm!! When you’re finished configuring your project options, Vue.js CLI will generate your project based on the options you choose. This may take some time, so feel free to grab some coffee!.

Finally, your folder structure should resemble something like this.

You’ll notice that Vue.js has suggested a few commands for us to try; let’s see what they do. This command builds a development server that will host our code on a local server and will automatically refresh if any changes in the source code are detected.So navigate inside that project and just type yarn serve in the project folder’s terminal.

Finally, your Vue application should look something like this.

Let’s create a simple landing page with Vue.

Installing some dependencies

Before we get started on the landing page, let’s add TailwindCSS to our project. To do so, navigate to the application root folder and open the terminal within that folder, then run yarn add tailwindcss. This command installs Tailwind CSS to your application. We must now configure our program to use it.

After you’ve successfully installed TailwindCSS, let’s install some more packages, such as postcss and autoprefixer

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

// package.json
{
  "name": "vuejs-chatwoot-integration",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "autoprefixer": "^10.4.2",
    "core-js": "^3.8.3",
    "postcss": "^8.4.6",
    "tailwindcss": "^3.0.23",
    "vue": "^3.2.13"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": ["plugin:vue/vue3-essential", "eslint:recommended"],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": ["> 1%", "last 2 versions", "not dead", "not ie 11"]
}

Seting up Vue.js and TailwindCSS

Vue-loader, which is a Webpack loader for Vue.js components that can be configured to use PostCSS, which Tailwind uses.This will then look for the settings in a postcss.config.js file and will be able to create the app with CSS from whatever module you install.

By default, Vue CLI does not produce a postcss.config.js file. That is something you must undertake on your own.

Let’s make a file called postcss.config.js in our root folder and paste the following code inside it.

//postcss.config.js

const autoprefixer = require("autoprefixer");
const tailwindcss = require("tailwindcss");

module.exports = {
  plugins: [require("tailwindcss"), require("autoprefixer")],
};

Again, let’s make a file called postcss.config.js in our root folder and paste the following code inside it.

module.exports = {
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Importing Tailwind

Whenever you construct a Vue app, no CSS is used; instead, components style is used. Let’s make a CSS file and add tailwind.so to do so, add a new folder called styles insdie our assets folder, along with a file called tailwind.css to it. As in src/assets/styles/tailwind.css Now, paste the following code into that tailwind.css file.

@tailwind base;
@tailwind components;
@tailwind utilities;

Folder structure should resemble something like this:

Let’s now include the location to this style in our main.js by adding this import link to the file.

import { createApp } from "vue";
import App from "./App.vue";
import "./assets/styles/tailwind.css";

createApp(App).mount("#app");

Let’s try using Tailwind in our project now that we’ve imported it. Let’s create a HomePage for our landing page purposes. Create a file called HomePage.vue in your components folder.Your folder structure should look something like this:

Copy the entire code template mentioned below inside your HomePage.vue file.

<template>
  <div class="text-indigo-400 m-6 bg-cover bg-fixed" style=" ;">
    <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="#"
          >
            Chatwoot-
            <span class="bg-clip-text text-transparent text-gray-700">
              Integration</span
            >
          </a>
        </div>
      </div>

      <!--Main-->
      <div
        class="container pt-24 md:pt-36 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-5xl text-gray-700 opacity-75 font-bold leading-tight text-center md:text-left"
          >
            <span class="text-transparent text-green-500">Vuejs</span> and
            <span class="text-transparent text-blue-500"> Chatwoot </span>
            integration
          </h1>
          <p
            class="text-base md:text-2xl mb-8 text-center md:text-left text-gray-700 my-4"
          >
            <span
              >Integrate chatwoot inside the Vuejs project from absolutely
              scratch!</span
            >
          </p>

          <form
            class="bg-teal-900 opacity-75 w-auto shadow-lg rounded-lg px-20 pt-6 pb-8 mb-4"
          >
            <div class="mb-4">
              <label
                class="block text-blue-300 py-2 font-bold mb-2"
                for="emailaddress"
              >
                Subscribe to our newsletter
              </label>
              <input
                class="shadow appearance-none border rounded w-full p-3 text-gray-700 leading-tight focus:ring transform transition hover:scale-105 duration-300 ease-in-out"
                id="emailaddress"
                type="text"
                placeholder="pramit@aviyel.com"
              />
            </div>

            <div class="flex items-center justify-between pt-4">
              <button
                class="bg-gradient-to-r from-teal-400 via-green-500 to-blue-500 hover:from-pink-500 hover:to-green-500 text-gray-700 font-bold py-2 px-4 rounded focus:ring transform transition hover:scale-105 duration-300 ease-in-out"
                type="button"
              >
                Subscribe
              </button>
            </div>
          </form>
        </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 transform -rotate-2 transition hover:scale-10 duration-700 ease-in-out hover:rotate-2"
            src="../assets/ChatwootVue.svg"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HomePage",
};
</script>

<style>
#app {
  margin: 0;
  padding: 0;
}
</style>

After you have successfully created your component, it is time to import that component to our App.vue file. To do so, simply type import HomePage from "./components/HomePage.vue" and then above inside that template use that component and finally below inside the export default add that HomePage component inside the component.Also, dont forget to provide some styles to your application. Finally, your App.vue should look something like this.

// App.vue
<template>
  <HomePage />
  <ChatwootWidget />
</template>

<script>
import HomePage from "./components/HomePage.vue";
import ChatwootWidget from "./components/ChatwootWidget.vue";

export default {
  name: "App",
  components: {
    HomePage,
    ChatwootWidget,
  },
};
</script>

<style>
#app {
  margin: 0;
  padding: 0;
  background-image: url("./assets/Back.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;

  height: 100vh;

  display: flex;
  flex-direction: column;
}
</style>

Simply, re-run the application by typing yarn 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 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 Vue app and create a new component folder and inside that folder create a new file/component called ChatwootWidget.vue 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.

<script>
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: "jaLCEXip3fFsAHUpwC3cFpHj",
      baseUrl: BASE_URL,
    });
  };
})(document, "script");

export default {
  name: "ChatwootWidget",
};
</script>

The nicest feature of chatwoot is that you may personalize it to your preferences. You can, for example, move the floating bubble, lengthen it, alter the language, and hide the message bubble. The insertion of the following line of code is all that is required.

It’s the exact same procedure you used to import HomePage components earlier.

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

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

<template>
  <HomePage />
  <ChatwootWidget />
</template>

<script>
import HomePage from "./components/HomePage.vue";
import ChatwootWidget from "./components/ChatwootWidget.vue";

export default {
  name: "App",
  components: {
    HomePage,
    ChatwootWidget,
  },
};
</script>

<style>
#app {
  margin: 0;
  padding: 0;
  background-image: url("./assets/Back.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;

  height: 100vh;

  display: flex;
  flex-direction: column;
}
</style>

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!