### Run Front Chat SDK Example Application

Source: https://github.com/frontapp/front-chat-sdk/blob/main/README.md

Start the example application locally using the npm run dev command. This will launch the application on http://localhost:5173/ for testing.

```sh
npm run dev
```

--------------------------------

### Install Dependencies for Local Development

Source: https://github.com/frontapp/front-chat-sdk/blob/main/README.md

Install all project dependencies after cloning the repository. This command is necessary before running the development server.

```sh
npm install
```

--------------------------------

### Initialize Front Chat widget (minimal)

Source: https://context7.com/frontapp/front-chat-sdk/llms.txt

Use the `initialize` helper for a one-call setup. This appends the script to document.body by default. Handles script loading and 'init' command.

```ts
import { initialize } from 'front-chat-sdk/helpers';

// Minimal usage — appends script to document.body by default
initialize('your-chat-id').catch(console.error);
```

--------------------------------

### Install Front Chat SDK

Source: https://github.com/frontapp/front-chat-sdk/blob/main/README.md

Install the Front Chat SDK package using npm. This is the first step to integrating Front Chat into your project.

```sh
npm i front-chat-sdk
```

--------------------------------

### Use FrontChatCommandsEnum

Source: https://context7.com/frontapp/front-chat-sdk/llms.txt

Utilize FrontChatCommandsEnum for type-safe widget commands. Example shows manual command issuance to the window.FrontChat object.

```ts
import { FrontChatCommandsEnum } from 'front-chat-sdk/types';

// FrontChatCommandsEnum.INIT       → 'init'
// FrontChatCommandsEnum.SHOW       → 'show'
// FrontChatCommandsEnum.HIDE       → 'hide'
// FrontChatCommandsEnum.SHUTDOWN   → 'shutdown'

// Example: manually issuing commands against the raw FrontChat function
window.FrontChat?.(FrontChatCommandsEnum.SHOW);
window.FrontChat?.(FrontChatCommandsEnum.HIDE);
window.FrontChat?.(FrontChatCommandsEnum.SHUTDOWN);
```

--------------------------------

### initialize

Source: https://context7.com/frontapp/front-chat-sdk/llms.txt

The simplest way to launch the Front Chat widget. It loads the script bundle and immediately issues the `init` command.

```APIDOC
## initialize

### Description
One-call setup for any web page. Loads the script bundle and initializes the widget with the provided `chatId`. Suitable for pages where fine-grained lifecycle control is not needed.

### Method
```javascript
initialize(chatId: string, mountNode?: HTMLElement): Promise<void>
```

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **chatId** (string) - Required - The unique identifier for your Front chat.
- **mountNode** (HTMLElement) - Optional - The DOM element where the chat widget script should be appended. Defaults to `document.body`.
```

--------------------------------

### `boot` - Load the script bundle and return the `FrontChat` function

Source: https://context7.com/frontapp/front-chat-sdk/llms.txt

The `boot` function injects the Front Chat script bundle into the page and returns a Promise that resolves with the `FrontChat` function once the widget is ready. This is useful for controlling initialization timing and executing commands after loading.

```APIDOC
## `boot` - Load the script bundle and return the `FrontChat` function

### Description
Injects the Front Chat script bundle into the page and resolves a `Promise<FrontChat>` once the widget application is fully running inside its iframe. Use this when you need control over initialization timing or want to call multiple commands after loading.

### Usage
```ts
import { boot } from 'front-chat-sdk/helpers';
import { FrontChatCommandsEnum } from 'front-chat-sdk/types';

const chatId = 'your-chat-id';

boot(document.body)
  .then(frontChat => {
    // Boot is complete — widget iframe is ready but not yet initialized.
    // Call init, then show the window once initialization finishes.
    frontChat(FrontChatCommandsEnum.INIT, {
      chatId,
      onInitCompleted: () => {
        frontChat(FrontChatCommandsEnum.SHOW);
      },
    });
  })
  .catch(console.error);

// With a CSP nonce
boot(document.body, { nonce: 'csp-nonce' })
  .then(frontChat => {
    frontChat(FrontChatCommandsEnum.INIT, { chatId });
  })
  .catch(console.error);
