### Quickstart: Initialize Intercom with Hooks

Source: https://github.com/devrnt/react-use-intercom/blob/main/README.md

A basic example demonstrating how to set up the IntercomProvider and use the useIntercom hook to boot the Intercom chat in a React application.

```ts
import * as React from 'react';

import { IntercomProvider, useIntercom } from 'react-use-intercom';

const INTERCOM_APP_ID = 'your-intercom-app-id';

const App = () => (
  <IntercomProvider appId={INTERCOM_APP_ID}>
    <HomePage />
  </IntercomProvider>
);

// Anywhere in your app
const HomePage = () => {
  const { boot, shutdown, hide, show, update } = useIntercom();

  return <button onClick={boot}>Boot intercom! ☎️</button>;
};
```

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

### Quickstart: Initialize Intercom with Hooks

Source: https://github.com/devrnt/react-use-intercom/blob/main/packages/react-use-intercom/README.md

A basic example demonstrating how to set up the IntercomProvider and use the useIntercom hook to boot the Intercom chat in a React application.

```ts
import * as React from 'react';

import { IntercomProvider, useIntercom } from 'react-use-intercom';

const INTERCOM_APP_ID = 'your-intercom-app-id';

const App = () => (
  <IntercomProvider appId={INTERCOM_APP_ID}>
    <HomePage />
  </IntercomProvider>
);

// Anywhere in your app
const HomePage = () => {
  const { boot, shutdown, hide, show, update } = useIntercom();

  return <button onClick={boot}>Boot intercom! ☎️</button>;
};
```

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

### Next.js Page Router Example

Source: https://github.com/devrnt/react-use-intercom/blob/main/apps/examples/README.md

Shows how to integrate react-use-intercom in a Next.js application using the page router. This setup might involve initializing Intercom on page load.

```javascript
import React, { useEffect } from 'react';
import { useIntercom } from 'react-use-intercom';

function HomePage() {
  const { boot, shutdown, update } = useIntercom({
    appId: 'YOUR_INTERCOM_APP_ID',
    autoBoot: true, // Automatically boot on component mount
  });

  useEffect(() => {
    // Example of updating user data after initial boot
    update({ custom_data: { plan: 'premium' } });
  }, [update]);

  return (
    <div>
      <h1>Welcome to Next.js with Intercom</h1>
      <button onClick={() => shutdown()}>Log Out and Shutdown Intercom</button>
    </div>
  );
}

export default HomePage;
```

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

### Install Dependencies

Source: https://github.com/devrnt/react-use-intercom/blob/main/CONTRIBUTING.md

Installs all project dependencies using pnpm.

```sh
pnpm install
```

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

### Install pnpm

Source: https://github.com/devrnt/react-use-intercom/blob/main/CONTRIBUTING.md

Installs the pnpm package manager globally using npm.

```sh
npm install -g pnpm@10.2
```

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

### Gatsby Example

Source: https://github.com/devrnt/react-use-intercom/blob/main/apps/examples/README.md

Demonstrates how to use react-use-intercom within a Gatsby application. This example likely involves setting up Intercom within the Gatsby environment.

```javascript
import React from 'react';
import { useIntercom } from 'react-use-intercom';

function App() {
  const { boot, shutdown, update } = useIntercom({
    appId: 'YOUR_INTERCOM_APP_ID',
  });

  return (
    <div>
      <button onClick={() => boot({ email: 'test@example.com', name: 'Test User' })}>Boot Intercom</button>
      <button onClick={() => shutdown()}>Shutdown Intercom</button>
      <button onClick={() => update({ email: 'updated@example.com' })}>Update User</button>
    </div>
  );
}

export default App;
```

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

### Install react-use-intercom

Source: https://github.com/devrnt/react-use-intercom/blob/main/README.md

Installation instructions for react-use-intercom using different package managers like pnpm, npm, and yarn.

```sh
# pnpm
pnpm add react-use-intercom

# npm
npm install react-use-intercom

# yarn
yarn add react-use-intercom
```

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

### Next.js App Router Example

Source: https://github.com/devrnt/react-use-intercom/blob/main/apps/examples/README.md

Illustrates the usage of react-use-intercom within a Next.js application leveraging the app router. This example might focus on client-side component integration.

```javascript
'use client';

import React from 'react';
import { useIntercom } from 'react-use-intercom';

function IntercomProvider({ children }) {
  const { boot, shutdown, update } = useIntercom({
    appId: 'YOUR_INTERCOM_APP_ID',
  });

  // You can provide Intercom methods to other components via context if needed

  return (
    <>
      {children}
      <button onClick={() => boot({ email: 'client@example.com' })}>Client Boot</button>
      <button onClick={() => shutdown()}>Client Shutdown</button>
    </>
  );
}

export default IntercomProvider;
```

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

### Install react-use-intercom

Source: https://github.com/devrnt/react-use-intercom/blob/main/packages/react-use-intercom/README.md

