> ## Documentation Index
> Fetch the complete documentation index at: https://docs.navattic.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Cookie consent

> Control Navattic tracking until a visitor accepts cookies.

If your site uses a cookie consent banner, you can configure embedded Navattic demos to wait for consent. They suppress event tracking and form data persistence until a visitor accepts cookies.

<Note>
  This integration applies to demos **embedded on your website** as an iframe. To control tracking
  for demos opened via a direct Navattic link, use the **Cookie tracking** setting in [Demo
  Defaults](/workspace/demo-defaults).
</Note>

## Set a default tracking state

Before wiring your consent banner, set the default tracking state demos use at load time.

In **Settings → Demo Defaults → Cookie tracking**, choose one of three states:

* **Off**: No tracking. Event analytics and form data persistence are both suppressed until consent is granted via postMessage.
* **Events**: Tracks engagement events but does not persist submitted form data.
* **Events + forms**: Full tracking, including form data persistence and pre-fill.

To defer all tracking until consent is granted, set this to **Off**.

You can override this default for a specific demo in **Demo Settings → Cookie tracking**.

## Wire the consent banner

After a visitor accepts cookies on your site, send a `postMessage` to the embedded demo iframe:

```js title="Granting consent" theme={null}
const iframe = document.querySelector('iframe[src*="navattic"]');
iframe.contentWindow.postMessage(
  { kind: 'navattic:set-cookie-consent', value: { events: true, forms: true } },
  '*'
);
```

To revoke consent:

```js title="Revoking consent" theme={null}
const iframe = document.querySelector('iframe[src*="navattic"]');
iframe.contentWindow.postMessage(
  { kind: 'navattic:set-cookie-consent', value: { events: false, forms: false } },
  '*'
);
```

The demo updates dynamically: tracking starts or stops on the next event after the message is received.

## Value payload

The `value` field accepts either a config object or a string preset.

### Config object

| Field    | Type    | Description                               |
| -------- | ------- | ----------------------------------------- |
| `events` | boolean | Gates analytics and engagement tracking.  |
| `forms`  | boolean | Gates form data persistence and pre-fill. |

### String presets

| Preset        | Equivalent to                    |
| ------------- | -------------------------------- |
| `'all'`       | `{ events: true, forms: true }`  |
| `'necessary'` | `{ events: true, forms: false }` |

<Warning>
  The `'necessary'` preset does not suppress event tracking: `events` remains `true`. To suppress analytics, send `{ events: false, forms: false }` instead.
</Warning>

<Note>
  If you use `navattic.onEvent` to forward events to a tag manager such as [Google Tag
  Manager](/tracking/navattic-js/subscribe-to-events/google-tag-manager), callbacks will not fire
  when `events` is `false`.
</Note>

## Examples

### OneTrust

Fire the postMessage from the `OptanonWrapper` callback, which runs on page load and whenever consent changes:

```js title="OneTrust" theme={null}
function OptanonWrapper() {
  const iframe = document.querySelector('iframe[src*="navattic"]');
  if (!iframe) return;

  const hasConsent = window.OnetrustActiveGroups?.includes('C0002');
  iframe.contentWindow.postMessage(
    { kind: 'navattic:set-cookie-consent', value: { events: hasConsent, forms: hasConsent } },
    '*'
  );
}
```

Replace `'C0002'` with the category ID your organization uses for analytics cookies.

### Cookiebot

Use the `CookiebotOnAccept` event:

```js title="Cookiebot" theme={null}
window.addEventListener('CookiebotOnAccept', function () {
  const iframe = document.querySelector('iframe[src*="navattic"]');
  if (!iframe) return;

  const hasConsent = Cookiebot.consent.statistics;
  iframe.contentWindow.postMessage(
    { kind: 'navattic:set-cookie-consent', value: { events: hasConsent, forms: hasConsent } },
    '*'
  );
});
```

### Generic banner

Call this function from your banner's accept handler:

```js title="Generic" theme={null}
function onCookiesAccepted() {
  const iframe = document.querySelector('iframe[src*="navattic"]');
  if (!iframe) return;

  iframe.contentWindow.postMessage(
    { kind: 'navattic:set-cookie-consent', value: { events: true, forms: true } },
    '*'
  );
}
```

## Related

<CardGroup cols={2}>
  <Card title="Demo defaults" icon="wrench" href="/workspace/demo-defaults">
    Set the workspace-level Cookie tracking default that applies to all demos.
  </Card>

  <Card title="Security and privacy" icon="shield" href="/workspace/security">
    Overview of Navattic's security practices and data handling.
  </Card>
</CardGroup>