# LiveIntent

The c15t liveIntentTag helper loads LiveIntent LiveConnect only after visitors allow marketing in Inth. On withdrawal, c15t reloads the page.

## Key facts

- **Tool:** LiveIntent
- **Category:** Advertising
- **Consent categories:** Marketing
- **Setup method:** c15t package
- **Package:** @c15t/integrations

## Links

- [Documentation](https://c15t.com/docs/integrations/liveintent)
- [LiveIntent](https://www.liveintent.com/)

Run the LiveIntent LiveConnect tag only after visitors allow marketing. Queue your first events, and they go out when the tag loads.

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, c15t in that app and the tag ID from your LiveConnect base tag. Use the file name without .min.js.

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 LiveIntent

Before marketing has permission, the c15t liveIntentTag helper creates no liQ queue and adds no tag.

After permission, the helper sets window.liQ, pushes your events in order and adds one async loader. LiveConnect then replaces the array with its own client.

LiveConnect has no stop API. So on withdrawal, the helper leaves the tag in place, and the default reload of c15t removes it.

Where GDPR applies, LiveIntent also asks for TCF signals. The marketing category of c15t does not replace a TC string, so check the needs of your account with LiveIntent.

## Installation

LiveIntent has one load mode in c15t. The helper waits for marketing permission.

### Wait for permission

No request goes to LiveIntent until the visitor accepts marketing. On withdrawal, c15t reloads the page.

```ts
liveIntentTag({ tagId })
```

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

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

#### Add your tag ID

Do not test with the public a-00xx tag from the LiveIntent examples. It is live production code, not a sandbox.

```
import { liveIntentTag } from '@c15t/integrations/liveintent';

export const scripts = [liveIntentTag({ tagId: 'YOUR_TAG_ID' })];
```

For later events, call window.liQ.push with a plain event object, and only while marketing has permission.

### 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="marketing">
  // 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,
});
```

Delete the direct base tag and each tag manager copy, so they cannot load LiveConnect without consent.

## Verify your setup

Use a fresh browser profile with an opt-in policy. Open DevTools Network and filter by liadm.com. Then test the three states.

- **Before a choice**: No request goes to LiveIntent. Allow only another category and check again. No globals, cookies or storage appear.

- **After you allow marketing**: The loader loads, and its URL matches the base tag of your account.

- **After you withdraw marketing**: Save your choice. c15t reloads the page, and LiveIntent stays blocked on the new page.

For a Content Security Policy, the main hosts are b-code.liadm.com, idx.liadm.com, rp.liadm.com, rpr.liadm.com and i.liadm.com.

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

## Related guides

- [Meta Pixel](/integrations/meta-pixel)

- [Microsoft UET](/integrations/microsoft-uet)

- [OpenAI Pixel](/integrations/openai-pixel)