Docs · für Entwickler

Framework-SDKs

Schlanke Pakete, die das Tag so in den Head jeder Seite setzen, wie Ihr Framework es erwartet, plus einige Komponenten und Helfer. Die Runtime macht die eigentliche Arbeit; die SDKs platzieren sie richtig.

Die gemeinsamen Optionen

Jedes SDK nimmt dieselben Optionen: site (Pflicht, Ihr öffentlicher Schlüssel), env (production oder preview), api, runtimeUrl, lang, declaration und auto (Standard true; auf false setzen, um das Tag selbst mit der Komponente des Pakets zu platzieren).

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" hält die Consent-Standardwerte vor der Hydration und jedem Tag-Manager. Das Paket @cookiecrumbs/next verpackt das und ergänzt Server-Helfer und die gemeinsamen Komponenten.

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' })],
});

Die Integration fügt das Tag als erstes Element in den Head jeder Seite ein: zur Build-Zeit für prerendered Seiten, pro Anfrage bei SSR. Mit auto: false platzieren Sie <CookieCrumbs /> aus @cookiecrumbs/astro/CookieCrumbs.astro selbst in Ihrem Layout. Eine Middleware füllt den serverseitigen Cookie-Reader.

Nuxt

npm i @cookiecrumbs/nuxt

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

Das Modul stellt das Skript mit tagPriority: 'critical' an den Anfang von app.head.script, vor den Nuxt-Entry-Chunk. Es importiert automatisch useConsent(), ein Composable mit status, consent, regime, country, lang, version, consentId, isGranted, accept, reject, set, open, close, withdraw, setLang, plus drei Komponenten.

SvelteKit

npm i @cookiecrumbs/sveltekit

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

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

Der Hook fügt das Tag als erstes Element in den Head jeder HTML-Antwort ein und setzt event.locals.consent. Kombinieren Sie ihn über sequence() mit anderen Hooks. Setzen Sie %cookiecrumbs.head% in src/app.html, um die genaue Position selbst zu wählen. Das Paket liefert die Svelte-Komponenten ConsentGate, CookieDeclaration und ManageCookiesLink sowie Consent-Stores.

React (pur)

Für Vite, CRA und Ähnliches: Fügen Sie das Tag vor Ihrem Bundle in index.html ein, dann nutzen Sie die Runtime-API von überall in der App. @cookiecrumbs/react liefert die gemeinsamen Komponenten für React-Bäume.

Die gemeinsamen Komponenten

• ConsentGate: rendert seine Kinder nur, wenn eine Kategorie erlaubt ist; zeigt sonst Ihren Fallback.
• CookieDeclaration: bindet die öffentliche Cookie-Liste inline auf jeder Seite ein.
• ManageCookiesLink: das Wiederöffnen-Element als normaler Link für Ihre Fußzeile.