🍪 @n-ramos/cookie-consent

Gestionnaire de consentement cookies RGPD / CNIL compliant, moderne, léger et totalement configurable.
Alternative open-source à Axeptio / Didomi, sans SaaS ni dépendance externe.

✨ Fonctionnalités

• RGPD / CNIL compliant
• Google Consent Mode v2
• Activation différée des scripts (type="text/plain")
• Nettoyage automatique des cookies
• UI entièrement personnalisable (textes + classes)
• Compatible Laravel 10–12 / Vite / Tailwind
• WebComponent autonome (CDN)
• Aucun cookie déposé par défaut

📦 Installation

npm

pnpm add @n-ramos/cookie-consent

import { initCookieWall } from '@n-ramos/cookie-consent';

CDN (WebComponent)

<script
  defer
  src="https://unpkg.com/@n-ramos/[email protected]/dist/cookie-consent-standalone.js"
></script>
<cookie-consent config='{"categories":[...]}'></cookie-consent>

🚀 Utilisation rapide

const client = initCookieWall({
  storageKey: 'my-consent',
  categories: [
    { key: 'essential', title: 'Essentiels', required: true },
    { key: 'analytics', title: 'Analytics', googleConsentMode: 'analytics_storage' },
  ],
  vendors: { googleConsentMode: { enabled: true } },
});

if (!client.hasStoredConsentForCurrentVersion()) {
  client.open();
}

⚙️ Configuration complète

CookieWallConfig

{
  storageKey?: string;
  categories: ConsentCategoryConfig[];
  vendors?: VendorConfig;
  cookieCleanup?: CookieCleanupConfig;
  ui?: CookieWallUIConfig;
}

Catégories

{
  key: string;
  title: string;
  description?: string;
  required?: boolean;
  googleConsentMode?: string | string[];
}

Vendors

vendors: {
  googleConsentMode?: {
    enabled: boolean;
  }
}

Nettoyage des cookies

cookieCleanup: {
  analytics: ["_ga", "_gid", "_clck"],
  ads: ["IDE", "_fbp"]
}

UI – Textes

ui: {
  texts: {
    title?: string;
    description?: string;
    acceptAllLabel?: string;   // "Tout accepter"
    rejectAllLabel?: string;   // "Tout refuser"
    saveLabel?: string;        // "Valider" — si défini, affiche un bouton qui persiste l'état courant des toggles
    customizeLabel?: string;   // "Personnaliser"
  }
}

UI – Classes

ui: {
  classes: {
    backdrop?: string;
    container?: string;
    title?: string;
    description?: string;
    buttonPrimary?: string;
    buttonSecondary?: string;
    buttonSave?: string;       // classe du bouton "Valider" — fallback sur buttonPrimary si absent
    buttonGhost?: string;
    categoryCard?: string;
    toggleTrackOn?: string;
    toggleTrackOff?: string;
    toggleKnob?: string;
    advancedContainer?: string;
  }
}

🧩 Activation différée des scripts

<script type="text/plain" data-cookie-category="analytics">
  console.log("Activé après consentement");
</script>

🧠 API Client

client.open();
client.close();
client.getState();
client.hasStoredConsent();
client.hasStoredConsentForCurrentVersion();
client.reset();

📚 Documentation détaillée

• docs/CONFIG_REFERENCE.md
• docs/INTEGRATIONS.md

📄 Licence

MIT © Nicolas Ramos