dokumentacja · dla deweloperów

SDK dla frameworków

Lekkie pakiety, które umieszczają tag w head każdej strony tak, jak oczekuje Twój framework, plus kilka komponentów i helperów. Prawdziwą pracę wykonuje runtime; SDK poprawnie go umieszczają.

Wspólny zestaw opcji

Każde SDK przyjmuje te same opcje: site (wymagana, Twój klucz publiczny), env (production lub preview), api, runtimeUrl, lang, declaration i auto (domyślnie true; ustaw false, by samodzielnie umieścić tag komponentem pakietu).

Next.js

// app/layout.tsx
import Script from 'next/script';

<Script src="https://app.cookiecrumbs.eu/runtime/cc.js"
  strategy="beforeInteractive"
  data-cc-site="pk_live_…" data-cc-env="production" />

strategy="beforeInteractive" utrzymuje wartości domyślne zgody przed hydratacją i jakimkolwiek menedżerem tagów. Pakiet @cookiecrumbs/next to opakowuje i dodaje helpery serwerowe oraz wspólne komponenty.

Astro

npm i @cookiecrumbs/astro

// astro.config.mjs
import { defineConfig } from 'astro/config';
import cookiecrumbs from '@cookiecrumbs/astro';

export default defineConfig({
  integrations: [cookiecrumbs({ site: 'pk_live_…', env: 'production' })],
});

Integracja wstawia tag jako pierwszy element head każdej strony: w czasie budowania dla stron prerenderowanych, przy każdym żądaniu w SSR. Z auto: false sam umieszczasz <CookieCrumbs /> z @cookiecrumbs/astro/CookieCrumbs.astro w swoim layoucie. Middleware wypełnia serwerowy czytnik cookie.

Nuxt

npm i @cookiecrumbs/nuxt

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@cookiecrumbs/nuxt'],
  cookiecrumbs: { site: 'pk_live_…', env: 'production' },
});

Moduł wstawia skrypt na początek app.head.script z tagPriority: 'critical', przed chunkiem wejściowym Nuxt. Automatycznie importuje useConsent(), composable udostępniający status, consent, regime, country, lang, version, consentId, isGranted, accept, reject, set, open, close, withdraw, setLang, plus trzy komponenty.

SvelteKit

npm i @cookiecrumbs/sveltekit

// src/hooks.server.ts
import { cookiecrumbsHandle } from '@cookiecrumbs/sveltekit/server';

export const handle = cookiecrumbsHandle({ site: 'pk_live_…', env: 'production' });

Hook wstawia tag jako pierwszy element head każdej odpowiedzi HTML i ustawia event.locals.consent. Połącz z innymi hookami przez sequence(). Umieść %cookiecrumbs.head% w src/app.html, by samodzielnie wybrać dokładną pozycję. Pakiet dostarcza komponenty Svelte ConsentGate, CookieDeclaration i ManageCookiesLink oraz store’y zgody.

React (czysty)

Dla Vite, CRA i podobnych: dodaj tag do index.html przed bundle’em, a potem używaj API runtime z dowolnego miejsca w aplikacji. @cookiecrumbs/react dostarcza wspólne komponenty dla drzew React.

Wspólne komponenty

• ConsentGate: renderuje dzieci tylko wtedy, gdy kategoria jest przyznana; w przeciwnym razie pokazuje Twój fallback.
• CookieDeclaration: montuje publiczną listę cookies inline na dowolnej stronie.
• ManageCookiesLink: element ponownego otwarcia jako zwykły link do stopki.