Installation instructions for react-use-intercom using different package managers like pnpm, npm, and yarn.

```sh
# pnpm
pnpm add react-use-intercom

# npm
npm install react-use-intercom

# yarn
yarn add react-use-intercom
```

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

### IntercomProvider Usage Example

Source: https://github.com/devrnt/react-use-intercom/blob/main/README.md

A React component example demonstrating how to use the IntercomProvider with various props, including event handlers and autoBoot functionality.

```typescript
const App = () => {
  const [unreadMessagesCount, setUnreadMessagesCount] = React.useState(0);

  const onHide = () => console.log('Intercom did hide the Messenger');
  const onShow = () => console.log('Intercom did show the Messenger');
  const onUnreadCountChange = (amount: number) => {
    console.log('Intercom has a new unread message');
    setUnreadMessagesCount(amount);
  };
  const onUserEmailSupplied = () => {
    console.log('Visitor has entered email');
  };

  return (
    <IntercomProvider
      appId={INTERCOM_APP_ID}
      onHide={onHide}
      onShow={onShow}
      onUnreadCountChange={onUnreadCountChange}
      onUserEmailSupplied={onUserEmailSupplied}
      autoBoot
    >
      <p>Hi there, I am a child of the IntercomProvider</p>
    </IntercomProvider>
  );
};

```

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

### IntercomProvider Usage Example

Source: https://github.com/devrnt/react-use-intercom/blob/main/packages/react-use-intercom/README.md

A React component example demonstrating how to use the IntercomProvider with various props, including event handlers and autoBoot functionality.

```typescript
const App = () => {
  const [unreadMessagesCount, setUnreadMessagesCount] = React.useState(0);

  const onHide = () => console.log('Intercom did hide the Messenger');
  const onShow = () => console.log('Intercom did show the Messenger');
  const onUnreadCountChange = (amount: number) => {
    console.log('Intercom has a new unread message');
    setUnreadMessagesCount(amount);
  };
  const onUserEmailSupplied = () => {
    console.log('Visitor has entered email');
  };

  return (
    <IntercomProvider
      appId={INTERCOM_APP_ID}
      onHide={onHide}
      onShow={onShow}
      onUnreadCountChange={onUnreadCountChange}
      onUserEmailSupplied={onUserEmailSupplied}
      autoBoot
    >
      <p>Hi there, I am a child of the IntercomProvider</p>
    </IntercomProvider>
  );
};

```

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

### IntercomProvider Setup and useIntercom Hook Usage

Source: https://github.com/devrnt/react-use-intercom/blob/main/README.md

Demonstrates how to set up the IntercomProvider with your Intercom App ID and how to use the useIntercom hook to access various Intercom functionalities like boot, shutdown, update, show, hide, trackEvent, and more. It also shows how to pass custom attributes.

```ts
import * as React from 'react';

import { IntercomProvider, useIntercom } from 'react-use-intercom';

const INTERCOM_APP_ID = 'your-intercom-app-id';

const App = () => (
  <IntercomProvider appId={INTERCOM_APP_ID}>
    <HomePage />
  </IntercomProvider>
);

const HomePage = () => {
  const {
    boot,
    shutdown,
    hardShutdown,
    update,
    hide,
    show,
    showMessages,
    showNewMessage,
    getVisitorId,
    startTour,
    startChecklist,
    trackEvent,
    showArticle,
    startSurvey,
    showSpace,
    showTicket,
    showConversation
  } = useIntercom();

  const bootWithProps = () => boot({ name: 'Russo' });
  const updateWithProps = () => update({ name: 'Ossur' });
  const handleNewMessages = () => showNewMessage();
  const handleNewMessagesWithContent = () => showNewMessage('content');
  const handleGetVisitorId = () => console.log(getVisitorId());
  const handleStartTour = () => startTour(123);
  const handleStartChecklist = () => startChecklist(456);
  const handleTrackEvent = () => trackEvent('invited-friend');
  const handleTrackEventWithMetaData = () =>
    trackEvent('invited-frind', {
      name: 'Russo',
    });
  const handleShowArticle = () => showArticle(123456);
  const handleStartSurvey = () => startSurvey(123456);
  const handleShowSpace = () => showSpace('tasks');
  const handleShowTicket = () => showTicket(123);
  const handleShowConversation = () => showConversation(123);

  return (
    <>
      <button onClick={boot}>Boot intercom</button>
      <button onClick={bootWithProps}>Boot with props</button>
      <button onClick={shutdown}>Shutdown</button>
      <button onClick={hardShutdown}>Hard shutdown</button>
      <button onClick={update}>Update clean session</button>
      <button onClick={updateWithProps}>Update session with props</button>
      <button onClick={show}>Show messages</button>
      <button onClick={hide}>Hide messages</button>
      <button onClick={showMessages}>Show message list</button>
      <button onClick={handleNewMessages}>Show new messages</button>
      <button onClick={handleNewMessagesWithContent}>
        Show new message with pre-filled content
      </button>
      <button onClick={handleGetVisitorId}>Get visitor id</button>
      <button onClick={handleStartTour}>Start tour</button>
      <button onClick={handleStartChecklist}>Start checklist</button>
      <button onClick={handleTrackEvent}>Track event</button>
      <button onClick={handleTrackEventWithMetaData}>
        Track event with metadata
      </button>
      <button onClick={handleShowArticle}>Open article in Messenger</button>
      <button onClick={handleStartSurvey}>Start survey in Messenger</button>
      <button onClick={handleShowSpace}>Open space in Messenger</button>
      <button onClick={handleShowTicket}>Open ticket in Messenger</button>
      <button onClick={handleShowConversation}>Open conversation in Messenger</button>
    </>
  );
};

```

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