```

### Parameters
*   `document.body` (HTMLElement): The element to append the script to.
*   `options` (object, optional): Configuration options.
    *   `nonce` (string): A CSP nonce for the script tag.
```

--------------------------------

### Load Front Chat Script Bundle with `boot`

Source: https://context7.com/frontapp/front-chat-sdk/llms.txt

Use the `boot` function to inject the Front Chat script and initialize the widget. It returns a Promise that resolves with the `FrontChat` function once the widget is ready. This is useful for controlling initialization timing or calling multiple commands after loading.

```typescript
import { boot } from 'front-chat-sdk/helpers';
import { FrontChatCommandsEnum } from 'front-chat-sdk/types';

const chatId = 'your-chat-id';

boot(document.body)
  .then(frontChat => {
    // Boot is complete — widget iframe is ready but not yet initialized.
    // Call init, then show the window once initialization finishes.
    frontChat(FrontChatCommandsEnum.INIT, {
      chatId,
      onInitCompleted: () => {
        frontChat(FrontChatCommandsEnum.SHOW);
      },
    });
  })
  .catch(console.error);
```

```typescript
// With a CSP nonce
boot(document.body, { nonce: 'csp-nonce' })
  .then(frontChat => {
    frontChat(FrontChatCommandsEnum.INIT, { chatId });
  })
  .catch(console.error);
```

--------------------------------

### Define FrontChatOptions for boot command

Source: https://context7.com/frontapp/front-chat-sdk/llms.txt

Specify options for the 'boot' command using FrontChatOptions, such as a Content Security Policy nonce for the injected script.

```ts
import type { FrontChatOptions } from 'front-chat-sdk/types';

const options: FrontChatOptions = {
  nonce: 'your-csp-nonce-value',
};
```

--------------------------------

### Initialize Front Chat widget with custom mount element

Source: https://context7.com/frontapp/front-chat-sdk/llms.txt

Initialize the Front Chat widget and specify a custom DOM element for mounting the script.

```ts
import { initialize } from 'front-chat-sdk/helpers';

// With a custom mount element
const container = document.getElementById('chat-container')!;
initialize('your-chat-id', container).catch(console.error);
```

--------------------------------

### Define FrontChatParams for init command

Source: https://context7.com/frontapp/front-chat-sdk/llms.txt

Configure widget parameters using FrontChatParams for the 'init' command. Includes chatId, identity verification, and display options.

```ts
import type { FrontChatParams } from 'front-chat-sdk/types';

const params: FrontChatParams = {
  // Required
  chatId: 'abc123',

  // Identity verification (must be generated server-side)
  userId: 'user@example.com',
  userHash: 'hmac-sha256-hash-of-userId',

  // Widget display options
  useDefaultLauncher: true,           // show/hide the default launcher button
  shouldShowWindowOnLaunch: false,    // open chat window immediately on launch
  shouldExpandOnShowWindow: true,     // expand widget when shown
  shouldHideCloseButton: false,       // hide the close button inside widget
  shouldHideExpandButton: false,      // hide the expand button inside widget
  welcomeMessageAppearance: 'always', // 'hidden' | 'always'
  isMobileWebview: false,

  // Callback fired once init is fully complete
  onInitCompleted: () => console.log('Chat widget ready'),
};
```

--------------------------------

### Import SDK components

Source: https://context7.com/frontapp/front-chat-sdk/llms.txt

Import necessary functions, hooks, and types from the front-chat-sdk.

```ts
import { initialize, boot } from 'front-chat-sdk/helpers';
import { useFrontChat, useFrontChatBoot } from 'front-chat-sdk/hooks';
import type { FrontChat, FrontChatParams, FrontChatOptions } from 'front-chat-sdk/types';
import { FrontChatCommandsEnum } from 'front-chat-sdk/types';
```

--------------------------------

### `useFrontChatBoot` — Advanced React hook with separate boot and init phases

Source: https://context7.com/frontapp/front-chat-sdk/llms.txt

The `useFrontChatBoot` hook allows for separate control over the script loading and initialization phases, providing flexibility for dynamic parameter passing and deferred initialization.

