docs · para desarrolladores

SDK para frameworks

Paquetes ligeros que ponen la etiqueta en el head de cada página como espera tu framework, más algunos componentes y helpers. El runtime hace el trabajo real; los SDK lo colocan correctamente.

El conjunto de opciones común

Todos los SDK aceptan las mismas opciones: site (obligatoria, tu clave pública), env (production o preview), api, runtimeUrl, lang, declaration y auto (por defecto true; ponla en false para colocar la etiqueta tú mismo con el componente del paquete).

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" mantiene los valores por defecto del consentimiento por delante de la hidratación y de cualquier gestor de etiquetas. El paquete @cookiecrumbs/next lo envuelve y añade helpers de servidor y los componentes compartidos.

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

La integración inserta la etiqueta como primer elemento del head de cada página: en tiempo de build para páginas prerenderizadas, por petición en SSR. Con auto: false, coloca <CookieCrumbs /> de @cookiecrumbs/astro/CookieCrumbs.astro en tu layout tú mismo. Un middleware alimenta el lector de cookies del lado del servidor.

Nuxt

npm i @cookiecrumbs/nuxt

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

El módulo coloca el script al principio de app.head.script con tagPriority: 'critical', antes del chunk de entrada de Nuxt. Importa automáticamente useConsent(), un composable que expone status, consent, regime, country, lang, version, consentId, isGranted, accept, reject, set, open, close, withdraw, setLang, más tres componentes.

SvelteKit

npm i @cookiecrumbs/sveltekit

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

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

El hook inserta la etiqueta como primer elemento del head de cada respuesta HTML y establece event.locals.consent. Compónlo con otros hooks mediante sequence(). Pon %cookiecrumbs.head% en src/app.html para elegir la posición exacta tú mismo. El paquete incluye los componentes Svelte ConsentGate, CookieDeclaration y ManageCookiesLink y stores de consentimiento.

React (sin framework)

Para Vite, CRA y similares: añade la etiqueta a index.html antes de tu bundle, y luego usa la API del runtime desde cualquier parte de la app. @cookiecrumbs/react proporciona los componentes compartidos para árboles React.

Los componentes compartidos

• ConsentGate: renderiza sus hijos solo cuando una categoría está concedida; muestra tu alternativa en caso contrario.
• CookieDeclaration: monta la lista pública de cookies inline en cualquier página.
• ManageCookiesLink: el control de reapertura como un enlace normal para tu pie de página.