### IntercomProvider Setup and useIntercom Hook Usage

Source: https://github.com/devrnt/react-use-intercom/blob/main/packages/react-use-intercom/README.md

Demonstrates how to set up the IntercomProvider with your Intercom App ID and how to use the useIntercom hook to access various Intercom functionalities like boot, shutdown, update, show, hide, trackEvent, and more. It also shows how to pass custom attributes.

```ts
import * as React from 'react';

import { IntercomProvider, useIntercom } from 'react-use-intercom';

const INTERCOM_APP_ID = 'your-intercom-app-id';

const App = () => (
  <IntercomProvider appId={INTERCOM_APP_ID}>
    <HomePage />
  </IntercomProvider>
);

const HomePage = () => {
  const {
    boot,
    shutdown,
    hardShutdown,
    update,
    hide,
    show,
    showMessages,
    showNewMessage,
    getVisitorId,
    startTour,
    startChecklist,
    trackEvent,
    showArticle,
    startSurvey,
    showSpace,
    showTicket,
    showConversation
  } = useIntercom();

  const bootWithProps = () => boot({ name: 'Russo' });
  const updateWithProps = () => update({ name: 'Ossur' });
  const handleNewMessages = () => showNewMessage();
  const handleNewMessagesWithContent = () => showNewMessage('content');
  const handleGetVisitorId = () => console.log(getVisitorId());
  const handleStartTour = () => startTour(123);
  const handleStartChecklist = () => startChecklist(456);
  const handleTrackEvent = () => trackEvent('invited-friend');
  const handleTrackEventWithMetaData = () =>
    trackEvent('invited-frind', {
      name: 'Russo',
    });
  const handleShowArticle = () => showArticle(123456);
  const handleStartSurvey = () => startSurvey(123456);
  const handleShowSpace = () => showSpace('tasks');
  const handleShowTicket = () => showTicket(123);
  const handleShowConversation = () => showConversation(123);

  return (
    <>
      <button onClick={boot}>Boot intercom</button>
      <button onClick={bootWithProps}>Boot with props</button>
      <button onClick={shutdown}>Shutdown</button>
      <button onClick={hardShutdown}>Hard shutdown</button>
      <button onClick={update}>Update clean session</button>
      <button onClick={updateWithProps}>Update session with props</button>
      <button onClick={show}>Show messages</button>
      <button onClick={hide}>Hide messages</button>
      <button onClick={showMessages}>Show message list</button>
      <button onClick={handleNewMessages}>Show new messages</button>
      <button onClick={handleNewMessagesWithContent}>
        Show new message with pre-filled content
      </button>
      <button onClick={handleGetVisitorId}>Get visitor id</button>
      <button onClick={handleStartTour}>Start tour</button>
      <button onClick={handleStartChecklist}>Start checklist</button>
      <button onClick={handleTrackEvent}>Track event</button>
      <button onClick={handleTrackEventWithMetaData}>
        Track event with metadata
      </button>
      <button onClick={handleShowArticle}>Open article in Messenger</button>
      <button onClick={handleStartSurvey}>Start survey in Messenger</button>
      <button onClick={handleShowSpace}>Open space in Messenger</button>
      <button onClick={handleShowTicket}>Open ticket in Messenger</button>
      <button onClick={handleShowConversation}>Open conversation in Messenger</button>
    </>
  );
};

```

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

### Intercom API Methods

Source: https://github.com/devrnt/react-use-intercom/blob/main/packages/react-use-intercom/README.md

Provides a comprehensive set of methods for controlling and interacting with the Intercom messenger within a React application. This includes managing the messenger's visibility, updating its state, handling user-initiated actions like showing messages or starting tours, and tracking custom events.