```APIDOC
## `useFrontChatBoot` — Advanced React hook with separate boot and init phases

### Description
This hook separates the script-loading phase from initialization, giving you full control over when and with what parameters the widget is initialized. It returns `{ frontChat, isInitialized, initialize }`. Use this hook when you need to pass dynamic parameters (such as a verified user identity) to `init`, or when initialization should be deferred until some async data is ready.

### Usage
```tsx
import { useEffect, useState } from 'react';
import { useFrontChatBoot } from 'front-chat-sdk/hooks';
import { FrontChatCommandsEnum } from 'front-chat-sdk/types';

const chatId = 'your-chat-id';

export function App() {
  const { frontChat, initialize, isInitialized } = useFrontChatBoot(document.body);
  const [isWindowVisible, setIsWindowVisible] = useState(false);

  // Step 1: Initialize the widget once the hook signals it is ready.
  useEffect(() => {
    if (!initialize || isInitialized) return;
    initialize({ chatId });
  }, [isInitialized, initialize]);

  // Step 2: Show the chat window after initialization completes.
  useEffect(() => {
    if (!frontChat || !isInitialized || isWindowVisible) return;
    frontChat(FrontChatCommandsEnum.SHOW);
    setIsWindowVisible(true);
  }, [frontChat, isInitialized, isWindowVisible]);

  return <div>Chat ready: {isInitialized ? 'Yes' : 'No'}</div>;
}
```

### Parameters
*   `document.body` (HTMLElement): The element to append the script to.

### Returns
*   `frontChat` (function | undefined): The Front Chat command function.
*   `initialize` (function | undefined): Function to initialize the chat with specific parameters.
*   `isInitialized` (boolean): Indicates if the chat widget has been initialized.
```

```APIDOC
## `useFrontChatBoot` with verified user identity

### Description
When a signed-in user should be verified, compute the HMAC-SHA256 `userHash` server-side and pass `userId` + `userHash` to `initialize`. Never compute the hash client-side in production.

### Usage
```tsx
import { createHmac } from 'crypto'; // server-side only
import { useEffect } from 'react';
import { useFrontChatBoot } from 'front-chat-sdk/hooks';

const chatId = 'your-chat-id';
const userId = 'user@example.com';
const identitySecret = '<IDENTITY_SECRET_FROM_FRONT_CHANNEL_SETTINGS>';

// ⚠️  Compute server-side only — never expose identitySecret in client code.
const userHash = createHmac('sha256', identitySecret).update(userId).digest('hex');

export function App() {
  const { initialize, isInitialized } = useFrontChatBoot(document.body);

  useEffect(() => {
    if (!initialize || isInitialized) return;
    // Providing userId + userHash enables identity verification in Front.
    initialize({ chatId, userId, userHash });
  }, [isInitialized, initialize]);

  return <div>Verified chat: {isInitialized ? 'Active' : 'Loading...'}</div>;
}
```

### Parameters for `initialize`
*   `chatId` (string): The unique identifier for your chat.
*   `userId` (string): The unique identifier for the logged-in user.
*   `userHash` (string): The HMAC-SHA256 hash of the `userId` computed server-side.
```

--------------------------------

### Clone Front Chat SDK Repository

Source: https://github.com/frontapp/front-chat-sdk/blob/main/README.md

Clone the Front Chat SDK repository from GitHub to set up the project locally. This allows for development and testing of the SDK.

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

--------------------------------

### Quick-start React Hook with `useFrontChat`

Source: https://context7.com/frontapp/front-chat-sdk/llms.txt

The `useFrontChat` hook simplifies React integration by automatically booting and initializing the widget on component mount. It respects the React component lifecycle and returns the `FrontChat` function along with initialization status.

```tsx
import { useFrontChat } from 'front-chat-sdk/hooks';
import { FrontChatCommandsEnum } from 'front-chat-sdk/types';

const chatId = 'your-chat-id';

export function ChatWidget() {
  // Boots and initializes automatically when the component mounts.
  const { frontChat, isInitialized, initialize } = useFrontChat(chatId);

  const handleShow = () => {
    if (frontChat && isInitialized) {
      frontChat(FrontChatCommandsEnum.SHOW);
    }
  };

  const handleHide = () => {
    if (frontChat && isInitialized) {
      frontChat(FrontChatCommandsEnum.HIDE);
    }
  };

  const handleShutdown = () => {
    if (frontChat) {
      frontChat(FrontChatCommandsEnum.SHUTDOWN);
    }
  };

  return (
    <div>
      <p>Chat initialized: {isInitialized ? 'Yes' : 'No'}</p>
      <button onClick={handleShow} disabled={!isInitialized}>Show Chat</button>
      <button onClick={handleHide} disabled={!isInitialized}>Hide Chat</button>
      <button onClick={handleShutdown}>Shutdown</button>
    </div>
  );
}
```

