Building LiveChat apps
Apps are primary elements of 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 Chat APIs
Are you building an app for everyone? We provide simple monetization and distribution tools.
Watch a 4-minute tutorial explaining how to create a simple app in the Developer Console.
If you want to know the whole creation process in detail, follow the instructions we’ve prepared. We'll use an app named Your Guide as our example.
Now, we go to the Apps tab and click the Create new app + button. Give your app a name and click the Continue button. You can always change the application's name later.
💡 Need a helping hand? Right after signing in to the Developer Console, you can launch the App wizard. It will guide you through the whole app creation process.
You can configure your app using Building blocks, which we can describe as components that form your app. Depending on which building block you add to your application, it will work differently. If you want to know how each building block can enrich your app, click the Read docs redirect and learn more about them.
To create a simple frontend app, we'll use the Agent App Widgets building block. Agent App Widgets are web apps that can interact and communicate with the LiveChat App, loaded inside the LiveChat App interface.
To add a new Agent App Widget to your application, you need to follow these steps:
- Go to the Building blocks tab.
- Add a new Agent App Widgets block by clicking the Get started button.
- Enter the Widget source URL, which is the address of your application. If it's not ready yet, you can use our sample apps to play around.
- Now, go to the Widget placement and choose one. It allows you to decide where exactly in the LiveChat App you want to display your integration. We've chosen the Full screen option in our example. In the LiveChat App, Full screen apps are located in the navigation bar on the left, and they open maximized in the LiveChat App. Learn more...
- The Initial state section is not required and works only for the Chat Details widget placement. It allows you to define the initial state for the Customer Details Widget. If you decide to use it, provide the state in the JSON format.
- Click the Continue button and enjoy your app's first building block.
Now, it is time for the Display details tab that allows you to configure your app's short description and add an icon for better visibility in the LiveChat App.
Follow the steps below to add a description and icon:
- Go to the Display details tab.
- In the Short description section, add a one-sentence description of your app to make your users aware of what your app does, and save your changes. You can change the description later.
- Add an icon for your app and save your changes. Your icon will be displayed on the Marketplace and the LiveChat App. You can drag and drop your image or browse your file manager for it.
The next step is adding a few details of your app’s functionalities to make it easier to understand for your users.
To do that, go to the Listing details tab and fill in all the details.💡 How to fill in app details
Before you'll be able to publish your application on the Marketplace, you need to test it first to ensure that no bugs or errors appear.
To do that, you need to install your app privately on your LiveChat license by going to the Private installation tab and clicking the Install app button.
When the installation is done, you can return to your LiveChat App and refresh the page. After doing that, you’ll see your widget.
Please remember that your widget placement in the LiveChat App will depend on which widget placement you've chosen while creating the new Agent App Widget.💡 Take a look at things to remember when testing the app
Congratulations! Now, you can enjoy your simple application under your license. If you want to build a public app, please go to the app review process page, where you’ll get all the necessary details on this process and find out how to submit your application for review.
If you need help along the way, you can always reach us at email@example.com.
To learn more about building apps for LiveChat, see our webinar where we go through the process step by step.
- creating an app in Developer Console - 0:14:00
- using Sign in with LiveChat - 0:18:55
- using Agent Chat API - 0:23:17
- using Agent App SDK - 0:29:30
An app is anything that LiveChat Platform is able to interpret. It could be an integration with a 3rd party service, a custom plugin to display additional visitor details or a chat widget theme. We constantly work to introduce new types of apps and ways of integrating with LiveChat.
From developer perspective:
Technically speaking, every app has a set of attributes (you can think of it as a JSON file). These attributes define the type and meta details of the app. Every app can also have a OAuth 2.1 Client associated. Every app instance (installation) is associated with dedicated authorization entities.
From business perspective:
The primary goal of an app is to abstract some functionality in an installable package, which can be published and distributed at the Apps Marketplace. App can also remain private and available only for the license it was created on.
Currently, only owner and administrators can create and manage apps. If you have an agent account willing to create and manage apps, please contact your license administrator or owner.
No, It's perfectly fine to create only private apps. If your team needs a certain functionality, you don't have to publish the app for the team to use it.