```APIDOC
Intercom API:

isOpen: boolean
  Description: The visibility status of the messenger.

boot: (props?: IntercomProps) => void
  Description: Boots the Intercom instance. Not needed if `autoBoot` in `IntercomProvider` is `true`.

shutdown: () => void
  Description: Shuts down the Intercom instance.

hardShutdown: () => void
  Description: Shuts down the Intercom instance, ensuring Intercom cookies, `window.Intercom`, and `window.intercomSettings` are removed.

update: (props?: IntercomProps) => void
  Description: Updates the Intercom instance with the supplied props. To initiate a 'ping', call `update` without props.

hide: () => void
  Description: Hides the Messenger. Will call `onHide` if supplied to `IntercomProvider`.

show: () => void
  Description: Shows the Messenger. Will call `onShow` if supplied to `IntercomProvider`.

showMessages: () => void
  Description: Shows the Messenger with the message list.

showNewMessage: (content?: string) => void
  Description: Shows the Messenger as if a new conversation was just created. If `content` is passed, it will fill in the message composer.

getVisitorId: () => string
  Description: Gets the visitor ID.

startTour: (tourId: number) => void
  Description: Starts a tour based on the `tourId`.

startChecklist: (checklistId: number) => void
  Description: Starts a checklist based on the `checklistId`.

trackEvent: (event: string, metaData?: object) => void
  Description: Submits an `event` with optional `metaData`.

showArticle: (articleId: string) => void
  Description: Opens the Messenger with the specified article by `articleId`.

startSurvey: (surveyId: number) => void
  Description: Triggers a survey in the Messenger by `surveyId`.

showSpace: (spaceName: IntercomSpace) => void
  Description: Opens the Messenger with the specified space.

showTicket: (ticketId: number) => void
  Description: Opens the Messenger with the specified ticket by `ticketId`.

showConversation: (conversationId: number) => void
  Description: Opens the Messenger with the specified conversation by `conversationId`.
```

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

### Intercom API Methods

Source: https://github.com/devrnt/react-use-intercom/blob/main/README.md

Provides a comprehensive set of methods for controlling and interacting with the Intercom messenger within a React application. This includes managing the messenger's visibility, updating its state, handling user-initiated actions like showing messages or starting tours, and tracking custom events.

```APIDOC
Intercom API:

isOpen: boolean
  Description: The visibility status of the messenger.

boot: (props?: IntercomProps) => void
  Description: Boots the Intercom instance. Not needed if `autoBoot` in `IntercomProvider` is `true`.

shutdown: () => void
  Description: Shuts down the Intercom instance.

hardShutdown: () => void
  Description: Shuts down the Intercom instance, ensuring Intercom cookies, `window.Intercom`, and `window.intercomSettings` are removed.

update: (props?: IntercomProps) => void
  Description: Updates the Intercom instance with the supplied props. To initiate a 'ping', call `update` without props.

hide: () => void
  Description: Hides the Messenger. Will call `onHide` if supplied to `IntercomProvider`.

show: () => void
  Description: Shows the Messenger. Will call `onShow` if supplied to `IntercomProvider`.

showMessages: () => void
  Description: Shows the Messenger with the message list.

showNewMessage: (content?: string) => void
  Description: Shows the Messenger as if a new conversation was just created. If `content` is passed, it will fill in the message composer.

getVisitorId: () => string
  Description: Gets the visitor ID.

startTour: (tourId: number) => void
  Description: Starts a tour based on the `tourId`.

startChecklist: (checklistId: number) => void
  Description: Starts a checklist based on the `checklistId`.

trackEvent: (event: string, metaData?: object) => void
  Description: Submits an `event` with optional `metaData`.

showArticle: (articleId: string) => void
  Description: Opens the Messenger with the specified article by `articleId`.

startSurvey: (surveyId: number) => void
  Description: Triggers a survey in the Messenger by `surveyId`.

showSpace: (spaceName: IntercomSpace) => void
  Description: Opens the Messenger with the specified space.

showTicket: (ticketId: number) => void
  Description: Opens the Messenger with the specified ticket by `ticketId`.

showConversation: (conversationId: number) => void
  Description: Opens the Messenger with the specified conversation by `conversationId`.
```

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

### Basic Intercom Initialization

Source: https://github.com/devrnt/react-use-intercom/blob/main/apps/examples/vite/index.html

Demonstrates how to initialize Intercom in a React application using the `useIntercom` hook. This typically involves providing your Intercom App ID.

```javascript
import React from 'react';
import { IntercomProvider, useIntercom } from 'react-use-intercom';

function App() {
  return (
    <IntercomProvider appId="YOUR_APP_ID">
      <ChatComponent />
    </IntercomProvider>
  );
}

function ChatComponent() {
  const { boot, shutdown, update } = useIntercom();

  React.useEffect(() => {
    // Boot Intercom when the component mounts
    boot({
      email: 'test@example.com',
      name: 'Test User',
      createdAt: Math.floor(Date.now() / 1000),
    });

    // Shutdown Intercom when the component unmounts
    return () => {
      shutdown();
    };
  }, [boot, shutdown]);

  const handleUpdateUser = () => {
    update({
      name: 'Updated Name',
      custom_attributes: {
        plan: 'premium',
      },
    });
  };

  return (
    <div>
      <button onClick={() => boot()}>Show Intercom</button>
      <button onClick={() => shutdown()}>Hide Intercom</button>
      <button onClick={handleUpdateUser}>Update User</button>
    </div>
  );
}

export default App;
```

