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.
- ✅ Native GDPR Compliance — Articles 6, 7, 13 respected
- ✅ Automatic Script Blocking — Detects and blocks third-party scripts before consent
- ✅ 16 Pre-configured Services — GA, GTM, Matomo, Mixpanel, Amplitude, Plausible, Hotjar, Clarity, Facebook Pixel, TikTok Pixel, LinkedIn, AdSense, Intercom, Crisp, HubSpot, Segment
- ✅ Google Consent Mode v2 — Native integration (required for Google Ads in EU since March 2024)
- ✅ Consent Registry — Legal proof (Art. 7.1)
- ✅ 7 Languages — FR, EN, ES, DE, IT, NL, PT
- ✅ Zero Dependencies — Vanilla JS ≈ 108 KB minified (~30 KB gzipped)
- ✅ Customizable Themes — CSS variables
- ✅ Made in France 🇫🇷
- ✅ Google Consent Mode v2 — Native integration with Google Analytics & Ads
- Default signals set to
deniedbefore user choice - Automatic update of signals on consent
- 4-category mapping → 7 GCM signals
- Zero configuration needed — works out of the box
- Default signals set to
- ✅ Robust error handling — Graceful degradation if GCM fails
- ✅ SSR compatible — Auto-detects server-side rendering
- ✅ Tightened npm package — Only
dist/cookie.jsis shipped (no demo bundle)
npm install @synapxlab/cookie-consentimport '@synapxlab/cookie-consent';
window.CookieConsent.init({
statistics: {
google_analytics_key: 'G-XXXXXXXXX'
}
});npm install @synapxlab/cookie-consentYou manage your own consent logs:
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'
}
},
functional: {
intercom_app_id: 'xxx',
crisp_website_id: 'xxx'
}
});
⚠️ Never hardcode real production API keys/tokens in client-side code — they end up in the JS bundle delivered to every visitor. Use environment-injected variables at build time, or a server-side proxy.
Native support for Google Consent Mode v2 — required for Google Ads in Europe since March 2024.
- Automatic integration — works out of the box, no config needed
- Default = denied — signals are emitted as
deniedbefore any user choice (CNIL-compliant) - 4 categories → 7 GCM signals mapping:
marketing→ad_storage,ad_user_data,ad_personalizationstatistics→analytics_storagefunctional→functionality_storage,personalization_storagenecessary→security_storage(alwaysgranted)
- Ping mode — collects aggregated anonymous data even without consent
- GDPR compliant — respects user privacy while improving data quality
window.CookieConsent.init({
statistics: {
google_analytics_key: 'G-XXXXXXXXX'
}
// Google Consent Mode v2 is enabled by default
});window.CookieConsent.init({
google_consent_mode: {
enabled: true,
wait_for_update: 500, // ms before timeout
ads_data_redaction: true, // redact ad data if consent denied
url_passthrough: false, // pass URL params between domains
region: ['US-CA', 'EU'] // regional targeting
},
statistics: {
google_analytics_key: 'G-XXXXXXXXX'
}
});window.CookieConsent.init({
google_consent_mode: { enabled: false }
});document.addEventListener('googleConsentUpdated', (event) => {
console.log(event.detail.consent); // 7 GCM signals
console.log(event.detail.preferences); // user choice
});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 type="text/plain" + data-cookie-category. Scripts are truly blocked until user consent (GDPR compliant).
<!-- Blocked until "statistics" consent is given -->
<script type="text/plain" data-cookie-category="statistics"
src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXX"></script>
<!-- Blocked until "marketing" consent is given -->
<script type="text/plain" data-cookie-category="marketing">
// Facebook Pixel snippet here
</script>Valid categories: statistics, marketing, functional.
✅ Prior consent (default = denied)
✅ Rejection as easy as acceptance (both buttons same level)
✅ Clear information by purpose (functional / statistics / marketing)
✅ Timestamped proof via consent log (UUID + timestamp)
✅ Revocable at any time (floating cookie button + .reset())
✅ 6-month expiration (CNIL recommendation, configurable up to 13 months)
📋 CNIL Compliance Documentation
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
Quick Guides:
Integrations:
🇫🇷 Documentation française complète
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 – 2K | 2K – 20K | 20K – 200K | +200K |
|---|---|---|---|---|
| Price (excl. tax) | 15€ | 35€ | 75€ | Contact us |
🎯 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.
The banner uses CSS variables (custom properties). This is the easiest way to adapt colors/contrasts to your brand without touching JS and without recompiling 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;
}| Language | Code | Status |
|---|---|---|
| 🇫🇷 Français | fr |
✅ |
| 🇬🇧 English | en |
✅ |
| 🇪🇸 Español | es |
✅ |
| 🇩🇪 Deutsch | de |
✅ |
| 🇮🇹 Italiano | it |
✅ |
| 🇳🇱 Nederlands | nl |
✅ |
| 🇵🇹 Português | pt |
✅ |
// Open the banner (with preferences panel)
window.CookieConsent.open(true);
// Reset all preferences and reopen
window.CookieConsent.reset();
// Retrieve current preferences
const prefs = window.CookieConsent.getPreferences();
// Check a single category
const hasStats = window.CookieConsent.hasConsent('statistics');
// → true / false
// Listen to consent changes
document.addEventListener('cookieConsentChanged', (event) => {
console.log(event.detail.preferences);
console.log(event.detail.consent_id);
console.log(event.detail.logged);
});
// Listen to Google Consent Mode updates
document.addEventListener('googleConsentUpdated', (event) => {
console.log(event.detail.consent); // GCM signals
});Contributions welcome!
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.
<script src="https://cdn.jsdelivr.net/npm/@synapxlab/cookie-consent/dist/cookie.js"></script>- Email: contact@synapx.fr
Digital independence is no longer an option.