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.

Getting Started

We now have an npm package available!

npm i front-chat-sdk

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

Install and Run

1. Clone the repo

   git clone https://github.com/frontapp/front-chat-sdk.git

2. Install packages

   npm install

3. Run the example application

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

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

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

License

Distributed under the Apache 2.0 License. See LICENSE for more information.