```typescript
import React, { useEffect } from 'react';
import { IntercomProvider, useIntercom } from 'react-use-intercom';

interface UserAttributes {
  email: string;
  name: string;
  createdAt: number;
  [key: string]: any;
}

function App() {
  return (
    <IntercomProvider appId="YOUR_APP_ID">
      <ChatComponent />
    </IntercomProvider>
  );
}

function ChatComponent() {
  const { boot, shutdown, update } = useIntercom();

  useEffect(() => {
    const userAttributes: UserAttributes = {
      email: 'test@example.com',
      name: 'Test User',
      createdAt: Math.floor(Date.now() / 1000),
    };
    boot(userAttributes);

    return () => {
      shutdown();
    };
  }, [boot, shutdown]);

  const handleUpdateUser = () => {
    update({
      name: 'Updated Name',
      custom_attributes: {
        plan: 'premium',
      },
    });
  };

  return (
    <div>
      <button onClick={() => boot({ email: 'new@example.com', name: 'New User' })}>Show Intercom</button>
      <button onClick={() => shutdown()}>Hide Intercom</button>
      <button onClick={handleUpdateUser}>Update User</button>
    </div>
  );
}

export default App;
```

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

### IntercomProvider API

Source: https://github.com/devrnt/react-use-intercom/blob/main/README.md

Documentation for the IntercomProvider component, which is responsible for initializing the window.Intercom instance and managing listeners. It should be placed high in the application tree.

```APIDOC
IntercomProvider:
  Props:
    appId: string - Required. The Intercom application ID.
    ...(other props like email, name, etc. can be passed here for initial boot)
  Description:
    Initializes the Intercom chat instance for the application.
    Ensures the initialization happens only once.
    Attaches any provided listeners.
    Should be placed at the root of the component tree to make `useIntercom` available globally.
```

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

### IntercomProvider API

Source: https://github.com/devrnt/react-use-intercom/blob/main/packages/react-use-intercom/README.md

Documentation for the IntercomProvider component, which is responsible for initializing the window.Intercom instance and managing listeners. It should be placed high in the application tree.

```APIDOC
IntercomProvider:
  Props:
    appId: string - Required. The Intercom application ID.
    ...(other props like email, name, etc. can be passed here for initial boot)
  Description:
    Initializes the Intercom chat instance for the application.
    Ensures the initialization happens only once.
    Attaches any provided listeners.
    Should be placed at the root of the component tree to make `useIntercom` available globally.
```

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

### Showing and Hiding Intercom Messenger

Source: https://github.com/devrnt/react-use-intercom/blob/main/apps/examples/vite/index.html

Illustrates how to programmatically show and hide the Intercom messenger widget using the `show` and `hide` methods from the `useIntercom` hook.

```javascript
import React from 'react';
import { useIntercom } from 'react-use-intercom';

function IntercomControls() {
  const { show, hide } = useIntercom();

  return (
    <div>
      <button onClick={() => show()}>Show Messenger</button>
      <button onClick={() => hide()}>Hide Messenger</button>
    </div>
  );
}

export default IntercomControls;
```

```typescript
import React from 'react';
import { useIntercom } from 'react-use-intercom';

function IntercomControls() {
  const { show, hide } = useIntercom();

  return (
    <div>
      <button onClick={() => show()}>Show Messenger</button>
      <button onClick={() => hide()}>Hide Messenger</button>
    </div>
  );
}

export default IntercomControls;
```

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

### useIntercom Hook API

Source: https://github.com/devrnt/react-use-intercom/blob/main/README.md

Documentation for the useIntercom hook, which provides access to Intercom functions like boot, shutdown, hide, show, and update. This hook can be used anywhere within the application after IntercomProvider has been set up.

```APIDOC
useIntercom:
  Returns:
    boot: () => void - Initializes or boots the Intercom chat.
    shutdown: () => void - Shuts down the Intercom chat.
    hide: () => void - Hides the Intercom messenger.
    show: () => void - Shows the Intercom messenger.
    update: (user: object) => void - Updates the Intercom user properties.
  Description:
    A React hook that exposes core Intercom functionalities.
    Allows direct interaction with the Intercom chat widget from any component.
```

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

### Create Changeset

Source: https://github.com/devrnt/react-use-intercom/blob/main/CONTRIBUTING.md

Generates a changeset to document changes for release, required for user-facing modifications.

```sh
pnpm changeset
```

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

### IntercomProvider Initialization

Source: https://github.com/devrnt/react-use-intercom/blob/main/README.md

Demonstrates the correct way to initialize the IntercomProvider component in a React application. It emphasizes placing the provider high in the component tree to ensure `useIntercom` can be called correctly.

```jsx
<IntercomProvider projectId="YOUR_PROJECT_ID">
  {/* Your application components */}
</IntercomProvider>
```

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

### useIntercom Hook API

