front-chat-sdk

[![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

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 from Front.

(back to top)

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 for more on how to use front-chat-sdk.

Running front-chat-sdk locally

$3

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/

$3

There are four helpers provided in this repository, and each of them is used in the 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.
- How to initialize a Front Chat widget with a verified user.

#### Quick-start Helpers

- initialize
- 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
- A React hook that boots and initializes a Front Chat widget while adhering to the React component lifecycle.

#### Advanced Helpers

- boot
- 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
- A React hook that boots the Front Chat widget and provides helpers to initialize the application while adhering to the React component lifecycle.

(back to top)

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.

(back to top)

Contact

Front Support - 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

(back to top)

License

Distributed under the Apache 2.0 License. See [LICENSE`][license-url] for more information.

(back to top)

[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