# Insider

The c15t insiderTag helper loads Insider One only after visitors allow marketing in Inth. It sends gdpr_optin true on grant and false on withdrawal, then c15t reloads.

## Key facts

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

## Links

- [Documentation](https://c15t.com/docs/integrations/insider)
- [Insider](https://insiderone.com/)

Personalize web campaigns with Insider One only for visitors who allow marketing. On withdrawal, Insider receives an opt out before c15t reloads.

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 your public partnerName and partnerId from Insider.

Ask Insider to confirm that Web SDK integration is on for your account. Insider says to keep the tag off pages with sensitive data, such as payment pages.

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

## How consent works with Insider

Before marketing has permission, the c15t insiderTag helper creates no InsiderQueue and does not request ins.js.

On grant, the helper queues the current user with gdpr\_optin: true, an optional currency, the page definition and init. Then it adds the loader.

On withdrawal, it queues gdpr\_optin: false, a neutral other page and init. Then it removes the loader. Insider has no unload method, so keep the reload on revocation.

The helper sets the first page only. For client side routes, push the new page and init yourself, but only while consent allows it.

## Installation

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

### Wait for permission

No request goes to Insider until the visitor accepts marketing. On withdrawal, Insider gets gdpr\_optin: false and c15t reloads.

```ts
insiderTag({ partnerName, partnerId })
```

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

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

#### Add your partner details

This example describes a clothing category page. Replace pageType with the definition for the current page. Without it, the helper sends { type: 'other' }.

```
import { insiderTag } from '@c15t/integrations/insider';

export const scripts = [
  insiderTag({
    currency: 'GBP',
    pageType: {
      type: 'category',
      value: { breadcrumb: ['Clothing', 'Dresses'] },
    },
    partnerId: 'YOUR_PARTNER_ID',
    partnerName: 'yourpartner',
  }),
];
```

On a site with many currencies, pass the currency of the prices on the page. Otherwise an earlier value can stay active.

#### Pass the current user

Insider uses the last user push when init runs. Pass all attributes of the current user in user. The helper sets gdpr\_optin: true after them, so your data cannot override consent.

```
import { insiderTag } from '@c15t/integrations/insider';
import type { InsiderPageType } from '@c15t/integrations/insider';

export const createInsiderScripts = function createInsiderScripts(
  currentUser: Record<string, unknown>,
  currency: string,
  guardedPage: InsiderPageType
) {
  return [
    insiderTag({
      currency,
      pageType: guardedPage,
      partnerId: 'YOUR_PARTNER_ID',
      partnerName: 'yourpartner',
      user: currentUser,
    }),
  ];
};
```

The helper copies user when you call it. It does not watch login, logout, checkout or route changes.

### 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,
});
```

Remove any other Insider tag or tag manager setup. Also remove code that fills window.insider\_object, since Insider does not support it next to InsiderQueue.

## Verify your setup

Use a fresh private window with an opt-in policy. Filter DevTools Network by useinsider.com. Then test the three states.

- **Before a choice**: No Insider request appears, and window.InsiderQueue does not exist. This holds after a rejection and reload too.

- **After you allow marketing**: The ins.js request for your partner appears. The last user push holds the current identifiers, then the currency, page and init.

- **After you withdraw marketing**: Test the category and the Insider vendor switch. The next denied page makes no Insider request.

An order confirmation page needs a guard for each order in your order backend. The helper does not remove repeat order\_id values, so a reload could send the order again.

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

## Related guides

- [Klaviyo](/integrations/klaviyo)

- [Marketo Munchkin](/integrations/marketo)

- [Oracle Eloqua](/integrations/oracle-eloqua)