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 relating to inefficient and poor communications between business and customer. These disadvantages 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.

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

Chatwoot 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 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/ then click on Create a new account to sign up.

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

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

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.
   

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
   

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

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

A live version of this integration can be seen at 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. Join Aviyel’s Twitter space at AviyelHQ.

‌
For more tutorials and great contents, please follow me on Twitter @eunit99