# Intercom

The c15t intercom helper loads the Intercom Messenger only after visitors allow functionality in Inth. On withdrawal, c15t removes it and reloads the page.

## Key facts

- **Tool:** Intercom
- **Category:** Support and chat
- **Consent categories:** Functionality
- **Setup method:** c15t package
- **Package:** @c15t/integrations

## Links

- [Documentation](https://c15t.com/docs/integrations/intercom)
- [Intercom](https://www.intercom.com/)

Talk to visitors in the Intercom Messenger once they allow functionality. Until then, c15t defines no window.Intercom or intercomSettings.

Inth keeps the consent record of each choice, with the visitor’s country and the policy that applied.

[Start for free](/dashboard/sign-up)

## Before you start

You need an Inth project that connects to your app and c15t in that app. You also need the app ID from your Intercom installation snippet.

For a workspace in the EU or Australia, also set apiBase.

[Open the quickstart for your framework](https://c15t.com/docs/frameworks)

## How consent works with Intercom

When functionality becomes allowed, the c15t intercom helper defines a queue stub for window.Intercom. Then it writes intercomSettings and loads the Messenger.

On withdrawal, c15t removes the script element and calls no Intercom API, not even shutdown.

The Messenger keeps running until c15t reloads the page, which c15t does by default.

The helper writes settings once, before the Messenger loads. Send login and logout changes through the Intercom API yourself.

## Installation

Intercom has one load mode in c15t. The helper waits for functionality permission.

### Wait for permission

No request goes to Intercom until the visitor accepts functionality. On withdrawal, c15t reloads the page.

```ts
intercom({ appId })
```

An opt-out policy or no policy gives optional categories permission before a choice. Then Intercom loads on the first page. This guide uses an opt-in policy.

## Setup steps

#### Install the integration package

Add the helpers next to c15t. An import alone does not start the Intercom Messenger.

```
pnpm add @c15t/integrations
```

#### Add your app ID

The helper trims the ID. An empty ID logs an error, and the Messenger does not load.

```
import { intercom } from '@c15t/integrations/intercom';

export const scripts = [intercom({ appId: 'YOUR_APP_ID' })];
```

INTERCOM\_API\_BASES from @c15t/integrations/intercom lists the us, eu and au API bases.

#### Guard your own Intercom calls

window.Intercom still exists after withdrawal. So check functionality permission before your own calls.

```
export function updateIntercomUser(
	functionalityAllowed: boolean,
	userId: string
) {
	if (!functionalityAllowed || typeof window.Intercom !== 'function') return;
	window.Intercom('update', { user_id: userId });
}
```

Pass the current permission, for example useConsent('functionality') in React.

### Register it with your existing setup

#### Next.js

Add scripts to c15t.config.ts, next to next.config.ts. Keep the rest of your config, such as mode, in the same call. App Router, Pages Router and static export read the same file.

```
import { defineConsentConfig } from 'c15t/next';
import { scripts } from './src/consent-scripts';

export default defineConsentConfig({ scripts });
```

#### TanStack Start

Pass scripts to the ConsentRoot in your root route. Import helpers in the route module, not in a server function: script configurations carry callbacks.

```
import { scripts } from '../consent-scripts';

<ConsentRoot state={consent} scripts={scripts}>
```

#### React

Add scripts to the options of your ConsentProvider, next to mode. Keep the banner, dialog and preferences link inside the provider.

```
import { scripts } from './consent-scripts';

<ConsentProvider options={{ mode, scripts }}>
```

#### Nuxt

Register scripts under the c15t key in app.config.ts. Keep them out of nuxt.config.ts, which reaches the browser as JSON and drops the helper callbacks.

```
import { scripts } from '../src/consent-scripts';

export default defineAppConfig({
  c15t: { scripts },
});
```

#### Vue

Pass scripts to the c15tVue plugin call you have now. The plugin starts one script loader when the app mounts.

```
import { c15tVue, manifest } from 'c15t/vue/vue-plugin';
import { scripts } from './consent-scripts';

app.use(c15tVue, {
  mode: manifest(),
  scripts,
});
```

#### Astro

Add scripts to the client entrypoint, which the integration finds on its own. Keep helpers out of astro.config.mjs: its options are serialized into the page.

```
import type { C15tClientOptionsExtension } from 'c15t/astro';
import { scripts } from './consent-scripts';

export default { scripts } satisfies C15tClientOptionsExtension;
```

#### Svelte

Pass scripts as a prop to the ConsentProvider you have now. The provider owns the loader and disposes it on unmount.

```
<script lang="ts">
  import { ConsentProvider, manifest } from 'c15t/svelte';
  import { scripts } from './consent-scripts';
</script>

<ConsentProvider mode={manifest()} {scripts}>
  <!-- Your app and consent UI -->
</ConsentProvider>
```

#### SvelteKit

Add scripts to the ConsentRoot in the root layout. Import helpers in the layout component, not in +layout.server.ts: a server load cannot send functions to the browser.

```
<script lang="ts">
  import { ConsentRoot } from 'c15t/svelte';
  import { scripts } from '../consent-scripts';

  let { children, data } = $props();
</script>

<ConsentRoot state={data.consent} {scripts}>
  {@render children()}
</ConsentRoot>
```

#### HTML: Paste the vendor’s snippet behind consent

The helpers need a bundler. On a page with the c15t script tag, paste the vendor’s own snippet instead and keep it inert until visitors allow its category. Helper options, such as loadMode, do not apply.

```
<script type="text/plain" data-c15t-category="functionality">
  // The vendor's snippet, unchanged
</script>
```

#### JavaScript

Pass scripts to init() from @c15t/browser, next to your mode. With createConsentRuntime, pass scripts to it instead.

```
import { init, manifest } from '@c15t/browser';
import { scripts } from './consent-scripts';

const consent = init({
  mode: manifest(),
  scripts,
});
```

Remove the original Intercom snippet, so it cannot load without consent.

## Verify your setup

Filter DevTools Network by intercom. Then test the three states.

- **Before a choice**: No Intercom request appears, and c15t defines no window.Intercom.

- **After you allow functionality**: The request to widget.intercom.io/widget with your app ID appears, and the Messenger shows.

- **After you withdraw functionality**: c15t reloads the page, and the new page loads no Messenger.

Log in and out of your app. Then check that the Messenger never shows the conversations of the previous user.

[Open the full Intercom guide](https://c15t.com/docs/integrations/intercom)

## Related guides

- [YouTube](/integrations/youtube)

- [Zendesk Messaging](/integrations/zendesk)

- [Ada](/integrations/ada)