Quatro designs originais de banner de cookies para editar e copiar, um verificador que aponta escolhas arriscadas segundo as orientações do ICO do Reino Unido e código do Google Consent Mode v2.
Um bom banner de cookies oferece Aceitar todos e Rejeitar todos lado a lado, com uma forma de escolher por categoria, e mantém desligada toda opção não essencial até o visitante agir. Abaixo estão quatro designs originais de banner para editar e copiar, um verificador que aponta escolhas arriscadas e o código do Google Consent Mode que combina com eles.
Escolhas do banner em resumo (com base nas orientações do ICO do Reino Unido, em outubro de 2026)
A maioria das galerias de banners mostra capturas de tela de banners de outras empresas sem dizer se eles seguem as regras. Os exemplos aqui são designs nossos, ao vivo e editáveis, e cada um vem acompanhado do que as orientações do regulador do Reino Unido realmente dizem sobre recusa, padrões e silêncio. Esta página explica padrões de design; não é aconselhamento jurídico.
A página do ICO do Reino Unido sobre gestão de consentimento descreve como boa prática um mecanismo que torne recusar o consentimento tão fácil quanto aceitar, e o seu exemplo de má prática é um banner com Aceitar todos, mas sem Rejeitar todos. Em outros lugares as regras são definidas pela autoridade de cada país, então confira as orientações dos países que você atende.
O ICO diz que silêncio ou inatividade não contam como consentimento, e classifica um pop-up que trata o uso contínuo como consentimento como ativar cookies de antemão sem consentimento. Se o visitante ignorar o banner, mantenha os cookies não essenciais desligados.
Cookies estritamente necessários para algo que o visitante pediu, como um carrinho de compras ou um login, entram em uma exceção. O ICO observa que cookies úteis ou convenientes, mas não essenciais, continuam exigindo consentimento.
É uma forma de informar às tags do Google se o visitante concordou. Você define um padrão com gtag('consent', 'default', ...) antes de as tags carregarem e depois chama gtag('consent', 'update', ...) quando ele escolhe. A versão 2 adicionou os parâmetros ad_user_data e ad_personalization ao lado de ad_storage e analytics_storage.
Os dois podem funcionar. Uma barra inferior deixa a página legível, enquanto uma caixa centralizada consegue uma decisão mais rápida, mas bloqueia o conteúdo. O que importa mais é que as duas escolhas sejam igualmente fáceis e que nada não essencial rode antes.
Cada prévia roda em um sandbox com scripts desativados, então os botões não fazem nada aqui. Copie a marcação e ligue os botões ao seu próprio código de consentimento.
O layout mais comum. Aceitar e Rejeitar compartilham o mesmo estilo; Escolher abre o seu painel de configurações.
Ocupa menos espaço em telas grandes. No celular, deixe que ela se estenda pela largura toda.
Os cookies necessários aparecem como sempre ativos; todas as outras caixas começam desmarcadas.
Um pequeno link no rodapé de todas as páginas permite que os visitantes mudem de ideia a qualquer momento.
Se o seu site usa tags do Google, defina o padrão antes de as tags carregarem e atualize-o quando o visitante escolher. Os nomes de parâmetros abaixo são os da documentação do modo de consentimento do Google.
Parâmetros do Consent Mode
A chamada de padrão vem antes do snippet da tag do Google. wait_for_update dá ao banner 500 milissegundos para enviar uma atualização antes de as tags dispararem.
Layout
Barra inferior
Caixa no canto
Caixa centralizada
O que o seu banner faz
Rejeitar todos está na primeira tela
Aceitar e Rejeitar têm a mesma aparência
A opção de analytics começa ligada
O texto diz que continuar navegando significa consentimento
Um link Configurações de cookies permite mudar de ideia
Prévia
Usamos cookies para fazer este site funcionar e, se você concordar, para medir as visitas.
Ao continuar navegando, você concorda com o nosso uso de cookies.
Aceitar todos
Rejeitar todos
Escolher
Analytics
Observações
Nenhuma escolha arriscada encontrada no que você marcou.
Não há Rejeitar todos na primeira tela. O ICO descreve como boa prática tornar recusar o consentimento tão fácil quanto aceitar.
Rejeitar parece mais fraco que Aceitar. Na nossa visão, isso torna recusar mais difícil que aceitar; um par equivalente é o design mais seguro.
Uma opção não essencial começa ligada. Nos exemplos de boa prática do ICO, as opções de tecnologias não isentas vêm desligadas por padrão.
Continuar navegando é tratado como consentimento. O ICO diz que silêncio ou inatividade não contam.
Não há como mudar a escolha depois. O ICO diz que os usuários devem conseguir ativar ou desativar cookies não essenciais com facilidade.
Uma ajuda de design baseada nas orientações publicadas pelo ICO, não aconselhamento jurídico.
Comece grátis · Sem cartão de crédito