docs · pour les développeurs

SDK pour frameworks

Des paquets légers qui placent la balise dans le head de chaque page comme votre framework l’attend, plus quelques composants et helpers. Le runtime fait le vrai travail ; les SDK le placent correctement.

Le jeu d’options commun

Chaque SDK accepte les mêmes options : site (obligatoire, votre clé publique), env (production ou preview), api, runtimeUrl, lang, declaration et auto (par défaut true ; mettez-le à false pour placer la balise vous-même avec le composant du paquet).

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" garde les valeurs par défaut du consentement avant l’hydratation et tout gestionnaire de balises. Le paquet @cookiecrumbs/next l’enveloppe et ajoute des helpers serveur et les composants partagés.

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

L’intégration insère la balise comme premier élément du head de chaque page : au build pour les pages prérendues, à chaque requête en SSR. Avec auto: false, placez <CookieCrumbs /> de @cookiecrumbs/astro/CookieCrumbs.astro vous-même dans votre layout. Un middleware alimente le lecteur de cookie côté serveur.

Nuxt

npm i @cookiecrumbs/nuxt

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

Le module place le script en tête de app.head.script avec tagPriority: 'critical', avant le chunk d’entrée de Nuxt. Il importe automatiquement useConsent(), un composable exposant status, consent, regime, country, lang, version, consentId, isGranted, accept, reject, set, open, close, withdraw, setLang, plus trois composants.

SvelteKit

npm i @cookiecrumbs/sveltekit

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

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

Le hook insère la balise comme premier élément du head de chaque réponse HTML et renseigne event.locals.consent. Composez avec d’autres hooks via sequence(). Placez %cookiecrumbs.head% dans src/app.html pour choisir la position exacte vous-même. Le paquet fournit les composants Svelte ConsentGate, CookieDeclaration et ManageCookiesLink et des stores de consentement.

React (simple)

Pour Vite, CRA et similaires : ajoutez la balise dans index.html avant votre bundle, puis utilisez l’API runtime depuis n’importe où dans l’app. @cookiecrumbs/react fournit les composants partagés pour les arbres React.

Les composants partagés

• ConsentGate : ne rend ses enfants que lorsqu’une catégorie est accordée ; affiche sinon votre fallback.
• CookieDeclaration : monte la liste publique des cookies en ligne sur n’importe quelle page.
• ManageCookiesLink : le contrôle de réouverture sous forme de lien normal pour votre pied de page.