Introduction

This article showcases all possible ways to extend, customize, or build upon the LiveChat Platform.

Customize the interface of LiveChat, implement your own chat widget, or automate a variety of tasks. Create minor tweaks for your team, build integrations with other platforms, or create new products in the LiveChat ecosystem.

App capabilities

LiveChat Platform provides multiple tools for developers, so that your app can do the following and other things:

  • Integrate with other products and services
  • Extend LiveChat user interfaces
  • Automate tasks with webhooks
  • Read and write LiveChat data
  • Implement a custom Chat Widget
  • Let users sign in to your service with Sign in with LiveChat
  • Send & receive rich messages with Beta Chat APIs*

Are you building an app for everyone? We provide simple monetization and distribution tools.

*) We're working on a new set of APIs, which introduce new features and multiple improvements. The most important one is the new Chat API. It allows you to send and receive rich messages, exchange events, and perform all variety of actions within the LiveChat ecosystem. Got you curious? Hit us up at developers@livechatinc.com for more details and early access!

Creating LiveChat apps

To create LiveChat Apps you need an account in Developer Console. It’s a panel dedicated to managing and distributing your apps.

  1. Sign in to Developer Console.
  2. Go to the Apps section.
  3. Create a new app!

See a 3-minute tutorial on creating a simple app with Firebase.

Extending user interfaces

LiveChat Platform provides simple tools to extend the Agent App interface. With apps, you can add new panels, widgets, and other UI elements.

From a technical perspective, you can build a web application with HTML, CSS, or JavaScript and embed it in different locations of the LiveChat Agent interface. We also provide some native primitives, which don’t require from you any coding skills.

You’re not limited to the Agent App only. There are several options to extend the Chat Widget as well!

Extending the Agent App

Chat Actions

The simplest way to extend the LiveChat Agent App is by using Chat Actions. They are buttons available at hand while chatting.

Popular use cases handle actions such as ticket creation, sending chat transcript, or banning a visitor. This is where Chat Actions are displayed in the UI:

LiveChat Chat Actions

Check out our blog post about Chat Actions to learn more.

App locations

Your app can extend several areas of the LiveChat Agent App interface:

  • the Details section, by adding a new tab with your web content or a new widget in the default Customer Details tab
  • the Main menu, by adding a new, fullscreen section with your web content
  • Chat Actions, by adding a new action button in the Chat Action menu
  • the Message Box, by adding an integration displayed right in that area

If you feel we lack some options, please drop us a line at developers@livechatinc.com!

Details section

Apps in the Details tabs are the most common way to extend LiveChat UI. They are displayed in the right sidebar of the Agent App when browsing Chats or Archives.

LiveChat Tag Master

In the example above, the Tag Master app is installed. It’s one of the open-source sample apps you can clone and play with.

Apps located in the Details section are contextual. It means they inherit the properties of the currently opened chat. You can use this information to present contextual data for the particular chats.

Customer Details widgets

Additionally, those apps can expose a widget in the native Customer Details tab. Those widgets serve as shortcuts or essence of the information presented in the app.

LiveChat Customer Details widgets

Widgets are simply tiles displayed one below another. In this example, we see how Cards for Shopify and CartValue extend default Customer Details tab. Widgets are a great solution for displaying information that agents need to have at hand, as they don’t need to switch between tabs.

See the documentation to learn how to embedd your app in the Details section.

The application icon is located in the navigation bar on the left.

Clicking the icon loads the app URL as an iframe. The application is displayed fullscreen, right in the Agent App.

LiveChat Fullscreen app

Keep in mind that this feature is not supported on the mobile version of the LiveChat Agent App.

Fullscreen apps help to reduce context switching. Users no longer need to switch between the Agent App and tabs in the browser. As long as the application they work with is installed as a Fullscreen app, they can perform all the operations without leaving the Agent App. It’s particularly important for LiveChat Desktop App users.

See how to create a fullscreen app in the documentation.

MessageBox

With this type of widget placement you can integrate your apps in the Message Box. You could use it to send gifs or present items from an online store. It would make the whole chatting experience much more engaging. You could also use it to send files from Dropbox.

The integration is simple and intuitive. You open the app, select the element, and confirm your choice by clicking Send. This mechanism protects you from sending an element by accident. To learn more about the implementation, see MessageBox.

App settings

Some applications require settings configuration, especially when they use external services. After installing the app, users need to do the setup in order for the application to work.

We provide a special place called Settings page, where you can embed a page with configuration. It’s recommended to use it together with Sign in with LiveChat.

