JavaScript SDK

@probo/cookie-banner SDK este o bibliotecă JavaScript ușoară, fără dependență, construită pe Componente Web. Renderă UI-ul de consimțământ, gestionează starea de consimțământ al vizitatorului, comunică cu platformaAPIși activează resurse terțe pe baza consimțământului.

Există trei modalități de a utiliza SDK-ul, în funcție de nevoile dvs.:

Script Tag (No Bundler)

Adăugați o singură etichetă <script> la HTML – nu sunt necesare instrumente de construire:

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

Acest lucru generează automat un dialog de consimțământ complet stilat. Plasați <probo-settings-link> în antet sau footer, astfel încât vizitatorii să poată redeschide preferințele — a se vedea Settings link.

Attribute	Required	Description
data-banner-id	Yes	ID-ul bannerului dvs. de pe consola platformă
data-base-url	Yes	Bannerul cookie al platformeiAPIbază URL
data-position	No	Poziția cardului: bottom-left (default), bottom-right, bottom-center, top-left, top-right, sau top-center
data-lang	No	Forțați o limbă specifică (de exemplu "fr"). Când este omis, SDK-ul detectează automat din pagină sau browser. Language Detection.

Themed Banner (ES Module)

Pentru aplicațiile grupate (React, Vue, Svelte, Next.js etc.), importați banner-ul tematic ca modul ES:

npm install @probo/cookie-banner

Înregistrați componenta și plasați-o în HTML sau șablon:

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	ID-ul bannerului dvs. de pe consola platformă
base-url	Yes	Bannerul cookie al platformeiAPIbază URL
position	No	Poziția cardului: bottom-left (default), bottom-right, bottom-center, top-left, top-right, sau top-center
lang	No	Forțați o limbă specifică (de exemplu "fr"). Când este omis, SDK-ul detectează automat din pagină sau browser. Language Detection.

Deoarece aceasta este o componentă Web, funcționează în orice cadru. În React, JSX o tratează ca pe un element personalizat. În Vue sau Svelte, utilizați-o direct în șablon. React Integration Ghid pentru un pas complet cu un useConsent hook, setarea Next.js și declarațiile TypeScript.

See Theming pentru cum să personalizați culorile, fonturile și stilul.

Pentru acces programatic la starea de consimțământ din orice modul (nu doar DOM), consultați Consent Manager API.

Headless Components (Full Control)

Pentru un control complet asupra UI-ului de consimțământ, utilizați componentele fără cap. Acestea sunt blocuri de construcție a componentelor Web ne-stilizate pe care le compuneți și le stilizați singuri:

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 să afișeze butoanele potrivite și să copieze pentru prezentarea activă (OPT_IN, OPT_OUT, sau NOTICE).

Component Reference

Component	Description
<probo-cookie-banner-root>	Elementul rădăcină. necesită banner-id și base-url. Atributul opțional lang pentru a forța o limbă. Gestionează ciclul de viață și starea clientului.
<probo-banner>	Vizibilitatea urmează layout.initial_state (de exemplu, închis sub CCPA – a se vedea Settings link).
<probo-accept-button>	Înfășoară un buton care înregistrează consimțământul ___ZBT_I18N_RUNTIME_BLOCK_216__.
<probo-reject-button>	Înfășoară un buton care înregistrează consimțământul REJECT_ALL (opt-out / Nu vinde).
<probo-customize-button>	Înfășoară un buton care deschide panoul de preferințe.
<probo-acknowledge-button>	Înfășoară un buton care înregistrează ___ZBT_I18N_RUNTIME_BLOCK_221__ pentru NOTICE Prezentări (dezafectare informativă). Nu reutilizați accept-toate pentru acest lucru.
<probo-preference-panel>	Container for per-category consent toggles.
<probo-privacy-choices>	Opțiuni de confidențialitate CCPA suprafață (opt-out vânzare / partajare + declarație de drepturi PI sensibile). Se afișează atunci când starea este privacy_choices.
<probo-category-list>	Renderă un <template> o dată pe categorie de cookie. Completează data-slot="name" și data-slot="description".
<probo-category-toggle>	Conectează caseta de verificare din interiorul acesteia la starea de consimțământ a categoriei.
<probo-cookie-list>	Renderă un <template> o dată pe cookie în categorie. Completează data-slot="name", data-slot="type" și data-slot="duration".
<probo-save-button>	Înfășoară un buton care salvează proiectul de preferințe curent.
<probo-settings-link>	Required controlul de redeschidere a header/footer. Obiectivul de clic provine de la layout.reopen_state. A se vedea Settings link.

Layout API

Începând cu 0.12,APIreturnează o structură layout pe configurarea bannerului. Integratorii fără cap ar trebui să o citească în loc să se ramifice pe regulation sau 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?
});