Esse gerador deixa o site em conformidade com a LGPD sozinho?

O banner oferece ao visitante a opção clara de aceitar ou recusar e guarda essa preferência, o que cobre o requisito da interface de consentimento. Você ainda precisa de uma página de política de privacidade e tem que bloquear de fato os scripts das categorias recusadas.

Como bloqueio o Google Analytics até o visitante consentir?

De duas formas. A mais simples é marcar a caixa Modo de consentimento do Google v2: o script gerado passa a emitir os sinais de consentimento do gtag, que começam negados e mudam para concedidos só depois de o visitante aceitar a categoria correspondente. A outra é condicionar você mesmo a tag gtag com uma verificação que lê o cookie definido pelo banner, para que o script nunca seja inserido antes do consentimento.

Posso mudar os textos depois que o banner já está no ar?

Pode. Abra o gerador de novo com ajustes parecidos, regere o código e substitua as strings dentro do div do banner. Visitantes que já decidiram não veem o banner outra vez porque o nome do cookie não mudou.

Qual é a diferença entre opt-in e opt-out?

No opt-in todas as categorias não essenciais começam desligadas e só ligam depois que o usuário aceita. No opt-out começam ligadas, o que a CCPA permite mas a GDPR não. Se houver visitantes da União Europeia, use opt-in.

O banner vai aparecer toda vez que o visitante voltar?

Não. Quando o visitante salva a escolha, o cookie dura conforme a validade que você definir (seis meses por padrão). O banner só volta a aparecer quando esse cookie expira, é apagado, ou quando você incrementa a versão de consentimento dentro do arquivo JS.

Gerador de Consentimento de Cookies

Gera código para banners de consentimento de cookies

Configurações

Estilo do banner

Texto do banner

Texto do botão Aceitar

Texto do botão Rejeitar

Texto de gerenciar preferências

URL da política de privacidade

Texto do link

Modo de consentimento

Validade do cookie

dias

NecessáriosAnalíticaMarketingFuncionais

Modo de consentimento do Google v2Adiciona os sinais de consentimento do gtag (ad_storage, analytics_storage, ad_user_data, ad_personalization) para Google Ads e GA4.

Cores

Temas predefinidos

Fundo

Texto

Texto do botão Aceitar

Texto do botão Aceitar Texto

Texto do botão Rejeitar

Texto do botão Rejeitar Texto

Pré-visualização

Usamos cookies para melhorar sua experiência. Ao continuar visitando este site, você concorda com o uso de cookies.

Resultado

<!-- Cookie Consent Banner -->
<style>
#cookie-consent-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #1a1a2e;
  color: #ffffff;
  padding: 20px 24px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
}

#cookie-consent-banner .cc-link {
  color: inherit;
  text-decoration: underline;
  font-weight: 600;
}

#cookie-consent-banner .cc-link:hover {
  opacity: 0.85;
}

#cookie-consent-banner .cc-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
}

#cookie-consent-banner .cc-text {
  flex: 1;
  min-width: 200px;
}

#cookie-consent-banner .cc-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#cookie-consent-banner button {
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: opacity 0.2s;
}

#cookie-consent-banner button:hover {
  opacity: 0.9;
}

#cc-accept-btn {
  background: #e94560;
  color: #ffffff;
  border-color: #e94560;
}

#cc-reject-btn {
  background: transparent;
  color: #ffffff;
}

#cc-manage-btn {
  background: transparent;
  color: #ffffff;
  text-decoration: underline;
  border: none;
  padding: 10px 12px;
}

@media (max-width: 600px) {
  #cookie-consent-banner .cc-content {
    flex-direction: column;
    text-align: center;
  }
  #cookie-consent-banner .cc-buttons {
    justify-content: center;
    width: 100%;
  }
  #cookie-consent-banner button {
    flex: 1;
    min-width: 120px;
  }
}
#cookie-consent-prefs {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

#cookie-consent-prefs .cc-pref-box {
  background: #1a1a2e;
  color: #ffffff;
  width: 90%;
  max-width: 460px;
  max-height: 85vh;
  overflow-y: auto;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
}

#cookie-consent-prefs .cc-pref-title {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 700;
}

#cookie-consent-prefs .cc-pref-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid rgba(127, 127, 127, 0.25);
}

#cookie-consent-prefs .cc-pref-info { flex: 1; }

#cookie-consent-prefs .cc-pref-name {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 2px;
}

#cookie-consent-prefs .cc-pref-desc {
  font-size: 12px;
  opacity: 0.8;
  line-height: 1.4;
}

#cookie-consent-prefs .cc-pref-always {
  font-size: 12px;
  font-weight: 600;
  opacity: 0.7;
  white-space: nowrap;
  padding-top: 2px;
}

#cookie-consent-prefs .cc-switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
}

#cookie-consent-prefs .cc-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

