JavaScript API

The script exposes window.ccs once the banner has loaded, and fires a ccs:change event on document whenever consent changes.

Methods

Call	Returns
`ccs.get()`	The current choice as `{ necessary: true, statistics: false, … }`, or `null` before the visitor has chosen.
`ccs.on('change', fn)`	Calls `fn(purposes)` now, if the visitor has already chosen, and whenever the choice changes.
`ccs.show()`	Opens the banner, for example from a "Cookie settings" link in your footer.
`ccs.withdraw()`	Withdraws all optional consent and records the withdrawal.
`ccs.optOut()`	Opts out under the opt-out regime.
`ccs.regime()`	`"optin"`, `"optout"` or `"notice"`, as applied to this visitor.
`ccs.id()`	The consent ID of the visitor's recorded choice, or `null`. Show it on your privacy page so visitors can quote it in a request.
`ccs.dnt()`	Whether the browser sends Do Not Track. The banner does not act on it by itself, since it has no legal effect in the EEA; Global Privacy Control is honoured under the opt-out regime.
`ccs.blocked()`	What the blocker held back on this page (or would have, in report mode).

Examples

// Start analytics when statistics is allowed, now or later.
document.addEventListener('ccs:change', (e) => { if (e.detail.statistics) startAnalytics() })
if (window.ccs?.get()?.statistics) startAnalytics()

window.ccs appears a moment after the script loads; the ccs:change event works even if your code runs first.

<a href="#" onclick="ccs.show(); return false">Cookie settings</a>

npm package and React

The @pxl/consent package wraps this API with TypeScript types, loadConsent(), onConsent() and whenAllowed(), and React bindings: <ConsentProvider>, useConsent() and useCategory('marketing'). Keep the script tag first in <head>; the package reads from it. Where a single-page app cannot edit its HTML, loadConsent({ siteId, lang }) adds the tag in the page's language.

import { useCategory, useConsent } from '@pxl/consent/react'

function Video() {
  const allowed = useCategory('marketing')
  const { show } = useConsent()
  return allowed ? <YouTube /> : <button onClick={show}>Allow marketing to watch</button>
}

JavaScript API

Methods

Examples

npm package and React

Categories