Source: https://github.com/devrnt/react-use-intercom/blob/main/packages/react-use-intercom/README.md

Documentation for the useIntercom hook, which provides access to Intercom functions like boot, shutdown, hide, show, and update. This hook can be used anywhere within the application after IntercomProvider has been set up.

```APIDOC
useIntercom:
  Returns:
    boot: () => void - Initializes or boots the Intercom chat.
    shutdown: () => void - Shuts down the Intercom chat.
    hide: () => void - Hides the Intercom messenger.
    show: () => void - Shows the Intercom messenger.
    update: (user: object) => void - Updates the Intercom user properties.
  Description:
    A React hook that exposes core Intercom functionalities.
    Allows direct interaction with the Intercom chat widget from any component.
```

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

### IntercomProvider Initialization

Source: https://github.com/devrnt/react-use-intercom/blob/main/packages/react-use-intercom/README.md

Demonstrates the correct way to initialize the IntercomProvider component in a React application. It emphasizes placing the provider high in the component tree to ensure `useIntercom` can be called correctly.

```jsx
<IntercomProvider projectId="YOUR_PROJECT_ID">
  {/* Your application components */}
</IntercomProvider>
```

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

### IntercomProvider Props

Source: https://github.com/devrnt/react-use-intercom/blob/main/packages/react-use-intercom/README.md

Defines the properties that can be passed to the IntercomProvider component to configure Intercom integration. This includes essential IDs, event handlers for messenger interactions, and options for automatic booting and initialization.

```APIDOC
IntercomProvider:
  appId: string (required) - The app ID of your Intercom instance.
  children: React.ReactNode (required) - React children to be rendered within the provider.
  autoBoot: boolean (optional, default: false) - If true, Intercom will be automatically booted. No need to call `boot` manually.
  onHide: () => void (optional) - Callback triggered when the Intercom Messenger hides.
  onShow: () => void (optional) - Callback triggered when the Intercom Messenger shows.
  onUnreadCountChange: (number) => void (optional) - Callback triggered when the number of unread messages changes.
  onUserEmailSupplied: () => void (optional) - Callback triggered when a visitor enters their email in the Messenger.
  shouldInitialize: boolean (optional, default: true) - Indicates if Intercom should be initialized. Useful for multi-staged environments.
  apiBase: string (optional) - Custom endpoint for routing Messenger requests. Format: `https://${INTERCOM_APP_ID}.intercom-messenger.com`.
  initializeDelay: number (optional, default: 0) - Delay in milliseconds before Intercom initialization.
  autoBootProps: IntercomProps (optional) - Properties to pass to the `boot` method when `autoBoot` is true.
```

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

### IntercomProvider Props

Source: https://github.com/devrnt/react-use-intercom/blob/main/README.md

Defines the properties that can be passed to the IntercomProvider component to configure Intercom integration. This includes essential IDs, event handlers for messenger interactions, and options for automatic booting and initialization.

```APIDOC
IntercomProvider:
  appId: string (required) - The app ID of your Intercom instance.
  children: React.ReactNode (required) - React children to be rendered within the provider.
  autoBoot: boolean (optional, default: false) - If true, Intercom will be automatically booted. No need to call `boot` manually.
  onHide: () => void (optional) - Callback triggered when the Intercom Messenger hides.
  onShow: () => void (optional) - Callback triggered when the Intercom Messenger shows.
  onUnreadCountChange: (number) => void (optional) - Callback triggered when the number of unread messages changes.
  onUserEmailSupplied: () => void (optional) - Callback triggered when a visitor enters their email in the Messenger.
  shouldInitialize: boolean (optional, default: true) - Indicates if Intercom should be initialized. Useful for multi-staged environments.
  apiBase: string (optional) - Custom endpoint for routing Messenger requests. Format: `https://${INTERCOM_APP_ID}.intercom-messenger.com`.
  initializeDelay: number (optional, default: 0) - Delay in milliseconds before Intercom initialization.
  autoBootProps: IntercomProps (optional) - Properties to pass to the `boot` method when `autoBoot` is true.
```

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

### Create Feature Branch

Source: https://github.com/devrnt/react-use-intercom/blob/main/CONTRIBUTING.md

Creates a new Git branch for developing a feature or fix.

```git
git checkout -b your-feature-name
```

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

### Initialize react-use-intercom in NextJS

Source: https://github.com/devrnt/react-use-intercom/blob/main/apps/examples/nextjs-page-router/README.md

This snippet shows how to initialize the `useIntercom` hook in your NextJS application's layout or a top-level component. Ensure you replace `INTERCOM_APP_ID` with your actual Intercom App ID.

```javascript
import React from 'react';
import { IntercomProvider } from 'react-use-intercom';

function MyApp({ Component, pageProps }) {
  return (
    <IntercomProvider appId="INTERCOM_APP_ID">
      <Component {...pageProps} />
    </IntercomProvider>
  );
}