#cookie-consent-prefs .cc-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: rgba(127, 127, 127, 0.5);
  border-radius: 24px;
  transition: background 0.2s;
}

#cookie-consent-prefs .cc-slider:before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}

#cookie-consent-prefs input:checked + .cc-slider {
  background: #e94560;
}

#cookie-consent-prefs input:checked + .cc-slider:before {
  transform: translateX(18px);
}

#cookie-consent-prefs .cc-pref-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

#cookie-consent-prefs .cc-pref-actions button {
  padding: 10px 18px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgba(127, 127, 127, 0.3);
}

#cc-prefs-save {
  background: #e94560;
  color: #ffffff;
  border-color: #e94560;
}

#cc-prefs-cancel {
  background: transparent;
  color: #ffffff;
}
</style>

<div id="cookie-consent-banner" style="display:none;">
  <div class="cc-content">
    <div class="cc-text">Usamos cookies para melhorar sua experiência. Ao continuar visitando este site, você concorda com o uso de cookies.</div>
    <div class="cc-buttons">
      <button id="cc-accept-btn">Aceitar tudo</button>
      <button id="cc-reject-btn">Rejeitar tudo</button>
      <button id="cc-manage-btn">Gerenciar preferências</button>
    </div>
  </div>
</div>
<div id="cookie-consent-prefs" style="display:none;" role="dialog" aria-modal="true" aria-label="Preferências de cookies">
  <div class="cc-pref-box">
    <h2 class="cc-pref-title">Preferências de cookies</h2>
    <div class="cc-pref-list">
      <div class="cc-pref-row">
        <div class="cc-pref-info">
          <div class="cc-pref-name">Necessários</div>
          <div class="cc-pref-desc">Essenciais para o site funcionar. Não podem ser desativados.</div>
        </div>
        <span class="cc-pref-always">Sempre ativos</span>
      </div>
      <div class="cc-pref-row">
        <div class="cc-pref-info">
          <div class="cc-pref-name">Análise</div>
          <div class="cc-pref-desc">Ajudam-nos a entender como os visitantes usam o site para que possamos melhorá-lo.</div>
        </div>
        <label class="cc-switch"><input type="checkbox" data-cc-cat="analytics" aria-label="Análise"><span class="cc-slider"></span></label>
      </div>
    </div>
    <div class="cc-pref-actions">
      <button id="cc-prefs-save">Salvar preferências</button>
      <button id="cc-prefs-cancel">Cancelar</button>
    </div>
  </div>
</div>

<script>
(function() {
  var COOKIE_NAME = 'cookie_consent';
  var CATEGORIES = ["necessary","analytics"];
  var OPTIONAL_CATEGORIES = ["analytics"];
  var DEFAULT_CONSENT = false;
  var EXPIRY_DAYS = 180;

  function getCookie(name) {
    var match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
    return match ? decodeURIComponent(match[2]) : null;
  }

  function setCookie(name, value, days) {
    var d = new Date();
    d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000));
    document.cookie = name + '=' + encodeURIComponent(value) +
      ';expires=' + d.toUTCString() + ';path=/;SameSite=Lax';
  }

  function hideBanner() {
    var banner = document.getElementById('cookie-consent-banner');
    if (banner) banner.style.display = 'none';
  }

  function showBanner() {
    var banner = document.getElementById('cookie-consent-banner');
    if (banner) banner.style.display = 'block';
  }

  function getPrefs() { return document.getElementById('cookie-consent-prefs'); }
  function openPrefs() {
    var p = getPrefs();
    if (!p) return;
    // Reflect the last saved choice (or the defaults) in the toggles.
    var saved = {};
    try { saved = JSON.parse(getCookie(COOKIE_NAME) || '{}'); } catch (e) {}
    OPTIONAL_CATEGORIES.forEach(function(cat) {
      var box = p.querySelector('[data-cc-cat="' + cat + '"]');
      if (box) box.checked = (cat in saved) ? !!saved[cat] : DEFAULT_CONSENT;
    });
    p.style.display = 'flex';
  }
  function closePrefs() {
    var p = getPrefs();
    if (p) p.style.display = 'none';
  }

  // Persist a consent object and broadcast it. `necessary` is always true.
  function persist(consent) {
    consent.necessary = true;
    setCookie(COOKIE_NAME, JSON.stringify(consent), EXPIRY_DAYS);
    hideBanner();
    closePrefs();
    window.dispatchEvent(new CustomEvent('cookieConsent', { detail: consent }));
  }

  // Accept-all / reject-all set every optional category the same way.
  function saveConsent(accepted) {
    var consent = {};
    CATEGORIES.forEach(function(cat) {
      consent[cat] = cat === 'necessary' ? true : accepted;
    });
    persist(consent);
  }

  // Save exactly what the visitor toggled in the preference center.
  function savePreferences() {
    var p = getPrefs();
    var consent = { necessary: true };
    OPTIONAL_CATEGORIES.forEach(function(cat) {
      var box = p && p.querySelector('[data-cc-cat="' + cat + '"]');
      consent[cat] = !!(box && box.checked);
    });
    persist(consent);
  }

  // Check existing consent
  var existing = getCookie(COOKIE_NAME);
  if (!existing) {
    if (DEFAULT_CONSENT) {
      // Opt-out mode: set default consent, still show banner
      var defaultCons = {};
      CATEGORIES.forEach(function(cat) { defaultCons[cat] = true; });
      setCookie(COOKIE_NAME, JSON.stringify(defaultCons), EXPIRY_DAYS);
    }
    showBanner();
  }

  document.getElementById('cc-accept-btn').addEventListener('click', function() {
    saveConsent(true);
  });

  document.getElementById('cc-reject-btn').addEventListener('click', function() {
    saveConsent(false);
  });

  document.getElementById('cc-manage-btn').addEventListener('click', openPrefs);

  var saveBtn = document.getElementById('cc-prefs-save');
  if (saveBtn) saveBtn.addEventListener('click', savePreferences);
  var cancelBtn = document.getElementById('cc-prefs-cancel');
  if (cancelBtn) cancelBtn.addEventListener('click', closePrefs);
})();
</script>

