Strumento gratuito

Generatore di banner cookie

Configura il tuo banner e ottieni uno snippet HTML/CSS/JS autonomo (senza dipendenze) da incollare nel tuo sito, qualunque sia il framework.

Modello indicativo, non è una consulenza legale. Adatta il testo e le categorie a ciò che il tuo sito fa realmente (spunta una categoria solo se depositi davvero quel tipo di cookie) prima della pubblicazione.

Il banner da solo non basta.Memorizza la scelta dell'utente (accettato/rifiutato, con scadenza dopo 6 mesi) e attiva un evento zkyCookieConsentChanged: spetta a te collegare i tuoi script di terze parti (Google Analytics, pixel pubblicitari...) affinché si carichino solo dopo il consenso. Senza questo collegamento il banner compare ma non blocca nulla da solo.

Nome del sito

Link all'informativa sulla privacy

Colore d'accento

Categoria «Misurazione del pubblico» Categoria «Pubblicità»

Snippet generato

<!-- Bandeau cookies généré sur zkysolutions.com/generateur-bandeau-cookies -->
<!-- Vanilla JS, aucune dépendance. Adapter le texte/les catégories à votre cas réel avant mise en ligne. -->
<style>
.zky-cc { position: fixed; inset: auto 0 0 0; z-index: 9999; background: #fff; border-top: 1px solid #e2e8f0; padding: 16px; box-shadow: 0 -4px 24px rgba(0,0,0,.08); font: 14px/1.5 -apple-system,Segoe UI,Roboto,sans-serif; color: #1e293b; }
.zky-cc-inner { max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.zky-cc a { color: #0C6E84; text-decoration: underline; }
.zky-cc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.zky-cc-btn { border: 1px solid #cbd5e1; background: #fff; color: #1e293b; padding: 8px 16px; border-radius: 6px; font-weight: 600; cursor: pointer; font-size: 14px; }
.zky-cc-btn-primary { background: #0C6E84; border-color: #0C6E84; color: #fff; }
.zky-cc-settings { display: none; }
.zky-cc-row { display: flex; justify-content: space-between; gap: 16px; border: 1px solid #e2e8f0; border-radius: 6px; padding: 12px; margin-bottom: 8px; }
.zky-cc-row-title { font-weight: 600; margin: 0; }
.zky-cc-row-desc { margin: 4px 0 0; color: #64748b; }
</style>

<div id="zky-cc-banner" class="zky-cc" role="dialog" aria-label="Gestione dei cookie" style="display:none">
  <div class="zky-cc-inner">
    <div class="zky-cc-main">
      <p style="margin:0">
        Ce site utilizza cookie strettamente necessari al suo funzionamento.
        <a href="/confidentialite">Scopri di più</a>.
      </p>
      <div class="zky-cc-settings"><p style="margin:0;color:#64748b">Nessuna categoria opzionale configurata : solo cookie strettamente necessari.</p></div>
    </div>
    <div class="zky-cc-actions">
      <button type="button" class="zky-cc-btn" data-zky-cc-action="settings">Personalizza</button>
      <!-- "Refuser" et "Accepter" ont volontairement le même style : la CNIL
      considère qu'un bouton "accepter" visuellement plus mis en avant que
      "refuser" est un dark pattern (consentement pas vraiment libre). -->
      <button type="button" class="zky-cc-btn zky-cc-btn-primary" data-zky-cc-action="refuse">Rifiuta tutto</button>
      <button type="button" class="zky-cc-btn zky-cc-btn-primary" data-zky-cc-action="accept">Accetta tutto</button>
      <button type="button" class="zky-cc-btn zky-cc-btn-primary" data-zky-cc-action="save" style="display:none">Salva</button>
    </div>
  </div>
</div>

<script>
(function () {
  var STORAGE_KEY = 'zky_cookie_consent';
  // Recommandation CNIL : le consentement n'est pas éternel, ~6 mois avant de
  // redemander (au-delà, considérer que la situation/l'utilisateur a pu changer).
  var CONSENT_MAX_AGE_MS = 180 * 24 * 60 * 60 * 1000;
  var banner = document.getElementById('zky-cc-banner');
  var settingsBox = banner.querySelector('.zky-cc-settings');
  var saveBtn = banner.querySelector('[data-zky-cc-action="save"]');
  var checkboxes = banner.querySelectorAll('[data-zky-cc-category]');

  function getConsent() {
    try {
      var stored = JSON.parse(localStorage.getItem(STORAGE_KEY));
      if (!stored || !stored.consentedAt) return null;
      if (Date.now() - stored.consentedAt > CONSENT_MAX_AGE_MS) return null;
      return stored;
    } catch (e) { return null; }
  }

  function setConsent(consent) {
    consent.consentedAt = Date.now();
    localStorage.setItem(STORAGE_KEY, JSON.stringify(consent));
    banner.style.display = 'none';
    document.dispatchEvent(new CustomEvent('zkyCookieConsentChanged', { detail: consent }));
  }

  function buildConsent(allValue) {
    var consent = { necessary: true };
    checkboxes.forEach(function (cb) {
      consent[cb.getAttribute('data-zky-cc-category')] = allValue !== undefined ? allValue : cb.checked;
    });
    return consent;
  }

  banner.addEventListener('click', function (e) {
    var action = e.target.getAttribute('data-zky-cc-action');
    if (!action) return;
    if (action === 'accept') setConsent(buildConsent(true));
    else if (action === 'refuse') setConsent(buildConsent(false));
    else if (action === 'settings') {
      settingsBox.style.display = 'block';
      saveBtn.style.display = 'inline-block';
    } else if (action === 'save') setConsent(buildConsent());
  });

  window.zkyOpenCookieSettings = function () {
    banner.style.display = 'block';
    settingsBox.style.display = 'block';
    saveBtn.style.display = 'inline-block';
  };

  if (!getConsent()) banner.style.display = 'block';
})();
</script>