How to use Chatwoot as a Live Chat Feature in your Web Application
Tags: chat, livechat, chatwoot, aviyel
Published: 2022-04-01 19:08:49

# How to use Chatwoot as a Live Chat Feature in your Web Application

## Table of Content

1. Introduction
2. What is live chat
3. Benefits of live chat to your business
4. Introducing Chatwoot as a live chat
5. Getting started with your Chatwoot
6. Getting started with your webapp
7. Conclusion

### Introduction

Phone calls and emails are two ways through which businesses communicate to their customers, but these have their limitations. Phone calls and emails do not work for people from different time zones. Emails take a while for dual communication - sending an email and receiving a response back.

In today's fast paced world, we have seen lots of [disadvantages](https://fsd.servicemax.com/2017/11/08/6-business-impacts-poor-communication) relating to inefficient and poor communications between business and customer. These [disadvantages](https://www.linkedin.com/pulse/20140729213717-29954114-how-does-poor-customer-service-affect-a-business/) include but not limited to loss of current customers, loss of potential customers, loss of profits amongst others. But then, there exist a solution - live chat.

### What is live chat

Live chat is an online communication app that enables you and your website visitors to chat in real-time.

Online chat is a great alternative to phone calls or emails. All you or your visitors need to do is to type the message inside the chatbox and send it.

### Benefits of live chat to your business

Below are some selected benefits of live chat feature. To learn more about these benefits, please click [here](https://www.helpscout.com/helpu/live-chat-improves-customer-service/).

1. Faster response time
2. Flexibility
3. Live chat helps with customer acquisition and onboarding
4. Live chat enables 24/7 support
5. Live chat can give you an edge over your competition
6. Creates a contact database for future marketing campaigns.

### Introducing Chatwoot as a live chat

<img src="https://i.ibb.co/QKVnmXc/Chatwoot.png" alt="Chatwoot logo" border="0">

[Chatwoot](https://www.chatwoot.com/) is an open-source customer engagement platform. It is alternative to other live chat services such as Tidio, Olark, JivoChat, Intercom, Zendesk amongst others. Chatwoot is a better alternative because it allows you to connect to your customer conversation channels and converse with your customers from a single place. Chatwoot supports many languages which include Arabic, Catalan, Czech, Danish, English, Finnish, French, Malayalam, Dutch, Portuguese, Spanish, Swedish, Vietnamese, Chinese (Simplified), Chinese (Traditional)

Chatwoot is a better way to talk to your customers, manage conversations, build relationships and delight your users, all from one place. With Chatwoot, you can also integrate Facebook, Twitter, Whatsapp channels, website live chats, API channels, mobile apps with the [open source](https://aviyel.com/post/184/the-ultimate-open-source-alternative-to-manage-customer-engagement-chatwoot-is-here) software.

### Getting started with your Chatwoot

To begin, you need to be signed up on the Chatwoot platform. To do that, head over to [https://chatwoot.com/](https://app.chatwoot.com/app/login) then click on **Create a new account** to sign up.

<img src="https://i.ibb.co/GTSnW5y/Chatwoot-Create-Account.png" alt="Chatwoot-Create-Account" border="0">

- Then fill in your details
- After signing up, you will receive an email confirming your account creation.
- Confirm the account by clicking the “Confirm my account” link and proceed to log in.

<img src="https://aviyel.com/cdn-cgi/image/format=auto/assets/uploads/files/1630472497585-chatwoot-signup.png" alt="Chatwoot signup" align="center">

- Chatwoot dashboard will then be fully accessible to you, and you may start integrating it to whatever platform (websites, Facebook, Twitter, etc.) you want.

See image below for how your dashboard would look like.

<img src="https://i.ibb.co/QjCxGsj/chatwoot-dashboard.webp" alt="chatwoot-dashboard" border="0">

1. The next step is to create an **inbox**. Inbox channel is like a communication hub where everything like, live-chat, Facebook page, Twitter profile, email, and WhatsApp can be managed.
2. Next is to choose which services you wish to add. This is where we will select website. Click the highlighted area as shown in the image below to create an inbox.
<img src="https://i.ibb.co/zHpCxTq/inbox.png" alt="inbox" border="0">

3. The next step is to configure a website and domain name, as well as all of the heading and tagline information like shown below

4. Add "Agents" to manage the inbox. Keep in mind that only designated "Agents" will have full access to the inbox.

5. Congratulations. The website channel has been successfully created
<img src="https://i.ibb.co/3hPdvBw/dashboard.png" alt="dashboard" border="0">

> In this tutorial, I shall walk you through setting Chatwoot in your website/webapp.

### Getting started with your webapp

#### Prerequisites

1. Code Editor (_preferably VSCode_)
2. Chatwoot account
3. Knowledge of HTML, CSS, and JavaScript

#### Setting up your dev environment

On the command line, create a new folder

`mkdir <project name>  && cd <project name>`

In your project, probably HTML website, in your `footer`, inside `<script> </script>` tags, paste the following code

``` JavaScript

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

When done with implementation, below is what you should see.

<img src="https://i.ibb.co/XtcV2zc/chat.png" alt="chat" border="0">

A live version of this integration can be seen at [https://blogposts-eunit99.vercel.app/](https://blogposts-eunit99.vercel.app/)

### Conclusion

In this tutorial, I walked you through on how to use Chatwoot as a Live Chat Feature in your Web Application. We learned about live chat and its integration with our website using Chatwoot.‌

To know more about Aviyel, please follow our discussions [here](https://aviyel.com/discussions). Join Aviyel’s Twitter space at [AviyelHQ](https://twitter.com/aviyelhq?lang=en).

‌
For more tutorials and great contents, please follow me on Twitter [@eunit99](https://twitter.com/eunit99)