O que é Gerador de Consentimento de Cookies?

Cria um banner de consentimento de cookies em conformidade com o RGPD e entrega o HTML, CSS e JavaScript para adicionar ao seu site. Escolha um estilo, defina as categorias de cookies e ajuste como o consentimento é armazenado.

O resultado é um trecho autocontido: HTML do banner, CSS de estilo e um pequeno JavaScript que grava a escolha do visitante em um cookie e carrega apenas os scripts das categorias aceitas. Você pode colar direto no site ou baixar os três arquivos em um zip.

Como usar

Escolha um estilo de banner (barra superior, barra inferior, modal ou pop-up de canto) e personalize cores, textos e rótulos dos botões.
Configure categorias de cookies (necessários, analíticos, marketing, funcionais), por quanto tempo o consentimento é lembrado e o comportamento de consentimento (opt-in vs opt-out).
Copie ou baixe o código HTML/CSS/JS gerado e adicione ao seu site.

Quando usar

Adicionar um aviso de LGPD ou GDPR em um site estático ou landing de marketing.
Substituir uma plataforma de consentimento pesada que carrega 200 KB antes do primeiro clique.
Prototipar o desenho do banner antes de passar a especificação para a equipe de desenvolvimento.

Resultado

O proprietário de um blog que precisa estar em conformidade com o RGPD seleciona um banner de barra inferior com botões Aceitar Tudo e Gerir Preferências, ativa as categorias de análise e marketing, e baixa o snippet de código para inserir antes da tag de fechamento body.

Perguntas frequentes

Esse gerador deixa o site em conformidade com a LGPD sozinho?: O banner oferece ao visitante a opção clara de aceitar ou recusar e guarda essa preferência, o que cobre o requisito da interface de consentimento. Você ainda precisa de uma página de política de privacidade e tem que bloquear de fato os scripts das categorias recusadas.
Como bloqueio o Google Analytics até o visitante consentir?: De duas formas. A mais simples é marcar a caixa Modo de consentimento do Google v2: o script gerado passa a emitir os sinais de consentimento do gtag, que começam negados e mudam para concedidos só depois de o visitante aceitar a categoria correspondente. A outra é condicionar você mesmo a tag gtag com uma verificação que lê o cookie definido pelo banner, para que o script nunca seja inserido antes do consentimento.
Posso mudar os textos depois que o banner já está no ar?: Pode. Abra o gerador de novo com ajustes parecidos, regere o código e substitua as strings dentro do div do banner. Visitantes que já decidiram não veem o banner outra vez porque o nome do cookie não mudou.
Qual é a diferença entre opt-in e opt-out?: No opt-in todas as categorias não essenciais começam desligadas e só ligam depois que o usuário aceita. No opt-out começam ligadas, o que a CCPA permite mas a GDPR não. Se houver visitantes da União Europeia, use opt-in.
O banner vai aparecer toda vez que o visitante voltar?: Não. Quando o visitante salva a escolha, o cookie dura conforme a validade que você definir (seis meses por padrão). O banner só volta a aparecer quando esse cookie expira, é apagado, ou quando você incrementa a versão de consentimento dentro do arquivo JS.

Gerador de Consentimento de Cookies

Configurações

Cores

Pré-visualização

Resultado

O que é Gerador de Consentimento de Cookies?

Como usar

Quando usar

Resultado

Perguntas frequentes

Ferramentas relacionadas

Gerador de dados estruturados

Página web para PDF

Gerador de política de privacidade

Gerador de termos de serviço

Minificador CSS

Minificador de HTML

Gerador de Consentimento de Cookies

Configurações

Cores

Pré-visualização

Resultado