Tag Master

Tag Master allows you to create, view, and delete tags and canned responses in an easy and predictable way.

Preview

Code along

This is a training application that we use in our video course: the Practical Guide to Building LiveChat Apps. During the course, you'll learn:

• How to create an app from start to finish.
• Best programming practices.
• How to effectively use the LiveChat API.
• Superb developer tools to facilitate your workflow.
• Different hosting options and how to use them.
• How to excel at the LiveChat app review.
• Monetization options at the LiveChat Developer Program.

If this sparks your interest, be sure to visit the course website!

Branch breakdown

For the video course purposes, this repository is divided into four branches:

1. master: This branch includes the whole code for this application where both API functionalities and authorization are implemented.
2. base: This branch includes basic files such as index.js and package.json so you can smoothly begin working on the project.
3. authorization: This branch includes implemented LiveChat Accounts SDK authorization.
4. apiCalls: This branch includes implemented communication with the LiveChat Configuration API.

App setup

Before you start

To use this application in your LiveChat dashboard, you'll need to create your own app in the Developer Console and get the Client Id.

Getting started

1. Go to Apps in Developers Console.

2. Click New App and give it an App Name.

3. Choose the LiveChat product as the product you want to build for.

4. Go to Building Blocks.

5. Add App Authorization and mark it as JavaScript App. Your Client Id will be displayed there.

6. Add scopes canned_responses_read, canned_responses_write, tags--all:rw, tags--groups:rw to the App scopes and API access box.

7. Fetch the Tag Master app repository.

8. In the app directory, do the following steps :

   • Install dependencies (npm install).
   • In your project, go to src/utils/config.js and replace client_id with your own Client Id (the one from Step 5).
   • Run your app (npm start).

9. Add your app's url (for example: https://localhost:3000) in these two locations:

   • Redirect URI whitelist
   • Agent App Widgets

10. In Private installation, click Install app.

You should now be able to use Tag Master with LiveChat.

How it works

Agent App Widgets are web applications loaded inside the LiveChat Agent App. All agents can interact with the widget during chats with customers. The widget itself is displayed in the Agent’s App right sidebar.

To get information such as tags, you need to use Configuration API.

In order to pull data from our server, you need to include an access_token in all the requests. You can get it using one of the agent authorization flows.

More sample apps

Experiment more with our different sample apps:

• Progress - widget for helping you monitor statistics of your team, such as chat ratings, response times, and chatting times.
• Supervisor - widget for helping you monitor weekly progress of your agents and also their availability.
• Sample Redirect App with the redirect authorization flow
• Sample Popup App with the popup authorization flow

Feedback

If you find some bugs, please create an issue in this repo. We'll try to fix it ASAP!

Text Platform: who are we?

Behind Text, there’s a team of passionate people building online customer service software with online chat, help desk software, chatbot, and web analytics capabilities.

With a suite of five products (LiveChat, ChatBot, HelpDesk, KnowledgeBase, and OpenWidget) and their powerful APIs, we power customer communication for 36,000 companies in 150 countries.

The Platform is a range of products and services that can be used to build a variety of communication tools for businesses. Our Developer Program and Marketplace create an open ecosystem for developers, partners, and customers. With our advanced APIs and comprehensive documentation, you can shape the future of communication with us — starting today.

Join our Discord to learn, get inspired, and meet other developers!

---

This project was bootstrapped with Create React App.