--------------------------------

### Advanced React Hook with `useFrontChatBoot`

Source: https://context7.com/frontapp/front-chat-sdk/llms.txt

The `useFrontChatBoot` hook separates script loading from initialization, offering control over when and with what parameters the widget is initialized. It is ideal for scenarios requiring dynamic initialization parameters or deferred initialization based on asynchronous data.

```tsx
import { useEffect, useState } from 'react';
import { useFrontChatBoot } from 'front-chat-sdk/hooks';
import { FrontChatCommandsEnum } from 'front-chat-sdk/types';

const chatId = 'your-chat-id';

export function App() {
  const { frontChat, initialize, isInitialized } = useFrontChatBoot(document.body);
  const [isWindowVisible, setIsWindowVisible] = useState(false);

  // Step 1: Initialize the widget once the hook signals it is ready.
  useEffect(() => {
    if (!initialize || isInitialized) return;
    initialize({ chatId });
  }, [isInitialized, initialize]);

  // Step 2: Show the chat window after initialization completes.
  useEffect(() => {
    if (!frontChat || !isInitialized || isWindowVisible) return;
    frontChat(FrontChatCommandsEnum.SHOW);
    setIsWindowVisible(true);
  }, [frontChat, isInitialized, isWindowVisible]);

  return <div>Chat ready: {isInitialized ? 'Yes' : 'No'}</div>;
}
```

--------------------------------

### React Hook `useFrontChatBoot` with Verified User Identity

Source: https://context7.com/frontapp/front-chat-sdk/llms.txt

When integrating with a signed-in user, compute the HMAC-SHA256 `userHash` server-side and pass `userId` and `userHash` to the `initialize` function. This enables identity verification in Front. Never compute the hash client-side in production.

```tsx
import { createHmac } from 'crypto'; // server-side only
import { useEffect } from 'react';
import { useFrontChatBoot } from 'front-chat-sdk/hooks';

const chatId = 'your-chat-id';
const userId = 'user@example.com';
const identitySecret = '<IDENTITY_SECRET_FROM_FRONT_CHANNEL_SETTINGS>';

// ⚠️  Compute server-side only — never expose identitySecret in client code.
const userHash = createHmac('sha256', identitySecret).update(userId).digest('hex');

export function App() {
  const { initialize, isInitialized } = useFrontChatBoot(document.body);

  useEffect(() => {
    if (!initialize || isInitialized) return;
    // Providing userId + userHash enables identity verification in Front.
    initialize({ chatId, userId, userHash });
  }, [isInitialized, initialize]);

  return <div>Verified chat: {isInitialized ? 'Active' : 'Loading...'}</div>;
}
```

--------------------------------

### Import Front Chat SDK Helpers and Types

Source: https://github.com/frontapp/front-chat-sdk/blob/main/README.md

Import necessary functions and types from the Front Chat SDK for use in your TypeScript or JavaScript project. These imports provide access to initialization and hook functionalities.

```ts
import {initialize} from 'front-chat-sdk/helpers';
import {useFrontChat} from 'front-chat-sdk/hooks';
import type {FrontChat} from 'front-chat-sdk/types';
```

--------------------------------

### Initialize Front Chat in iframe

Source: https://context7.com/frontapp/front-chat-sdk/llms.txt

Use this React component to embed Front Chat within an iframe. It dynamically loads the chat script and initializes the chat with specific display options, hiding the default launcher and control buttons.

