🍪 Cookie Consent

GDPR/CNIL compliant cookie consent banner, open source and free.

European open-source alternative, with no dependency on Big Tech.

🎮 View Live Demo 📚 Complete French Documentation 💼 Multi-client Solution: Ideal for web agencies and freelance developers.

✨ Features

Core Features

• ✅ Native GDPR Compliance - Articles 6, 7, 13 respected
• ✅ Automatic Script Blocking - Detects and blocks third-party scripts
• ✅ 16 Pre-configured Services - GA, Facebook Pixel, Hotjar, Google v2 ...
• ✅ Consent Registry - Legal proof (Art. 7.1)
• ✅ 7 Languages - FR, EN, ES, DE, IT, NL, PT
• ✅ Zero Dependencies - Vanilla JS ≈ 66 KB minified (~21 KB gzipped)
• ✅ Customizable Themes - CSS variables
• ✅ Made in France 🇫🇷

🆕 New in v2.5.0

• ✅ Google Consent Mode v2 - Native integration with Google Analytics & Ads
  • Automatic consent signals to Google
  • Ping mode for aggregated data collection
  • Required for Google Ads in EU (since March 2024)
  • Zero configuration needed - works out of the box
• ✅ Ultra-discrete badge - Small "📊 GCM v2" indicator in banner
• ✅ Robust error handling - Graceful degradation if GCM fails
• ✅ SSR compatible - Auto-detects server-side rendering

🚀 Quick Installation Without Logger

Via npm

bash

npm install @synapxlab/cookie-consent

javascript

import '@synapxlab/cookie-consent';

window.CookieConsent.init({
  statistics: {
    google_analytics_key: 'G-XXXXXXXXX'
  }
});

🚀 Quick Installation With Logger

Via npm

bash

npm install @synapxlab/cookie-consent

With Self-hosted Logger - You Manage Your Logs

javascript

import '@synapxlab/cookie-consent';

window.CookieConsent.init({
  logger: {
    enabled: true,
    endpoint: '/api/logger.php',
    anonymousId: true,
    headers: {
      'Authorization': 'csrf-token' // optional
    }
  },
  statistics: {
    google_analytics_key: 'G-XXXXXXXXX'
  },
  marketing: {
    facebook_pixel: {
      key: 'YOUR-PIXEL-ID',
      track: 'PageView'
    }
  }
});

🎯 Google Consent Mode v2

Cookie Consent includes native support for Google Consent Mode v2 (required for Google Ads in Europe since March 2024).

✨ Features

• Automatic integration - Works out of the box, no config needed
• Consent signals - Automatically updates Google tags based on user choice
• Ping mode - Collects aggregated anonymous data even without consent
• GDPR compliant - Respects user privacy while improving data quality

🚀 Quick Start

Basic usage (automatic):

window.CookieConsent.init({
  statistics: {
    google_analytics_key: 'G-XXXXXXXXX'
  }
  // Google Consent Mode v2 is enabled by default!
});

Advanced configuration:

window.CookieConsent.init({
  google_consent_mode: {
    enabled: true,
    wait_for_update: 500,
    ads_data_redaction: true,
    region: ['US-CA', 'EU']
  },
  statistics: {
    google_analytics_key: 'G-XXXXXXXXX'
  }
});

Disable GCM:

window.CookieConsent.init({
  google_consent_mode: false
});

With Automatic Consent Logging 🔑 Member Area & Multi-site

The code is automatically generated for each registered domain.

🎮 View Live Demo 📚 Complete French Documentation 💼 Multi-client Solution: Ideal for web agencies and freelance developers.

javascript

// Code generated automatically in your member area

Block Third-party Scripts Directly in HTML

If you prefer to include your analytics/marketing scripts directly in your HTML rather than via the JavaScript API, you can automatically block them using the type="text/plain" and data-cookie-category attributes. Scripts are truly blocked until user consent (GDPR compliant).

html

<script type="text/plain" data-cookie-category="CATEGORY" src="SCRIPT_URL"></script>