See how to set up a Settings page for your app in the documentation.

Extending the Chat Widget

Mobile Chat Widgets

Have you got a mobile app? You can still make use of LiveChat and improve your mobile user experience! All you need to do is install the mobile Chat Widget compatible with your app.

JavaScript API

Chat Widget JavaScript API is an easy yet powerful way to integrate your website or application with the LiveChat platform.

The integration of your app with the Chat Widget can be multiform and contextual.
E-commerce owners often use JavaScript API to pass visitor data or to track sales made via chat (read about Sales tracker to learn more).

Also, it could be used to improve the customer support experience. There might be some app locations where users usually get stuck or have problems. To troubleshoot that, you could add a chat-with-customer-support button. Users would click it to ask customer support for help. Similarily, you could put such a button in the Contact or Help section of your app. Those are the tabs where users normally look for support.

What’s more, you could use methods and callbacks to send additional data about a chat or visitor. It’s possible to manipulate the Chat Widget state (maximize, minimize, hide) and build handlers for the events happening in conversations.

Building a Single Page App (SPA)? We’re fine with that! LiveChat integrates well with SPAs, and you will be able to use the API without any problem.

Moments

Chat Widget Moments are webpages embedded in an iframe, displayed during a chat.

LiveChat Moment

Thanks to Moments, customers can perform specific actions. For example, you could pick a date from a popping up calendar instead of typing it manually, or let your customer make a purchase right on the spot. Moments were created to solve complex problems easily and securely. You can think of them as an accessible API to integrate the Chat Widget with some other software.

Rich messages

Sending a Rich message is the way to go when you want your reply to be more personal and visually attractive. Rich messages are more than just plain text. You can make use of images, buttons, quick replies, and cards as well.

Rich messages are the core feature of our ChatBot integration. If you’re not familiar with ChatBot, this article will come in handy. Currently, they’re available either with our ChatBot integration or Beta Chat APIs*.

*) We're working on a new set of APIs, which introduce new features and multiple improvements. Got you curious? Hit us up at developers@livechatinc.com for more details and early access!

Customer SDK

You can build advanced custom solutions with the use of Beta Customer SDK*. With this JavaScript library, you can create a chat widget from scratch. It allows you to meet a specific scenario, but is definitely the most challenging option. Before you interact with this API, keep in mind that complicated solutions call for strong coding skills.

*) We're working on a new set of APIs and SDKs, which introduce multiple improvements and advanced integration tools. Got you curious? Hit us up at developers@livechatinc.com for more details and early access!

Interacting with data

In some cases you’ll need to interact with LiveChat on the server side. We provide set of REST APIs for that purpose. See below for typical the use cases.

Webhook-based apps

Webhooks are one of the most popular ways to interact with data or events happening within the system. At LiveChat we provide webhooks for the following events:

  • chat started and chat ended,
  • new tag added to chat,
  • visitor is in a queue,
  • and many more in the Beta Configuration API*

See the webhooks guide for more details.

*) We're working on a new set of APIs, which introduce new features and multiple improvements. Got you curious? Hit us up at developers@livechatinc.com for more details and early access!

Process automation

Automation speeds up manual processes and reduces the risk of making mistakes. The perfect candidate for automation trigger is a chat being tagged. It can happen either for ongoing chats or the archived ones. Once the agent assigns a certain tag to a chat, you can, for instance, send a follow-up email to the customer or notify your team in Slack.

Channel integrations* [beta]

Integration of multiple communication channels is a convenient solution for both customers and agents. Customers contact agents via their preferred channels, for example Facebook or Twitter. Agents want a single interface to manage all the incoming messages. When responding, messages would return to the medium it came from. With Beta Chat APIs*, you can link any messenging channel with LiveChat.

Chatbots* [beta]

Chatbots are multipurpose time savers. They could lead conversations with customers when no agents are available. Once agents start accepting chats, they take over the conversations from bots. To make it work, chatbots would need to be trained based on the data from the past conversations.

*) We're working on the new set of APIs, which introduce new features and multiple improvements. The most important one is the new Chat API. It allows you to send and receive rich messages, exchange events, and perform all variety of actions within the LiveChat ecosystem. Got you curious? Hit us up at developers@livechatinc.com for more details & early access!

Advanced reporting

Managers need customized reports based on data from LiveChat. Those might be very specific collations for the analysis and statistics. For example, the number of chats rated as good in relation to agents’ weekly activity. Or, the number of times a particular word appeared in conversations. The key is to pull data from LiveChat via Reports API.