CookieCrumbs
Start free

docs · for developers

Framework SDKs

Thin packages that put the tag in the head of every page the way your framework expects, plus a few components and helpers. The runtime does the real work; the SDKs place it correctly.

The shared option set

Every SDK takes the same options: site (required, your public key), env (production or preview), api, runtimeUrl, lang, declaration, and auto (default true; set it to false to place the tag yourself with the package's component).

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" keeps the consent defaults ahead of hydration and any tag manager. The @cookiecrumbs/next package wraps this and adds server helpers and the shared components.

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

The integration inserts the tag as the first element of every page's head: at build time for prerendered pages, per request in SSR. With auto: false, place <CookieCrumbs /> from @cookiecrumbs/astro/CookieCrumbs.astro in your layout yourself. A middleware fills the server-side cookie reader.

Nuxt

npm i @cookiecrumbs/nuxt

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

The module unshifts the script into app.head.script with tagPriority: 'critical', ahead of the Nuxt entry chunk. It auto-imports useConsent(), a composable exposing status, consent, regime, country, lang, version, consentId, isGranted, accept, reject, set, open, close, withdraw, setLang, plus three components.

SvelteKit

npm i @cookiecrumbs/sveltekit

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

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

The hook inserts the tag as the first element of every HTML response's head and sets event.locals.consent. Compose with other hooks via sequence(). Put %cookiecrumbs.head% in src/app.html to choose the exact position yourself. The package ships ConsentGate, CookieDeclaration and ManageCookiesLink Svelte components and consent stores.

React (plain)

For Vite, CRA and similar: add the tag to index.html before your bundle, then use the runtime API from anywhere in the app. @cookiecrumbs/react provides the shared components for React trees.

The shared components

  • ConsentGate: renders its children only when a category is granted; shows your fallback otherwise.
  • CookieDeclaration: mounts the public cookie list inline on any page.
  • ManageCookiesLink: the reopen control as a normal link for your footer.