🛡️ GDPR/CNIL Compliance

✅ Prior consent
✅ Rejection as easy as acceptance
✅ Clear information by purpose
✅ Timestamped proof (logging)
✅ Revocable at any time
✅ 6-month expiration (CNIL recommendation)

📋 Complete Compliance Documentation

🛡️ Via Member Area

Log in to https://synapx.fr/sdk/cookie_consent/ to:

• Manage multiple sites from a single account
• Generate dedicated API keys per client/domain
• Auto-configure JavaScript code for each project
  • Pre-configured services (Analytics, Pixels, Chat...)
  • Exportable complete configuration
  • Centralized consent log management

📖 Documentation

Quick Guides:

• 🚀 Getting Started
• ⚙️ Configuration
• ❓ FAQ

Integrations:

• Vanilla JS
• Google Tag Manager

Each client site has its own isolated and secure configuration.

💰 Pricing: The Banner is Free - Only Logging is Paid

Pricing automatically adjusts based on your monthly volume.
Each consent corresponds to a recorded action (acceptance, rejection, or modification).

🎁 €50 offered upon registration + €50 for each successful referral.
📄 Invoice via ERP/CRM Administralis

Volume/month	0 - 20K	2K - 20K	20K - 200K	+200K
Price (excl. tax)	15€	35€	75€	[Nous contacter]

🎯 Result: Even with constant traffic of 3,000 unique visitors,
Most of your returning visitors have already made their choice and it remains valid for 6 months!

🎨 CSS Customization

The banner uses CSS variables (custom properties). This is the easiest way to adapt colors/contrasts to your brand without touching JS and without recoding the SCSS.

:root {
  --cc-bg: #fff;
  --cc-border: #e5e7eb;
  --cc-accent: #9b6b5a;   /* accent color (Accept button, ON switch) */
  --cc-text: #111827;
  --cc-muted: #6b7280;
  --cc-line: #e5e7eb;
  --cc-surface: #f3f4f6;
}

🌍 Supported Languages

Langue	Code	Statut
🇫🇷 Français	fr	✅
🇬🇧 English	en	✅
🇪🇸 Español	es	✅
🇩🇪 Deutsch	de	✅
🇮🇹 Italiano	it	✅
🇳🇱 Nederlands	nl	✅
🇵🇹 Português	pt	✅

📖 Guide i18n

🔧 API JavaScript

// Ouvrir la bannière
window.CookieConsent.open();

// Réinitialiser
window.CookieConsent.reset();

// Récupérer les préférences
const prefs = window.CookieConsent.getPreferences();

// Vérifier un consentement
const hasStats = window.CookieConsent.hasConsent('statistics');

// Écouter les changements
document.addEventListener('cookieConsentChanged', (event) => {
  console.log(event.detail.preferences);
});

🤝 Contribuer

Les contributions sont les bienvenues !

• 🐛 Signaler un bug
• 💡 Proposer une fonctionnalité
• 🌍 Ajouter une traduction

📝 License

MIT © SynapxLab

@synapxlab/cookie-consent manages the collection, recording, and proof of consent for trackers (cookies, localStorage, etc.), via an optional logging system. The website operator integrating this module remains responsible for the processing of collected data, including consent logs. This component does not constitute legal advice and does not replace a complete GDPR compliance solution (processing register, DPIA, DPA, rights management, etc.). Always validate your configuration with your DPO or legal counsel.

Note on exempted analytics: Cookie Consent manages consent for trackers that require it. For audience measurement tools exempted according to CNIL criteria, refer to CNIL documentation for their compliant deployment.

🔗 Links

• 🌐 Official Website
• 📚 Documentation fr
• 💻 GitHub
• 📦 npm

CDN Installation

html

<script src="https://cdn.jsdelivr.net/npm/@synapxlab/cookie-consent/dist/cookie.min.js"></script>

📧 Support

• Email: contact@synapx.fr

---

Digital independence is no longer an option.