> ## 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 suppress event tracking and form data persistence until a visitor accepts cookies.

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