jump to content
ZebraByte

Consent Manager API

To read the visitor’s consent status and subscribe to changes with getConsent, has, onReady and onChange in your code.

Show as Markdown

The consent manager is an easy, agnostic framework for reading consent status and responding to changes in application code. It works with all three SDK modes – script label, thematic banner and headless components.

Use it when you need to run conditional code based on consent — for example, initializing an analysis library only after the visitor gives permission, or displaying a component differently depending on permitted categories.

Importing

Section entitled “Importing”

The Consent Manager is available as an independent sub-export that does not send the UI code:

import { getConsent } from "@probo/cookie-banner/consent";


const consent = getConsent();

If you use the IIFE script tag, the same singleton is exposed on the ___ZBT_I18N_RUNTIME_BLOCK_169__ object:

const consent = window.Probo.consent;

getConsent() always returns the same instance ConsentManager. You can call it from anywhere in your application - there is no need to go through it through props or context.

API Reference

Section entitled “APIReference”

getConsent()

Section entitled “getConsent()”

Returns the global singleton ConsentManager. Call it from any module.

import { getConsent } from "@probo/cookie-banner/consent";


const consent = getConsent();

Properties

Section entitled “Properties”
Property Type Description
ready boolean true once the SDK has resolved the initial consent status (from cookie,APIor by default).
hasResponse boolean true if the visitor has actively made a consent choice (unlike the standards applied).

has(category)

Section entitled “has(category)”

Check if a specific category is currently allowed.

if (consent.has("analytics")) {
  // Analytics category is granted
}

Parameters:

Parameter Type Description
category string Category slug (e.g. "analytics", "advertising", "functional")

Returns: boolean

getAll()

Section entitled “getAll()”

Returns the full consent status as Record<string, boolean> typed by slug category.

const state = consent.getAll();
// { necessary: true, analytics: false, advertising: false, functional: true }

onReady(callback)

Section entitled “onReady(callback)”

Records a one-time call that turns on when the consent status is resolved first.

const off = consent.onReady((data) => {
  console.log("Consent resolved:", data);
});


// Call off() to unsubscribe before it fires
off();

Returns: An unsubscribe function.

onChange(callback)

Section entitled “onChange(callback)”

It records a feedback that turns on every time the visitor updates their consent options. not fire for the initial resolution – use onReady or subscribe for this.

const off = consent.onChange((data) => {
  console.log("Consent updated:", data);
});


off(); // stop listening

Returns: An unsubscribe function.

subscribe(callback)

Section entitled “subscribe (callback)”

It combines onReady and onChange into a single subscription. The withdrawal call is lit once the consent is first resolved, then again whenever the visitor changes his choices.

const off = consent.subscribe((data) => {
  console.log("Consent state:", data);
});


off(); // stop listening

Returns: An unsubscribe function.

Examples

Section entitled “Examples”

Conditionally initialize analytics

Section “Conditionally initialize analytics”
import { getConsent } from "@probo/cookie-banner/consent";


getConsent().onReady((data) => {
  if (data.analytics) {
    loadAnalytics();
  }
});


getConsent().onChange((data) => {
  if (data.analytics) {
    loadAnalytics();
  }
});

Guard a third-party SDK

Section entitled “Guard a third-party SDK”
import { getConsent } from "@probo/cookie-banner/consent";


const consent = getConsent();


consent.subscribe((data) => {
  if (data.advertising) {
    import("./facebook-pixel").then((m) => m.init());
  }
});
Read consent states at any time
import { getConsent } from "@probo/cookie-banner/consent";


const consent = getConsent();


if (consent.ready && consent.has("functional")) {
  enableLiveChat();
}

IIFE usage

Section entitled ‘IIFE usage’

When using the script tag, access the sameAPIthrough window.Probo.consent:

<script
  src="https://unpkg.com/@probo/cookie-banner/dist/cookie-banner.iife.js"
  data-banner-id="YOUR_BANNER_ID"
  data-base-url="https://your-probo-instance.com/api/cookie-banner/v1/"
></script>


<script>
  var consent = window.Probo.consent;


  consent.onReady(function (data) {
    if (data.analytics) {
      // initialize analytics
    }
  });
</script>
“Consent Manager vs. DOM Events”

The SDK also emits DOM events such as probo-consent and probo-ready. Both approaches give you access to consent state - use what fits your architecture:

Approach Best for
Consent Manager (getConsent()) Application code, React hooks, module imports, wherever you need to subscribe / unsubscribe or check the status at any time.
DOM events (probo-consent, etc.) Scripts in line, delegating events, cases where you are already listening to the document or a parent element.

Consent Manager is the recommended approach for grouped applications – it’s easier to compose, it doesn’t require a DOM item reference, and subscribeAPIse deals with both the initial state and updates in a single call.

Ultima actualizare: