How to add a Cookie Policy popup to your website

Cookie notices are quite annoying, but many websites opt for showing them for liability purposes. There are many different laws and scenarios where cookie notices are required. The following snippet below can be used as a base template for a simple cookie popup.

<script>
  (function () {
    if (localStorage.getItem('cookieAccepted')) return;

    const style = document.createElement('style');
    style.textContent = `
    .cookie-popup {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background-color: var(--primary-color);
      color: #fff;
      padding: 20px;
      max-width: 230px;
      border-radius: 12px;
      z-index: 10000;
      font-size: 0.9rem
    }

    .cookie-popup-title {
      font-weight: bold;
      margin-bottom: 6px;
    }

    .cookie-popup p {
      margin: 0 0 10px;
      font-size: 16px;
      line-height: 1.4;
    }

    .cookie-popup a {
      color: #fff;
      text-decoration: underline;
      transition: all ease-in-out 200ms;
    }

    .cookie-popup a:hover {
      color: var(--emphasis-color);
      text-decoration: underline;
      transition: all ease-in-out 200ms;
    }

    .cookie-popup button {
      background: none;
      border: none;
      color: #fff;
      font-weight: bold;
      cursor: pointer;
      font-size: 15px;
      padding: 12px 0 0;
      transition: all ease-in-out 200ms;
    }

    .cookie-popup button:hover {
      color: var(--emphasis-color);
      transition: all ease-in-out 200ms;
    }
  `;
    document.head.appendChild(style);

    const popup = document.createElement('div');
    popup.className = 'cookie-popup';
    popup.innerHTML = `
     <div class="cookie-popup-title">Our site uses cookies.</div>
     <div>By continuing to use our site you are agreeing to our
     <a href="/privacy-policy">cookie policy</a>.</div>
     <div>
      <button id="acceptCookies">ACCEPT & CLOSE</button>
     </div>
  `;

    document.body.appendChild(popup);

    document.getElementById('acceptCookies').addEventListener('click', function () {
      localStorage.setItem('cookieAccepted', 'true');
      popup.remove();
    });
  })();
</script>

How to add a Cookie Policy popup to your website

Use the following code snippet to add a cookie popup to your website