Gerador de banner de cookies

Gere o código HTML, CSS e JavaScript de um banner simples de consentimento de cookies, para copiar e colar no seu site, oferecendo a escolha "Aceitar / Recusar" com o registro da escolha no navegador do visitante. Todo o código é gerado localmente, sem servidor.

Mensagem

Rótulo do botão "Aceitar"

Rótulo do botão "Recusar"

Rótulo do link

URL do link (política de privacidade)

Posição

Cor de fundo

Cor do texto

Cor do botão "Aceitar"

Ce site utilise des cookies pour améliorer votre expérience. En continuant votre navigation, vous acceptez leur utilisation.

Código para copiar e colar

<style>
#byteryo-cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #1f2937;
  color: #f9fafb;
  padding: 1rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: system-ui, sans-serif;
  font-size: 0.9rem;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.2);
}
#byteryo-cookie-banner a { color: inherit; text-decoration: underline; }
#byteryo-cookie-banner .byteryo-cookie-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
#byteryo-cookie-banner button {
  border: none;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-size: 0.85rem;
}
#byteryo-cookie-accept { background: #22c55e; color: #fff; }
#byteryo-cookie-decline { background: transparent; color: inherit; border: 1px solid currentColor !important; }
</style>

<div id="byteryo-cookie-banner" role="dialog" aria-live="polite" aria-label="Consentimento de cookies">
  <p style="margin:0">
    Ce site utilise des cookies pour améliorer votre expérience. En continuant votre navigation, vous acceptez leur utilisation.
    <a href="/confidentialite">En savoir plus</a>
  </p>
  <div class="byteryo-cookie-actions">
    <button id="byteryo-cookie-decline">Refuser</button>
    <button id="byteryo-cookie-accept">Accepter</button>
  </div>
</div>

<script>
(function () {
  var STORAGE_KEY = 'byteryo_cookie_consent';
  var banner = document.getElementById('byteryo-cookie-banner');
  if (!banner) return;
  var stored = localStorage.getItem(STORAGE_KEY);
  if (stored === 'accepted' || stored === 'declined') {
    banner.style.display = 'none';
    return;
  }
  document.getElementById('byteryo-cookie-accept').addEventListener('click', function () {
    localStorage.setItem(STORAGE_KEY, 'accepted');
    banner.style.display = 'none';
    // TODO: activer ici vos scripts soumis au consentement (analytics, pub...)
  });
  document.getElementById('byteryo-cookie-decline').addEventListener('click', function () {
    localStorage.setItem(STORAGE_KEY, 'declined');
    banner.style.display = 'none';
  });
})();
</script>

Como funciona

Personalize a mensagem, os rótulos dos botões e as cores, visualize o resultado e depois copie o bloco completo de HTML/CSS/JS para o seu site: cole-o logo antes da tag de fechamento </body> da sua página. O script guarda a escolha do visitante no armazenamento local do navegador para não exibir o banner de novo depois que ele responder.

Este banner basta para estar em conformidade com o GDPR/LGPD?

Este gerador fornece uma base técnica funcional (exibição, escolha, registro), mas a conformidade real também depende do que você faz concretamente com os cookies: cookies não essenciais (analytics, publicidade) devem permanecer desativados enquanto o usuário não clicar em "Aceitar". Adapte o comentário "TODO" no código JavaScript gerado para ativar seus scripts somente após o consentimento e consulte um profissional do direito se o seu site tratar dados sensíveis.

Posso modificar o código gerado depois de copiá-lo?

Sim, o código é um ponto de partida padrão, sem dependência externa nem framework obrigatório: você pode adaptá-lo livremente à identidade visual do seu site ou integrá-lo a um componente existente.

O código é gerado inteiramente no seu navegador: nenhuma das suas informações é enviada a um servidor externo.