# Front Chat

The c15t frontChat helper loads Front Chat only after visitors allow functionality in Inth. shutdownFrontChat clears the Front session before the reload.

## Key facts

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

## Links

- [Documentation](https://c15t.com/docs/integrations/front-chat)
- [Front Chat](https://front.com/)

Connect visitors to your Front inbox through Front Chat, once they allow functionality. You can also clear the Front session when they withdraw.

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 chatId from the widget snippet in the Installation tab of your Front Chat channel.

New to c15t? Complete the quickstart for your framework first. Keep its Inth endpoint, policy, styles and consent UI.

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

## How consent works with Front Chat

When functionality becomes allowed, the c15t frontChat helper adds the loader to the body. After the SDK loads, it calls FrontChat('init') with your chat ID.

If consent ends while the SDK still downloads, the helper skips init.

On withdrawal, c15t removes the loader element and calls no Front API. The widget stays until c15t reloads the page.

The reload removes the widget but keeps the Front session. To clear it, call shutdownFrontChat() before the reload.

## Installation

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

### Wait for permission

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

```ts
frontChat({ chatId })
```

An opt-out policy or no policy gives optional categories permission before a choice. Then Front Chat 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 Front Chat.

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

#### Add your chat ID

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

```
import { frontChat } from '@c15t/integrations/front-chat';

export const scripts = [frontChat({ chatId: 'YOUR_FRONT_CHAT_ID' })];
```

Set useDefaultLauncher: false to open the widget from your own launcher. Front creates more resources, so follow the Front CSP instructions too.

#### Clear the Front session on withdrawal

Call shutdownFrontChat() from the onBeforeConsentRevocationReload callback in your consent options.

```
import { shutdownFrontChat } from '@c15t/integrations/front-chat';

export const callbacks = {
	onBeforeConsentRevocationReload: ({ preferences }) => {
		if (!preferences.functionality) {
			shutdownFrontChat();
		}
	},
};
```

Front returns no completion signal, so the reload does not wait for the session to clear.

### 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 Front Chat snippet, so it cannot load without consent.

## Verify your setup

Filter DevTools Network by frontapp.com. Then test the three states.

- **Before a choice**: No Front Chat bundle loads.

- **After you allow functionality**: chat.bundle.js loads, and the widget connects to your Front inbox.

- **After you withdraw functionality**: c15t reloads the page. With shutdownFrontChat wired, the next grant starts a new Front session.

A proxy in scriptSrc does not proxy the other requests of the widget.

[Open the full Front Chat guide](https://c15t.com/docs/integrations/front-chat)

## Related guides

- [Google Maps](/integrations/google-maps)

- [Gorgias Chat](/integrations/gorgias)

- [Intercom](/integrations/intercom)