🍪 Essential Cookies Banner — Accept / Decline + Cookies Page

🍪 Essential Cookies Banner — Accept / Decline + Cookies Page

This tutorial explains how to implement a clean and compliant cookie system for websites that use only essential technical cookies: session, login, security and basic preferences.

No analytics. No ads. No third-party tracking.

• Lightweight and stable
• No external library
• Works on any website
• User choice stored locally
• Compatible with privacy regulations in many countries

Step 1 — Add the cookie banner

Insert the following code near the end of your website footer (just before the </body> tag).

You must modify only 2 values:

• CONSENT_KEY → unique identifier per website
• COOKIES_PAGE_URL → URL of your cookies page

Cookie Banner — HTML

<!-- COOKIE BANNER (ESSENTIAL COOKIES ONLY) -->
<div id="site-cookie-banner" style="display:none; position:fixed; bottom:0; left:0; width:100%; background:#f5f5f5; border-top:2px solid #dcdcdc; padding:15px 20px; z-index:99999; box-shadow:0 -2px 8px rgba(0,0,0,0.1); font-size:15px;">
  <div style="max-width:1150px; margin:auto; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;">

    <div style="flex:1; min-width:260px; color:#333;">
      <strong>Cookies on this website</strong><br>
      This site uses only essential technical cookies required for proper operation
      (login, security, preferences).
      No advertising, analytics or third-party tracking cookies are used.
      <a href="https://YOUR-DOMAIN.COM/static/cookies" style="margin-left:5px;">Learn more</a>
    </div>

    <div style="margin-top:10px; display:flex; gap:10px;">
      <button id="site-cookie-accept">Accept</button>
      <button id="site-cookie-decline">Decline</button>
    </div>

  </div>
</div>

<script>
(function () {

  /* SETTINGS */
  var CONSENT_KEY = "siteCookieConsent";
  var COOKIES_PAGE_URL = "https://YOUR-DOMAIN.COM/static/cookies";

  var banner  = document.getElementById("site-cookie-banner");
  var accept  = document.getElementById("site-cookie-accept");
  var decline = document.getElementById("site-cookie-decline");

  if (!localStorage.getItem(CONSENT_KEY)) {
    banner.style.display = "block";
  }

  accept.onclick = function () {
    localStorage.setItem(CONSENT_KEY, "accepted");
    banner.style.display = "none";
  };

  decline.onclick = function () {
    localStorage.setItem(CONSENT_KEY, "declined");
    banner.style.display = "none";
  };

})();
</script>
<!-- END COOKIE BANNER -->

Step 2 — Create the cookies information page

Create a public page accessible at:

/static/cookies

This page explains cookie usage and is required or strongly recommended by privacy regulations in many countries.

Cookies Page — HTML

<h2>Cookies Policy</h2>

<p>
This website uses only essential technical cookies required for its proper functioning.
</p>

<ul>
  <li>Session and authentication cookies</li>
  <li>Security and protection cookies</li>
  <li>Basic preference cookies (if applicable)</li>
</ul>

<p>
No advertising cookies, analytics cookies or third-party tracking cookies are used.
</p>

<p>
Essential cookies may still be used even if you decline,
as they are required for security and core functionality.
</p>

<p>
You can delete or block cookies at any time using your browser settings.
</p>

Step 3 — Compliance note

The Decline button records the user’s choice but does not block cookies, because only essential cookies are used.

This behavior is compliant in many jurisdictions where essential cookies do not require prior consent but still require clear information.

If you later add analytics, advertising or tracking cookies, you must implement real blocking until consent is given.

Step 4 — Quick verification

• Open the site in a private/incognito window
• The banner appears at the bottom
• Click Accept or Decline
• The banner disappears and does not return
• The link opens /static/cookies

How amazing that I got to see this from the feed as immediately? Usually I never know that there is a new forum post.