Como criar um Aviso de Cookies Responsivo usando HTML, CSS e JavaScript

Por: Angelo Luis Ferreira | 10/01/2024 Acessos: 2.147

Objetivo

Criar um aviso de cookies com HTML, CSS e JavaScript para notificar os visitantes que os seus dados podem ser coletados e utilizados pelo site ou empresa responsável pela página web. Este aviso, caso o seu site utilize cookies, cumpre a LGPD, Lei Geral de Proteção de Dados Pessoais do Brasil e de outros países também.

Cookies: são pequenos arquivos de texto que armazenam por um período o que o usuário está fazendo. Cookies armazenam seu histórico de navegação, bem como dados do site, dados do visitante, entre outros. São desenvolvidos especificamente para que navegadores personalizem, rastreiem e salvem informações de cada usuário. Os cookies ficam armazenados localmente nos navegadores dos usuários, e são requisitados quando necessários.

Como você já deve ter visto, existem vários plugins JavaScript que podem ser usados como aviso de cookies. Entretanto, propomos neste artigo apresentar um script para você inserir facilmente uma caixa de diálogo de consentimento de cookies e políticas no seu site, sem precisar recorrer a nenhum plugin de terceiros.

Nele você criará um um popup de aviso no final da página para informar aos usuários do site sobre a utilização de cookies. Desta maneira, os visitantes ao utilizarem o site concordarão automaticamente com as políticas de cookies e os termos de uso do serviço. Ao clicar no botão, o popup será fechado imediatamente, confirmando a aceitação das políticas sugeridas pelo proprietário do site.

Exemplo de um Script para criar um aviso de cookie em HTML, CSS e JavaScript:

HTML

<!-- cookies notification (accept button) -->
<div id="cookie-notification" class="CookieMessage" style="display: none;">
        <div class="CookieMessage-content"> 
            <p>Ao utilizar o site Squids Arduino você concorda com o uso de cookies de navegação e com os Termos de Uso do site. <a href="https://exemplo/politicas-de-privacidade">Saiba mais</a></p>
          <p><a id="cookie-notification-close" class="CookieMessage-button" href="#">Aceitar</a></p>          
        </div>
</div> 

CSS

.CookieMessage {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #121212;
    z-index: 9;
    display: none;
  }
  
  .CookieMessage-content {
    color: white;
    max-width: 900px;
    margin: 0 auto;
    padding: 20px 20px 0 20px;
    font-family: sans-serif;
    line-height: 1.5;
    font-size: 12px;

  }

  .CookieMessage-content a{
    color: white;
  }

  .CookieMessage-content p{
    margin: 0 0 20px 0;
  }
  
  .CookieMessage-button {
    background-color: purple;
    display: inline-block;
    text-decoration: none;
    padding: 5px 20px;
    border-radius: 5px;
    text-transform: uppercase;  
  }

  .CookieMessage-button:hover{
    background: #555;
  }

JavaScript

<!-- cookie and term of use button -->
<script>
        if (!localStorage.getItem("cookiesAccepted")) { 
        var cookieMessage = document.getElementById('cookie-notification');  
        var closeCookie = document.getElementById('cookie-notification-close');
        
        cookieMessage.style.display = 'block';  
        closeCookie.addEventListener("click", function(e) {  
          e.preventDefault();
          localStorage.setItem("cookiesAccepted", true);
          
          cookieMessage.style.display = 'none';
        });
      }
      
</script>

Obs.: Altere o texto e acrescente o link da página com as políticas do site em HTML. Personalize as cores e tamanhos do botão e corpo do aviso em CSS da maneira que desejar.

EXEMPLO COMPLETO

  See the Pen
  Aviso de cookies - popup by Angelo Luis Ferreira (@angeloalf)
  on CodePen.

Tente você mesmo

Veja no nosso editor HTML como foi criado o Aviso de Cookies. No editor, altere os códigos da forma que você desejar até conseguir o design desejado. Depois é só copiar os códigos e colar no seu projeto.

TENTE VOCÊ MESMO »