```tsx
import { useEffect, useRef } from 'react';
import { FrontChatCommandsEnum } from 'front-chat-sdk/types';

const scriptSrc = 'https://chat-assets.frontapp.com/v1/chat.bundle.js';
const chatId = 'your-chat-id';

export function App() {
  const iframeRef = useRef<HTMLIFrameElement>(null);

  const onLoadIframe = () => {
    const iframe = iframeRef.current;
    if (!iframe) return;

    const scriptTag = document.createElement('script');
    scriptTag.setAttribute('type', 'text/javascript');
    scriptTag.setAttribute('src', scriptSrc);
    scriptTag.onload = () => {
      iframe.contentWindow?.FrontChat?.(FrontChatCommandsEnum.INIT, {
        chatId,
        useDefaultLauncher: false,
        shouldShowWindowOnLaunch: true,
        shouldHideCloseButton: true,
        shouldHideExpandButton: true,
        shouldExpandOnShowWindow: true,
      });
    };
    iframe.contentDocument?.body.appendChild(scriptTag);
  };

  useEffect(() => {
    if (iframeRef.current) onLoadIframe();
  }, []);

  return (
    <div>
      <h1>Embedded Front Chat</h1>
      <iframe
        ref={iframeRef}
        onLoad={onLoadIframe}
        style={{ width: '700px', height: '755px', border: 'none', colorScheme: 'normal' }}
      />
    </div>
  );
}
```

--------------------------------

### FrontChatCommandsEnum

Source: https://context7.com/frontapp/front-chat-sdk/llms.txt

Commands accepted by the FrontChat function. Use these constants for type-safe interaction with the widget.

```APIDOC
## FrontChatCommandsEnum

### Description
Constants for all supported commands to interact with the Front Chat widget.

### Usage
```typescript
import { FrontChatCommandsEnum } from 'front-chat-sdk/types';

// Example: manually issuing commands against the raw FrontChat function
window.FrontChat?.(FrontChatCommandsEnum.SHOW);
window.FrontChat?.(FrontChatCommandsEnum.HIDE);
window.FrontChat?.(FrontChatCommandsEnum.SHUTDOWN);
```

### Commands
- **INIT**: Initializes the chat widget.
- **SHOW**: Shows the chat widget.
- **HIDE**: Hides the chat widget.
- **SHUTDOWN**: Shuts down the chat widget.
```

--------------------------------

### `useFrontChat` — Quick-start React hook

Source: https://context7.com/frontapp/front-chat-sdk/llms.txt

The `useFrontChat` hook provides a simple way to integrate Front Chat into React applications. It automatically boots and initializes the widget on component mount, managing the lifecycle for you.

```APIDOC
## `useFrontChat` — Quick-start React hook

### Description
This hook is the simplest React integration. It accepts a `chatId` and automatically boots and initializes the widget on mount, respecting the React component lifecycle. It returns the same `UseFrontChatBootReturn` shape as `useFrontChatBoot`.

### Usage
```tsx
import { useFrontChat } from 'front-chat-sdk/hooks';
import { FrontChatCommandsEnum } from 'front-chat-sdk/types';

const chatId = 'your-chat-id';

export function ChatWidget() {
  // Boots and initializes automatically when the component mounts.
  const { frontChat, isInitialized, initialize } = useFrontChat(chatId);

  const handleShow = () => {
    if (frontChat && isInitialized) {
      frontChat(FrontChatCommandsEnum.SHOW);
    }
  };

  const handleHide = () => {
    if (frontChat && isInitialized) {
      frontChat(FrontChatCommandsEnum.HIDE);
    }
  };

  const handleShutdown = () => {
    if (frontChat) {
      frontChat(FrontChatCommandsEnum.SHUTDOWN);
    }
  };

  return (
    <div>
      <p>Chat initialized: {isInitialized ? 'Yes' : 'No'}</p>
      <button onClick={handleShow} disabled={!isInitialized}>Show Chat</button>
      <button onClick={handleHide} disabled={!isInitialized}>Hide Chat</button>
      <button onClick={handleShutdown}>Shutdown</button>
    </div>
  );
}
```

### Parameters
*   `chatId` (string): The unique identifier for your chat.

### Returns
*   `frontChat` (function | undefined): The Front Chat command function.
*   `isInitialized` (boolean): Indicates if the chat widget has been initialized.
*   `initialize` (function | undefined): Function to manually initialize the chat.
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.