Cookie consent

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. After a visitor accepts cookies on your site, send a postMessage to the embedded demo iframe:

Granting consent

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

To revoke consent:

Revoking consent

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 }`

The 'necessary' preset does not suppress event tracking — events remains true. To suppress analytics, send { events: false, forms: false } instead.

If you use navattic.onEvent to forward events to a tag manager such as Google Tag Manager, callbacks will not fire when events is false.

Examples

OneTrust

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

OneTrust

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:

Cookiebot

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

Call this function from your banner’s accept handler:

Generic

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

Build

For Sellers

Share

Analyze

Copilot

Tracking & Integrations

Workspace

Help

Set a default tracking state

Value payload

Config object

String presets

Examples

OneTrust

Cookiebot

Generic banner

​Set a default tracking state

​Wire the consent banner

​Value payload

​Config object

​String presets

​Examples

​OneTrust

​Cookiebot

​Generic banner

Set a default tracking state

Wire the consent banner

Value payload

Config object

String presets

Examples

OneTrust

Cookiebot

Generic banner