export default MyApp;
```

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

### Delayed Intercom Initialization

Source: https://github.com/devrnt/react-use-intercom/blob/main/packages/react-use-intercom/README.md

Shows how to delay the initialization of the Intercom snippet using the `initializeDelay` prop on the `IntercomProvider`. This is useful for performance optimization, particularly for Largest Contentful Paint (LCP).

```jsx
<IntercomProvider projectId="YOUR_PROJECT_ID" initializeDelay={5000}>
  {/* Your application components */}
</IntercomProvider>
```

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

### Delayed Intercom Initialization

Source: https://github.com/devrnt/react-use-intercom/blob/main/README.md

Shows how to delay the initialization of the Intercom snippet using the `initializeDelay` prop on the `IntercomProvider`. This is useful for performance optimization, particularly for Largest Contentful Paint (LCP).

```jsx
<IntercomProvider projectId="YOUR_PROJECT_ID" initializeDelay={5000}>
  {/* Your application components */}
</IntercomProvider>
```

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

### Using useIntercom Hook

Source: https://github.com/devrnt/react-use-intercom/blob/main/README.md

Illustrates how to use the `useIntercom` hook within a React component to interact with the Intercom service. It highlights the camelCase convention for props and the specific handling of custom attributes.

```javascript
import { useIntercom } from 'react-use-intercom';

function MyComponent() {
  const { boot, update, show, hide } = useIntercom();

  // Example of booting Intercom with custom attributes
  const handleBoot = () => {
    boot({
      appId: 'YOUR_APP_ID',
      customAttributes: {
        // snake_cased custom attributes
        user_id: '123',
        plan_type: 'free'
      }
    });
  };

  return (
    <button onClick={handleBoot}>Boot Intercom</button>
  );
}
```

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

### Intercom Initialization in Next.js (App Router)

Source: https://github.com/devrnt/react-use-intercom/blob/main/apps/examples/nextjs-app-router/README.md

This snippet demonstrates how to initialize Intercom within a Next.js application using the App Router. It involves setting up the Intercom app ID, typically from environment variables, and ensuring it's correctly passed during initialization. This is crucial for the library to function correctly.

```javascript
import { useIntercom } from 'react-use-intercom';

function MyApp({ Component, pageProps }) {
  const { boot } = useIntercom({
    appId: process.env.NEXT_PUBLIC_INTERCOM_APP_ID,
  });

  // You might want to boot Intercom when the user is logged in or on specific pages
  // For example, in a layout component:
  // useEffect(() => {
  //   if (user) {
  //     boot({
  //       name: user.name,
  //       email: user.email,
  //       createdAt: Math.floor(Date.now() / 1000),
  //     });
  //   }
  // }, [user, boot]);

  return <Component {...pageProps} />;
}
```

```typescript
import { useIntercom } from 'react-use-intercom';

function MyApp({ Component, pageProps }: AppProps) {
  const { boot } = useIntercom({
    appId: process.env.NEXT_PUBLIC_INTERCOM_APP_ID as string,
  });

  // Example of booting with user data:
  // useEffect(() => {
  //   if (user) {
  //     boot({
  //       name: user.name,
  //       email: user.email,
  //       createdAt: Math.floor(Date.now() / 1000),
  //     });
  //   }
  // }, [user, boot]);

  return <Component {...pageProps} />;
}
```

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

### Using useIntercom Hook

Source: https://github.com/devrnt/react-use-intercom/blob/main/packages/react-use-intercom/README.md

Illustrates how to use the `useIntercom` hook within a React component to interact with the Intercom service. It highlights the camelCase convention for props and the specific handling of custom attributes.

```javascript
import { useIntercom } from 'react-use-intercom';

function MyComponent() {
  const { boot, update, show, hide } = useIntercom();

  // Example of booting Intercom with custom attributes
  const handleBoot = () => {
    boot({
      appId: 'YOUR_APP_ID',
      customAttributes: {
        // snake_cased custom attributes
        user_id: '123',
        plan_type: 'free'
      }
    });
  };

  return (
    <button onClick={handleBoot}>Boot Intercom</button>
  );
}
```

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

### Intercom Event Tracking

Source: https://github.com/devrnt/react-use-intercom/blob/main/apps/examples/vite/index.html

Shows how to track custom events in Intercom using the `useIntercom` hook. This is useful for monitoring user actions within your application.

```javascript
import React from 'react';
import { useIntercom } from 'react-use-intercom';

function ProductPage() {
  const { trackEvent } = useIntercom();

  const handlePurchase = (productName, price) => {
    trackEvent('purchase', {
      product_name: productName,
      price: price,
    });
  };

  return (
    <div>
      <h2>Product Details</h2>
      <button onClick={() => handlePurchase('Awesome Gadget', 99.99)}>
        Purchase
      </button>
    </div>
  );
}

export default ProductPage;
```

```typescript
import React from 'react';
import { useIntercom } from 'react-use-intercom';

interface PurchaseEvent {
  product_name: string;
  price: number;
}

