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
### 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)
