Floating cookie consent popup box

General
1

Hi everyone,

As per European regulations, it is mandatory to provide customers with clear options to manage their cookie preferences. To comply, I’ve added a simple cookie consent popup on my site.

Please note:

  • This popup only mimics cookie consent requirements visually and stores preferences locally in the browser (using localStorage).
  • It does NOT include backend/database functionality or a full GDPR-compliant consent management system.
  • The popup automatically disappears after 60 seconds if the user does not interact with it.

Feel free to customize the text, colors, and links to match your website.

Where to customize your website links

  • Cookie Policy URL: Replace the URL inside the <a href="..."> tag with your website’s actual cookie policy page.
  • Website domain mention: If you want to mention your website name or URL elsewhere (e.g., footer or popup text), replace the placeholder "mockup" with your own brand or domain.

Cookie Popup Code (with “mockup” placeholder)

<style>
  /* Popup container */
  .cookie-popup {
    position: fixed;
    bottom: 16px;
    left: -260px; /* Start hidden off-screen */
    width: 240px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 10px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
    font-family: Arial, sans-serif;
    font-size: 11px;
    color: #333;
    z-index: 9999;
    opacity: 0;
    line-height: 1.3;
  }

  .cookie-popup p {
    margin: 0 0 8px;
    font-size: 11px;
    text-align: justify;
  }

  .cookie-popup a {
    color: red;
    font-weight: bold;
    text-decoration: underline;
    font-size: 11px;
  }

  .cookie-buttons {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .cookie-buttons-row {
    display: flex;
    justify-content: space-between;
    gap: 5px;
  }

  .cookie-popup button {
    flex: 1;
    padding: 3px 5px;
    font-size: 10px;
    border: 1px solid #333;
    border-radius: 3px;
    background: #fff;
    cursor: pointer;
    font-weight: bold;
    transition: 0.2s;
  }

  .cookie-popup button:hover {
    background: #333;
    color: #fff;
  }

  @keyframes slideInLeft {
    from {
      left: -260px;
      opacity: 0;
    }
    to {
      left: 16px;
      opacity: 1;
    }
  }

  .cookie-popup.show {
    animation: slideInLeft 0.6s ease forwards;
  }
</style>

<div class="cookie-popup" id="cookiePopup">
  <p>
    To provide you a better shopping experience, we use cookies. 
    By continuing, you agree to our 
    <a href="https://www.mockup.com/page/privacy-policy" target="_blank">cookie policy</a>.
  </p>
  <div class="cookie-buttons">
    <div class="cookie-buttons-row">
      <button id="acceptCookies">ACCEPT</button>
      <button id="declineCookies">DECLINE</button>
    </div>
    <button id="onlyNecessary">ONLY NECESSARY</button>
  </div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const cookiePopup = document.getElementById("cookiePopup");
    const acceptBtn = document.getElementById("acceptCookies");
    const declineBtn = document.getElementById("declineCookies");
    const onlyNecessaryBtn = document.getElementById("onlyNecessary");

    if (!localStorage.getItem("cookiesPreference")) {
      cookiePopup.classList.add("show");

      setTimeout(() => {
        cookiePopup.style.display = "none";
      }, 60000); // Popup disappears after 60 seconds
    }

    acceptBtn.addEventListener("click", function () {
      localStorage.setItem("cookiesPreference", "all");
      cookiePopup.style.display = "none";
    });

    onlyNecessaryBtn.addEventListener("click", function () {
      localStorage.setItem("cookiesPreference", "necessary");
      cookiePopup.style.display = "none";
    });

    declineBtn.addEventListener("click", function () {
      localStorage.setItem("cookiesPreference", "decline");
      cookiePopup.style.display = "none";
    });
  });
</script>

Summary of where to add your website links:

  • Replace "https://www.mockup.com/page/privacy-policy" with your actual cookie policy page URL.
  • You can also customize the popup text (inside <p>...</p>) to mention your website or brand name.
  • Add this entire snippet before the closing </body> tag of your HTML pages for best performance.
1 Like