function ProductPage() {
  const { trackEvent } = useIntercom();

  const handlePurchase = (productName: string, price: number) => {
    const eventData: PurchaseEvent = {
      product_name: productName,
      price: price,
    };
    trackEvent('purchase', eventData);
  };

  return (
    <div>
      <h2>Product Details</h2>
      <button onClick={() => handlePurchase('Awesome Gadget', 99.99)}>
        Purchase
      </button>
    </div>
  );
}

export default ProductPage;
```

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

### useIntercom Hook

Source: https://github.com/devrnt/react-use-intercom/blob/main/packages/react-use-intercom/README.md

The useIntercom hook provides access to all Intercom methods within your React components. It requires the IntercomProvider to be wrapped around the component tree. Note that useIntercom cannot be used in the same component where IntercomProvider is initialized.

```APIDOC
useIntercom(): IntercomMethods
  Description: Retrieves all methods bundled with Intercom, based on the official Intercom JavaScript API. Some extra methods are added for convenience.
  Prerequisites: Must be used within a component wrapped by `IntercomProvider`.
  Limitations: Cannot be used in the same component as `IntercomProvider` initialization.
  Intercom Methods (based on official docs):
    boot(options?: BootOptions): void
    shutdown(): void
    hide(): void
    show(): void
    update(options?: UpdateOptions): void
    on(eventName: string, callback: (...args: any[]) => void): void
    off(eventName: string, callback?: (...args: any[]) => void): void
    trackEvent(eventName: string, metadata?: EventMetadata): void
    setVisitor(options: VisitorOptions): void
    setUser(options: UserOptions): void
    showNeedsAttention(messageId: string): void
    hideNeedsAttention(): void
    startTour(tourId: string): void
    showArticle(articleId: string): void
    showConversation(conversationId: string): void
    ...
```

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

### useIntercom Hook

Source: https://github.com/devrnt/react-use-intercom/blob/main/README.md

The useIntercom hook provides access to all Intercom methods within your React components. It requires the IntercomProvider to be wrapped around the component tree. Note that useIntercom cannot be used in the same component where IntercomProvider is initialized.

```APIDOC
useIntercom(): IntercomMethods
  Description: Retrieves all methods bundled with Intercom, based on the official Intercom JavaScript API. Some extra methods are added for convenience.
  Prerequisites: Must be used within a component wrapped by `IntercomProvider`.
  Limitations: Cannot be used in the same component as `IntercomProvider` initialization.
  Intercom Methods (based on official docs):
    boot(options?: BootOptions): void
    shutdown(): void
    hide(): void
    show(): void
    update(options?: UpdateOptions): void
    on(eventName: string, callback: (...args: any[]) => void): void
    off(eventName: string, callback?: (...args: any[]) => void): void
    trackEvent(eventName: string, metadata?: EventMetadata): void
    setVisitor(options: VisitorOptions): void
    setUser(options: UserOptions): void
    showNeedsAttention(messageId: string): void
    hideNeedsAttention(): void
    startTour(tourId: string): void
    showArticle(articleId: string): void
    showConversation(conversationId: string): void
    ...
```

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

### Passing Custom Attributes to Intercom

Source: https://github.com/devrnt/react-use-intercom/blob/main/packages/react-use-intercom/README.md

Illustrates how to pass custom attributes to Intercom using the `customAttributes` property within the `boot` or `update` methods. The keys for `customAttributes` should be snake_cased as required by Intercom.

```ts
const { boot } = useIntercom();

boot({
  name: 'Russo',
  customAttributes: { custom_attribute_key: 'hi there' },
})
```

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

### Passing Custom Attributes to Intercom

Source: https://github.com/devrnt/react-use-intercom/blob/main/README.md

Illustrates how to pass custom attributes to Intercom using the `customAttributes` property within the `boot` or `update` methods. The keys for `customAttributes` should be snake_cased as required by Intercom.

```ts
const { boot } = useIntercom();

boot({
  name: 'Russo',
  customAttributes: { custom_attribute_key: 'hi there' },
})
```

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

### Gatsby Intercom Integration

Source: https://github.com/devrnt/react-use-intercom/blob/main/apps/examples/gatsby/README.md

This snippet demonstrates how to configure and use the react-use-intercom hook within a Gatsby project. It highlights the need to replace the placeholder `INTERCOM_APP_ID` with your specific Intercom application ID.

```jsx
import React from 'react';
import { useIntercom } from 'react-use-intercom';

const MyApp = () => {
  const { boot, shutdown, update } = useIntercom({
    appId: 'YOUR_INTERCOM_APP_ID',
  });

  // Example usage:
  // boot(); // To initialize Intercom
  // shutdown(); // To close Intercom
  // update({ email: 'user@example.com', name: 'John Doe' }); // To update user properties

  return (
    <div>
      <h1>Welcome to my Gatsby App</h1>
      {/* Your app content */}
    </div>
  );
};

export default MyApp;

```

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