Ferramenta gratuita

Gerador de banner de cookies

Configure o seu banner e obtenha um excerto HTML/CSS/JS autónomo (sem dependências) para colar no seu site, qualquer que seja a sua framework.

Modelo indicativo, não é aconselhamento jurídico. Adapte o texto e as categorias ao que o seu site faz realmente (assinale uma categoria apenas se depositar mesmo esse tipo de cookie) antes de publicar.

O banner por si só não basta.Armazena a escolha do utilizador (aceite/recusado, com expiração ao fim de 6 meses) e desencadeia um evento zkyCookieConsentChanged: cabe-lhe ligar os seus scripts de terceiros (Google Analytics, píxeis publicitários...) para que só carreguem após o consentimento. Sem essa ligação, o banner é apresentado mas não bloqueia nada por si só.

Nome do site

Ligação para a política de privacidade

Cor de destaque

Categoria «Medição de audiência» Categoria «Publicidade»

Excerto gerado

<!-- 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="Gestão de cookies" style="display:none">
  <div class="zky-cc-inner">
    <div class="zky-cc-main">
      <p style="margin:0">
        Ce site utiliza cookies estritamente necessários ao seu funcionamento.
        <a href="/confidentialite">Saber mais</a>.
      </p>
      <div class="zky-cc-settings"><p style="margin:0;color:#64748b">Nenhuma categoria opcional configurada : apenas cookies estritamente necessários.</p></div>
    </div>
    <div class="zky-cc-actions">
      <button type="button" class="zky-cc-btn" data-zky-cc-action="settings">Personalizar</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">Rejeitar tudo</button>
      <button type="button" class="zky-cc-btn zky-cc-btn-primary" data-zky-cc-action="accept">Aceitar tudo</button>
      <button type="button" class="zky-cc-btn zky-cc-btn-primary" data-zky-cc-action="save" style="display:none">Guardar</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>