c15t/docs/integrations/intercom.md

Headless JavaScript consent management platform for cookie banners, privacy preferences, consent storage, and script gating.

---
title: Intercom
description: Bootstrap Intercom settings and load the messenger widget bundle.
group: integrations
icon: intercom
---
Intercom adds the Intercom messenger widget and queues early `Intercom(...)`
calls until the widget bundle loads.

## Official Intercom documentation

* [Install Intercom Messenger](https://developers.intercom.com/installing-intercom/web/installation)
* [Secure your Messenger](https://developers.intercom.com/installing-intercom/web/identity-verification)
* [JavaScript API](https://developers.intercom.com/installing-intercom/web/methods)
* [Attributes and objects](https://developers.intercom.com/installing-intercom/web/attributes-objects)

## Integrate with c15t

**React**

```tsx
import { type ReactNode } from 'react';
import { ConsentManagerProvider } from '@c15t/react';
import { intercom } from '@c15t/scripts/intercom';

const scripts = [intercom({ appId: 'abc123' })];

export function ConsentProvider({ children }: { children: ReactNode }) {
  return (
    <ConsentManagerProvider
      options={{
        mode: 'hosted',
        backendURL: 'https://your-instance.c15t.dev',
        scripts,
      }}
    >
      {children}
    </ConsentManagerProvider>
  );
}
```

**Next.js**

```tsx
'use client';

import { type ReactNode } from 'react';
import { ConsentManagerProvider } from '@c15t/nextjs';
import { intercom } from '@c15t/scripts/intercom';

const scripts = [intercom({ appId: 'abc123' })];

export function ConsentProvider({ children }: { children: ReactNode }) {
  return (
    <ConsentManagerProvider
      options={{
        mode: 'hosted',
        backendURL: '/api/c15t',
        scripts,
      }}
    >
      {children}
    </ConsentManagerProvider>
  );
}
```

**JavaScript**

```ts
import { getOrCreateConsentRuntime } from 'c15t';
import { intercom } from '@c15t/scripts/intercom';

getOrCreateConsentRuntime({
  mode: 'hosted',
  backendURL: 'https://your-instance.c15t.dev',
  scripts: [intercom({ appId: 'abc123' })],
});
```

## How c15t loads it

* **Category:** `functionality` (Functional)
* **Loads when:** functionality consent is granted
* **Before load:** c15t seeds `window.intercomSettings` and a queueing
  `Intercom` stub
* **On revocation:** c15t follows the default script loader behavior for
  non-persistent scripts

## Configure the integration

Intercom's default regional API base is `https://api-iam.intercom.io`. If your
workspace uses the EU or Australia data host, pass the matching `apiBase`.

```ts
intercom({
  appId: 'abc123',
  apiBase: 'https://api-iam.eu.intercom.io',
})
```

### Runtime options

Pass additional Intercom settings through `settings`. The helper always writes
the provided `appId` to `app_id` and `apiBase` to `api_base`.

```ts
intercom({
  appId: 'abc123',
  settings: {
    name: 'Ada Lovelace',
    user_id: 'user-123',
    company: {
      company_id: 'company-123',
      name: 'Example Company Inc.',
    },
  },
})
```

For logged-in users, Intercom recommends securing the Messenger with
server-generated identity data. Generate verification tokens on your backend and
only pass client-safe values through `settings`.

## Types

### IntercomOptions

|Property|Value|
|:--|:--|
|Type Name|\`IntercomOptions\`|
|Source Path|\`./packages/scripts/src/vendors/functional/intercom.ts\`|

\*ExtractedTypeTable: Could not extract "IntercomOptions" from "./packages/scripts/src/vendors/functional/intercom.ts" using base path "/home/runner/work/c15t/c15t". Verify the path/name and that the file is included by your tsconfig.\*

### Script

|Property|Value|
|:--|:--|
|Type Name|\`Script\`|
|Source Path|\`./packages/core/src/libs/script-loader/types.ts\`|

\*ExtractedTypeTable: Could not extract "Script" from "./packages/core/src/libs/script-loader/types.ts" using base path "/home/runner/work/c15t/c15t". Verify the path/name and that the file is included by your tsconfig.\*