https://github.com/frontapp/front-chat-sdk
Utilities for instantiating Front Chat.
https://github.com/frontapp/front-chat-sdk
Last synced: 6 months ago
JSON representation
Utilities for instantiating Front Chat.
- Host: GitHub
- URL: https://github.com/frontapp/front-chat-sdk
- Owner: frontapp
- License: apache-2.0
- Created: 2023-11-14T00:51:01.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-07-04T00:11:02.000Z (12 months ago)
- Last Synced: 2026-01-11T22:32:49.309Z (6 months ago)
- Language: TypeScript
- Homepage: https://front.com/
- Size: 496 KB
- Stars: 3
- Watchers: 8
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
[![Contributors][contributors-shield]][contributors-url]
[![Forks][forks-shield]][forks-url]
[![Stargazers][stars-shield]][stars-url]
[![Issues][issues-shield]][issues-url]
[![Apache 2.0 License][license-shield]][license-url]
front-chat-sdk
Utilities and examples for launching Front Chat.
Explore the docs »
Front
·
Report Bug
·
Request Feature
Table of Contents
## About The Project
This repository contains examples to demonstrate how Front Chat can be launched on a variety of web pages. The core example demonstrates how the `useFrontChat` hook can be applied to quickly launch a chat widget in a React application, and there is also an example of using the generic `initialize` function to launch Front Chat on any kind of web page.
For more advanced use cases, there are two additional helpers: `useFrontChatBoot` and `boot`.
To learn more about Front Chat, check out [this article](https://help.front.com/en/articles/2062) from Front.
## Getting Started
We now have an npm package available!
```sh
npm i front-chat-sdk
```
```ts
import {initialize} from 'front-chat-sdk/helpers';
import {useFrontChat} from 'front-chat-sdk/hooks';
import type {FrontChat} from 'front-chat-sdk/types';
```
See [examples](https://github.com/frontapp/front-chat-sdk/tree/main/examples) for more on how to use front-chat-sdk.
## Running front-chat-sdk locally
### Install and Run
1. Clone the repo
```sh
git clone https://github.com/frontapp/front-chat-sdk.git
```
2. Install packages
```sh
npm install
```
3. Run the example application
```sh
npm run dev
```
After the last command, the example application can be accessed at http://localhost:5173/
### Usage
There are four helpers provided in this repository, and each of them is used in the [examples](https://github.com/frontapp/front-chat-sdk/tree/main/examples) directory.
We have also provided additional examples for common use cases. These examples use React, but the general principles should work for any application.
- How to embed a Front Chat widget [directly in a page](https://github.com/frontapp/front-chat-sdk/tree/main/examples/react-embed-front-chat).
- How to initialize a Front Chat widget [with a verified user](https://github.com/frontapp/front-chat-sdk/tree/main/examples/react-verified-user).
#### Quick-start Helpers
- [`initialize`](https://github.com/frontapp/front-chat-sdk/blob/main/lib/helpers/initialize/index.ts)
- An async function that boots and initializes a Front Chat widget. The returned `Promise` is only resolved once the chat widget application is fully running and initialized inside its iframe.
- [`useFrontChat`](https://github.com/frontapp/front-chat-sdk/blob/main/lib/hooks/use-front-chat/index.ts)
- A React hook that boots and initializes a Front Chat widget while adhering to the React component lifecycle.
#### Advanced Helpers
- [`boot`](https://github.com/frontapp/front-chat-sdk/blob/main/lib/helpers/boot/index.ts)
- An async function that boots the Front Chat widget and returns helpers to interact with the Front Chat SDK. The returned `Promise` is only resolved once the chat widget application is fully running inside its iframe.
- [`useFrontChatBoot`](https://github.com/frontapp/front-chat-sdk/blob/main/lib/hooks/use-front-chat-boot/index.ts)
- A React hook that boots the Front Chat widget and provides helpers to initialize the application while adhering to the React component lifecycle.
## Feedback
Although this package is maintained by Front, feedback is **greatly appreciated**. Feel free to open an issue if you have any suggestions as to how this repository and its examples could be improved.
## Contact
Front Support - [https://help.front.com/en/contact-us](https://help.front.com/en/contact-us)
Please mention that you are experiencing issues with Front Chat or `front-chat-sdk`, so that they can direct you to a member of the Live Chat team.
Project Link: [https://github.com/frontapp/front-chat-sdk](https://github.com/frontapp/front-chat-sdk)
## License
Distributed under the Apache 2.0 License. See [`LICENSE`][license-url] for more information.
[contributors-shield]: https://img.shields.io/github/contributors/frontapp/front-chat-sdk.svg?style=for-the-badge
[contributors-url]: https://github.com/frontapp/front-chat-sdk/graphs/contributors
[forks-shield]: https://img.shields.io/github/forks/frontapp/front-chat-sdk.svg?style=for-the-badge
[forks-url]: https://github.com/frontapp/front-chat-sdk/network/members
[stars-shield]: https://img.shields.io/github/stars/frontapp/front-chat-sdk.svg?style=for-the-badge
[stars-url]: https://github.com/frontapp/front-chat-sdk/stargazers
[issues-shield]: https://img.shields.io/github/issues/frontapp/front-chat-sdk.svg?style=for-the-badge
[issues-url]: https://github.com/frontapp/front-chat-sdk/issues
[license-shield]: https://img.shields.io/github/license/frontapp/front-chat-sdk.svg?style=for-the-badge
[license-url]: https://github.com/frontapp/front-chat-sdk/blob/master/LICENSE.txt