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.
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.
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.
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.
You’re not limited to the Agent App only. There are several options to extend the Chat Widget as well!
Extending the Agent App
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:
Check out our blog post about Chat Actions to learn more.
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 firstname.lastname@example.org!
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.
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.
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.
Main menu (fullscreen apps)
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.
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.
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.
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.
- Mobile Chat Widget for iOS apps
- Mobile Chat Widget for Android apps
- Mobile Chat Widget for React Native apps
The integration of your app with the Chat Widget can be multiform and contextual.
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.
Chat Widget Moments are webpages embedded in an iframe, displayed during a chat.
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.
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*.
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.
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.
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 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.
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.