CookieBannerJS

Podes observar e utilizar o código do CookieBannerJS neste link:
👉 Repositório no GitHub

Estrutura HTML do CookieBannerJS

Para obter esta funcionalidade é necessário um código HTML que mostra a mensagem e os botões a serem selecionados pelo código JavaScript. Foi ainda adicionado um excerto para limpar as preferências do utilizador:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;link rel="stylesheet" href="style.css"&gt;
    &lt;title&gt;Cookie Banner&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class="cookies-banner"&gt;
      &lt;p&gt;Se não queres cookies clica em "Rejeitar" caso contrário clica em "Aceitar".&lt;/p&gt;
      &lt;button id="cookies-reject"&gt;Rejeitar&lt;/button&gt;
      &lt;button id="cookies-accept"&gt;Aceitar&lt;/button&gt;
    &lt;/div&gt;
    &lt;!-- To add before the footer --&gt;
    &lt;div id="reset-cookies-banner"&gt;
      &lt;span&gt;Queres voltar a ver o banner de cookies?&lt;/span&gt;
      &lt;button id="reset-cookies-btn"&gt;Limpar preferências&lt;/button&gt;
    &lt;/div&gt;
    &lt;script src="cookieBanner.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;

Código JavaScript do CookieBannerJS

O código JavaScript do CookieBannerJS é bastante simples.
Primeiro, escolhemos a div que engloba a mensagem e os botões para uso futuro:

const cookieBanner = document.querySelector(".cookies-banner");

Verificar se já existe consentimento

if (localStorage.getItem("cookiesBannerApproved") === "true") {
    // Code if cookie Banner is approved
    cookieBanner.remove();
}

if (localStorage.getItem("cookiesBannerReject") === "true") {
    // Code if cookie Banner is rejected
    cookieBanner.remove();
}

Caso o utilizador rejeite

if (document.getElementById("cookies-reject")) {
  document.getElementById("cookies-reject").addEventListener("click", function () {
    if (localStorage.getItem("cookiesBannerReject") !== "true") {
        localStorage.setItem("cookiesBannerReject", true);
    }
    if (localStorage.getItem("cookiesBannerReject") === "true" &amp;&amp; localStorage.getItem("cookiesBannerApproved") === null) {
      cookieBanner.remove();
    }
  });
}

Caso o utilizador aceite

if (document.getElementById("cookies-accept")) {
  document.getElementById("cookies-accept").addEventListener("click", function () {
    localStorage.setItem("cookiesBannerApproved", true);
    if (localStorage.getItem("cookiesBannerApproved") === "true" &amp;&amp; localStorage.getItem("cookiesBannerReject") === null) {
      // Code to add Google Analytics for example
      cookieBanner.remove();
    }
  })
};

Limpar preferências

document.getElementById('reset-cookies-btn').onclick = function() {
  localStorage.removeItem("cookiesBannerApproved");
  localStorage.removeItem("cookiesBannerReject");
  location.reload();
};

Estilos CSS

Para tornar o cookie banner mais bonito, pode-se usar o seguinte estilo:

body {
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', Arial, sans-serif;
  background: #f6f7f9;
  color: #222;
}

.cookies-banner {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.10), 0 1.5px 4px rgba(0,0,0,0.06);
  padding: 28px 32px 20px 32px;
  max-width: 420px;
  width: 90%;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  font-size: 1.08rem;
  border: 1px solid #e3e6ea;
}
.cookies-banner p {
  margin: 0 0 10px 0;
  text-align: center;
  color: #333;
}
.cookies-banner button {
  min-width: 110px;
  padding: 10px 0;
  margin: 0 8px;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
#cookies-accept {
  background: #e3e6ea;
  color: #222;
}
#cookies-accept:hover {
  background: #d1d5db;
}
#cookies-reject {
  background: #f6f7f9;
  color: #666;
}
#cookies-reject:hover {
  background: #e3e6ea;
  color: #222;
}
@media (max-width: 600px) {
  .cookies-banner {
    padding: 18px 8px 14px 8px;
    font-size: 0.98rem;
  }
  .cookies-banner button {
    min-width: 90px;
    font-size: 0.95rem;
  }
}

#reset-cookies-banner {
  max-width: 700px; 
  margin: 2rem auto 0 auto; 
  background: #f3f4f6; 
  color: #222; 
  border-radius: 1rem; 
  box-shadow: 0 2px 12px rgba(60,72,88,0.10); 
  padding: 1.2rem 1.2rem; 
  text-align: center; 
  font-size: 1.08rem; 
  font-weight: 600;
}

#reset-cookies-btn {
  margin-left: 1rem; 
  background: #fff; 
  color: #222; 
  border: 1px solid #bbb; 
  border-radius: 0.6rem; 
  padding: 0.5rem 1.2rem; 
  font-weight: bold; 
  cursor: pointer; 
  transition: background 0.2s, color 0.2s;
}

Conclusão

Obrigado por lerem este artigo e espero que este código seja útil nos vossos sites estáticos. Podem visitar o artigo do poder do html bruto ou o dicas de seo para sites estáticos para mais informações para sites estáticos.