JavaScript SDK

@probo/cookie-banner SDK is a lightweight, non-dependent JavaScript library built on Web Components. They render the consent UI, manage the visitor’s consent status, communicate with the API platform, and enable third-party resources based on consent.

There are three ways to use the SDK, depending on your needs:

Script Tag (No Bundler)

Add a single tag <script> to HTML – no building tools are required:

<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/"
  data-position="bottom-left"
></script>

<!-- Required: reopen control in the header or footer -->
<probo-settings-link>Cookie settings</probo-settings-link>

This automatically generates a fully stylized consent dialog. Place <probo-settings-link> in the header or footer so that visitors can reopen their preferences — see Settings link.

Attribute	Required	Description
data-banner-id	Yes	Your banner ID on the platform console
data-base-url	Yes	Cookie banner of the platform URL base
data-position	No	Card position: bottom-left (default), bottom-right, bottom-center, top-left, top-right, or top-center
data-lang	No	Forcing a specific language (e.g. "fr"). When it is omitted, the SDK automatically detects from the page or browser. Language Detection.

Themed Banner (ES Module)

For grouped applications (React, Vue, Svelte, Next.js, etc.), import the thematic banner as ES mode:

npm install @probo/cookie-banner

Register the component and place it in HTML or template:

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

registerCookieBanner();

<probo-cookie-banner
  banner-id="YOUR_BANNER_ID"
  base-url="https://your-probo-instance.com/api/cookie-banner/v1/"
  position="bottom-left"
></probo-cookie-banner>

<!-- Required: reopen control in the header or footer -->
<probo-settings-link>Cookie settings</probo-settings-link>

Attribute	Required	Description
banner-id	Yes	Your banner ID on the platform console
base-url	Yes	Cookie banner of the platform URL base
position	No	Card position: bottom-left (default), bottom-right, bottom-center, top-left, top-right, or top-center
lang	No	Forcing a specific language (e.g. "fr"). When it is omitted, the SDK automatically detects from the page or browser. Language Detection.

Because this is a Web component, it works in any framework. In React, JSX treats it as a custom item. In Vue or Svelte, use it directly in the template. React Integration A complete step guide with a useConsent hook, Next.js setting and TypeScript statements.

See Theming for how to customize colors, fonts and style.

For programmatic access to consent status from any module (not just DOM), see Consent Manager API.

Headless Components (Full Control)

For full control over your consent UI, use the headless components.These are building blocks of unstylized Web components that you compose and stylize yourself:

import { registerHeadlessComponents } from "@probo/cookie-banner/headless";

registerHeadlessComponents();

Then build your own layout:

<probo-cookie-banner-root banner-id="YOUR_BANNER_ID" base-url="BASE_URL">
  <probo-banner>
    <div class="my-banner">
      <p data-text="banner_description">We use cookies to improve your experience.</p>
      <!-- Opt-in / opt-out primary actions -->
      <probo-accept-button>
        <button>Accept all</button>
      </probo-accept-button>
      <probo-reject-button>
        <button>Reject all</button>
      </probo-reject-button>
      <probo-customize-button>
        <button>Customize</button>
      </probo-customize-button>
      <!-- Notice presentation (APPI, Mexico, unregulated): single dismiss -->
      <probo-acknowledge-button>
        <button>Got it</button>
      </probo-acknowledge-button>
    </div>
  </probo-banner>

  <probo-preference-panel>
    <div class="my-preferences">
      <probo-category-list>
        <template>
          <div class="category">
            <span data-slot="name"></span>
            <span data-slot="description"></span>
            <probo-category-toggle>
              <input type="checkbox" />
            </probo-category-toggle>
          </div>
          <probo-cookie-list>
            <template>
              <div class="cookie">
                <span data-slot="name"></span>
                <span data-slot="type"></span>
                <span data-slot="duration"></span>
              </div>
            </template>
          </probo-cookie-list>
        </template>
      </probo-category-list>
      <probo-save-button>
        <button>Save preferences</button>
      </probo-save-button>
    </div>
  </probo-preference-panel>

  <!-- CCPA only: shown when state is privacy_choices -->
  <probo-privacy-choices>
    <div class="my-privacy-choices">
      <probo-reject-button>
        <button>Do Not Sell or Share My Personal Information</button>
      </probo-reject-button>
    </div>
  </probo-privacy-choices>
</probo-cookie-banner-root>

<!-- Required outside the root (header or footer) -->
<probo-settings-link>Cookie settings</probo-settings-link>

Use resolveLayout / resolveBannerText display the appropriate buttons and copy for active presentation (OPT_IN, OPT_OUT, or NOTICE).

Component Reference

Component	Description
<probo-cookie-banner-root>	The root element. requires banner-id and base-url. The optional attribute lang to force a language. Manages the client’s life cycle and status.
<probo-banner>	Visibility follows layout.initial_state (for example, closed under CCPA – see Settings link).
<probo-accept-button>	Wrap a button that records the consent ___ZBT_I18N_RUNTIME_BLOCK_216__.
<probo-reject-button>	Wrap a button that records consent REJECT_ALL (opt-out / Do not sell).
<probo-customize-button>	Wrap a button that opens the Preferences panel.
<probo-acknowledge-button>	Wrap a button that records ___ZBT_I18N_RUNTIME_BLOCK_221__ for NOTICE Presentations (informative deactivation). Do not reuse all-accept for this.
<probo-preference-panel>	Container for per-category consent toggles.
<probo-privacy-choices>	Surface CCPA privacy options (opt-out sale/sharing + declaration of sensitive PI rights). It is displayed when the state is privacy_choices.
<probo-category-list>	Render a <template> once per cookie category. Complete data-slot="name" and data-slot="description".
<probo-category-toggle>	Connects the checkbox inside it to the category consent state.
<probo-cookie-list>	Make a <template> once per cookie in category. Complete data-slot="name", data-slot="type" and data-slot="duration".
<probo-save-button>	Wrap a button that saves the current project preferences.
<probo-settings-link>	Required the header/footer re-opening control. The click target comes from layout.reopen_state. See Settings link.

Layout API

Starting with 0.12,APIreturns a structure layout on the banner configuration. Headless integrators should read it instead of branching on regulation or consent_mode:

import {
  resolveLayout,
  resolveBannerText,
} from "@probo/cookie-banner"; // or "@probo/cookie-banner/headless"

document.addEventListener("probo-ready", (e) => {
  const { config } = e.detail;
  const layout = resolveLayout(config);
  // layout.presentation: "OPT_IN" | "OPT_OUT" | "NOTICE"
  // layout.initial_state / layout.reopen_state: "banner" | "panel" | "privacy_choices" | "hidden"
  // layout.buttons: which actions to show
  // layout.settings_link: "default" | "ccpa_privacy_choices"

  const copy = resolveBannerText(config);
  // copy.title, copy.description, copy.primaryButton, copy.secondaryButton?
});