Bannière Cookies Core

🍪 Accélérez vos projets avec du code libre..

  • ✓Installation ultra simple, 0 Dépendances
  • ✓Solution française 100% gratuite
  • ✓SDK : Cookie Core < 18Ko
JS vanilla NodeJs
script.js
// Installation : npm install @synapxlab/cookie-core import '@synapxlab/cookie-core'; document.addEventListener('DOMContentLoaded', () => { if (window.CookieConsent) {    const prefs = window.CookieConsent.getPreferences();    if(prefs) votre_js_a_vous(prefs); } document.addEventListener('cookieConsentChanged', (event) => {        // votre_js_a_vous(event.detail.preferences); });

Cookies Core est sans fonctionnalités additionnelles.

Elle est une base : JS / SCSS.
Version complète : Cookie consent – Fonctionnalités intégrées

Logging des consentements :

Le logging des consentements n'est pas strictement obligatoire mais fortement recommandé
pour plusieurs raisons :

Utilisation

Le script injecte la bannière au chargement. Les catégories sont cachées par défaut et s’affichent uniquement quand l’utilisateur clique sur « Les préférences ». Les choix sont stockés dans localStorage sous la clé politecookiebanner.

Ajouter dans le footer de votre page html id="openpolitecookie"

<a href="#"  id="openpolitecookie">[Politique en matière de cookies]</a>

Exemple : ne charger Google Analytics que si “Statistiques” est consenti

const startcall=(prefs)=>{
    console.log('Préférences reçues:', prefs);
    const w = window, d = document, GTAG_ID = 'G-VOTRE-ID';
    if (prefs.statistics && !w.__gtagLoaded) {
      // Appel au servive externe
    }
    document.addEventListener('DOMContentLoaded', () => {
      const cc = window.CookieConsent;
      const prefs = cc?.getPreferences?.();
      if (prefs) startcall(prefs);
      document.addEventListener('cookieConsentChanged', (e) => {
        // on relance avec les nouvelles préférences
        startcall(e.detail?.preferences || {});
      });
    });

Implémentation technique

NPM Package : @synapxlab/cookie-core - Disponible sur npmjs.com
Code source disponible sur GitHub.
Made in France :
Elle est conçue pour être la plus légère possible (18Ko) sans fonctionnalités additionnelles.
Version complette : Cookie consent
📦 Via npm / yarn / pnpm 
npm i @synapxlab/cookie-core
# ou
yarn add @synapxlab/cookie-core
# ou
pnpm add @synapxlab/cookie-core

Dans votre bundle (ex: src/js/bundle.js) :

import '@synapxlab/cookie-core';   // charge la bannière  
      // (facultatif) window.CookieConsent?.open();
React (Vite / CRA) 
// src/main.jsx
        import '@synapxlab/cookie-core';
        import React from 'react';
        import ReactDOM from 'react-dom/client';
        import App from './App.jsx';
      ReactDOM.createRoot(document.getElementById('root')).render(<App />);
Vue 3 (Vite) 
// src/main.js
        import '@synapxlab/cookie-core';
        import { createApp } from 'vue';
        import App from './App.vue';
      createApp(App).mount('#app');
Angular (CLI) 
// src/main.ts
        import '@synapxlab/cookie-core';
        import { bootstrapApplication } from '@angular/platform-browser';
        import { AppComponent } from './app/app.component';
      bootstrapApplication(AppComponent);
Svelte / SvelteKit 
// Svelte : src/main.js
        import '@synapxlab/cookie-core';
        import App from './App.svelte';
        new App({ target: document.getElementById('app') });

        // SvelteKit (client)
        import { onMount } from 'svelte';
      onMount(() => import('@lockness/cookie-core'));
Next.js (App Router) 
// app/layout.tsx
        'use client';
        import { useEffect } from 'react';
        export default function RootLayout({ children }) {
          useEffect(() => { import('@synapxlab/cookie-core'); }, []);
          return (<html><body>{children}</body></html>);
        }
Nuxt 3 

          import '@synapxlab/cookie-core';
        export default defineNuxtPlugin(() => {});
Symfony (Webpack Encore) 
// assets/app.js
          import '@synapxlab/cookie-core';         // avant vos intégrations tierces
          import './styles/app.scss';
        // templates/base.html.twig

Accessibilité

  • Dialog ARIA : role="dialog", aria-live="polite", aria-modal="true"
  • Bouton de fermeture avec aria-label
  • Navigation clavier (tab) et focus visibles

Compatibilité navigateurs

Chrome, Firefox, Safari, Edge (versions récentes). iOS/Android WebView modernes.
Pas de dépendance à jQuery.

Développement

git clone https://github.com/synapxLab/cookie-core.git
    cd cookie-core
    npm install
    npm run dev    
  npm run build   # build production minifié

Sortie par défaut : /assets/js/cookie.js (bannière) et /assets/js/bundle.js (site).

Licence

MIT — utilisez, modifiez, redistribuez librement. Merci de conserver la mention de licence.

Code W3C est conforme : WCAG 2.1 AA

Code source disponible sur GitHub. Contributions et suggestions bienvenues !

Limites & responsabilité

@synapxlab/cookie-core.

Cookie Core est la version light de gestion du consentement.
Elle est conçue pour être la plus légère possible (18Ko) sans fonctionnalités additionnelles.

Vous restez responsable de votre conformité.