Cookies disclaimerΒΆ

This document describes how to add a Cookies disclaimer box to a project. The source code for this how-to is available in GitHub.

  1. Add the HTML snippet to every page on the project.

<div id="cookies-disclaimer">
  <p>
    We use cookies to track usage and preferences in accordance with our
    <a href="/privacy-policy/">Privacy &amp; Cookie Policy</a>
  </p>
  <p>
    <button aria-label="Dismiss alert" type="button">I understand</button>
  </p>
</div>

  1. Add the JavaScript function to the project.

function cookies() {
  const disclaimer = document.querySelector('#cookies-disclaimer')

  if (localStorage.getItem('cookies-accepted')) {
    hideCookiesDisclaimer(disclaimer)
    return
  }

  const button = disclaimer.querySelector('button')

  button.addEventListener('click', (event) => {
    localStorage.setItem('cookies-accepted', true)
    hideCookiesDisclaimer(disclaimer)
  })
}

function hideCookiesDisclaimer(disclaimer) {
  disclaimer.className = ' hidden'
}

  1. Call the cookies() function from the main project script.

  2. Add a Privacy and Cookie Policy to the project.