Como fazer o banner LGPD do zero (com JavaScript)

Você já entrou em algum site e aquela barrinha aparece na parte de baixo da tela: "utilizamos cookies para melhorar sua experiência, saiba mais, política de privacidade, ok". Você clica em ok, ela some, você entra novamente no site no dia seguinte e ela não aparece mais.

Isso é o banner LGPD. E nesse post vou mostrar como fazer um do zero.

Antes de qualquer coisa, preciso deixar claro: não sou advogado. A LGPD é uma lei extensa com muitas obrigações que vão além de colocar uma barrinha no site. O que vou focar aqui é a parte técnica, o algoritmo de exibição, o código, e o que precisa acontecer nos bastidores quando o usuário aceita.

O algoritmo

Antes de escrever qualquer linha, vale entender o que esse negócio precisa fazer.

Quando o usuário entra no site, o código verifica se existe algum registro salvo no navegador dele indicando que ele já aceitou os termos. Se existir, não faz nada, o banner não aparece. Se não existir, exibe o banner.

Quando o usuário clica em aceitar, três coisas precisam acontecer: o banner sai da tela, você faz uma requisição para o seu servidor registrando aquele aceite, e você salva uma identificação no localStorage do navegador para que o banner não apareça de novo.

Simples assim.

Criando a estrutura

A ideia aqui é criar um arquivo JavaScript independente que, quando adicionado a qualquer página com uma única tag <script>, já faz tudo funcionar automaticamente. Sem precisar mexer no HTML da página.

O primeiro passo é verificar se já tem algo salvo no localStorage:

const lsContent = localStorage.getItem('lgpd');
 
if (!lsContent) {
  // exibe o banner
}

Se não tiver nada salvo, entra no bloco e exibe o banner.

Montando o HTML e o CSS

O banner em si é uma div com posição fixa na parte de baixo da tela. Do lado esquerdo fica o texto explicativo com o link para a política de privacidade. Do lado direito fica o botão de aceitar.

.lgpd-base {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  padding: 20px;
  background-color: #518000;
  color: white;
  font-size: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
 
.lgpd-base a {
  color: white;
}
 
.lgpd-base button {
  background-color: #04a600;
  border: 0;
  color: white;
  cursor: pointer;
  padding: 10px 30px;
}

Esse CSS é simples e funciona. Você pode ajustar as cores para a identidade visual do seu projeto.

O HTML do banner fica assim:

<div class="lgpd-base">
  <div class="lgpd-left">
    Nós utilizamos cookies para melhorar sua experiência do usuário.
    Para conferir detalhadamente todos os cookies utilizados,
    leia nossa <a href="#">política de privacidade</a>.
  </div>
  <div class="lgpd-right">
    <button>Ok</button>
  </div>
</div>

Movendo tudo para o JavaScript

Para que o arquivo JavaScript seja autossuficiente, tanto o HTML quanto o CSS precisam ser gerados por ele. O CSS você injeta via uma tag <style> criada por script, ou coloca direto no arquivo CSS separado e referencia no script. O HTML vira uma template string:

const lgpdHTML = `
  <style>
    /* seu css aqui */
  </style>
  <div class="lgpd-base">
    ...
  </div>
`;

Para exibir na tela:

document.body.innerHTML += lgpdHTML;

Depois disso, você seleciona o botão e adiciona o evento de clique:

const lgpdArea = document.querySelector('.lgpd-base');
const lgpdButton = lgpdArea.querySelector('button');
 
lgpdButton.addEventListener('click', async () => {
  lgpdArea.remove();
 
  // faz a requisição para o servidor
  // salva no localStorage
});

A parte que mais importa: o registro no servidor

Aqui está o ponto que muita gente pula e não deveria.

Quando o usuário clica em aceitar, não basta remover o banner da tela e salvar algo no localStorage. A LGPD exige que você, enquanto responsável pelo site, tenha um registro comprovando que aquele usuário consentiu com a coleta de dados, com data, hora e identificação.

O localStorage é só para o navegador dele não mostrar o banner de novo. O registro legal precisa estar no seu servidor.

Então o fluxo completo dentro do clique fica assim:

lgpdButton.addEventListener('click', async () => {
  lgpdArea.remove();
 
  try {
    const response = await fetch(lgpdURL, { method: 'POST' });
    const data = await response.json();
 
    localStorage.setItem('lgpd', data.id);
  } catch (err) {
    // se a requisição falhar, você decide o que fazer
  }
});

O seu servidor recebe essa requisição, salva o IP, a data, a hora, e gera um identificador único para aquela visita. Esse ID volta para o JavaScript e é salvo no localStorage. Da próxima vez que o usuário entrar, o script encontra esse ID salvo e não exibe mais o banner.

Se o cara abrir uma aba anônima, o localStorage está limpo, o banner aparece de novo, um novo registro é gerado no servidor. É assim que funciona, e está correto que seja assim.

O que o servidor precisa fazer

Isso é trabalho de backend e varia muito dependendo da stack que você usa. Mas o mínimo que precisa acontecer quando a requisição chega é:

• Capturar o IP do usuário
• Salvar a data e hora do consentimento
• Gerar um identificador único para aquela visita
• Retornar esse identificador para o JavaScript

Essa informação no banco de dados é o que te protege juridicamente. Sem ela, você só tem um banner bonito que não serve para muita coisa do ponto de vista legal.

Conclusão

O banner em si é simples de fazer. Uma tarde de código e está pronto. O que exige mais atenção é entender que a parte visual é só a ponta do processo, e que sem o registro no servidor o resto não tem valor real.

Se você precisar mostrar para um cliente que o site está em conformidade com a LGPD, o banner sozinho não fecha essa conversa. Mas é um começo, e entender como ele funciona por dentro te coloca num patamar bem melhor para implementar o restante.

Copia o código, testa, adapta para o seu projeto e vai em frente.