Create a simple cookie policy popup

Here is a quick and easy way to create a cookie policy popup without using any libraries.

In this tutorial, I only use a bit of jQuery and Bootstrap. But they don’t count, right?! You can adjust the code bellow accordingly if you are not using them.

The HTML

We have a cookie-overlay class and we hide the popup by default using Bootstrap.

We also have a button to accept the cookies as well as a close button if they don’t want to accept. If they don’t accept it, they will be redirected to accept it again next time they visit the website. You can expand this tutorial if you wish to cover this scenario as well.

<div class="cookie-overlay p-4 d-none">
  <div class="d-flex">
    <div class="mr-3">
      By clicking the "Accept" button below, you agree to our <%= link_to
      'Cookie Policy', cookies_url, target: '_blank' %>.
    </div>
    <img src="/close.png" class="close-cookies" />
  </div>
  <button class="btn btn-primary mt-3 accept-cookies">Accept</button>
</div>

• Define a wrapper with class cookie-overlay which we will use to style the box.
• Include text, a link to your Cookie Policy page, a close button if they don’t want to accept the cookies and an Accept button.

The CSS

Next, let’s make the popup look pretty.

.cookie-overlay {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  background: #fff;
  z-index: 2051;
  line-height: 20px;
  font-size: 14px;
  border-radius: 6px;

  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);

  > div:first-child {
    width: 458px;
  }

  a {
    text-decoration: underline;
  }

  .close-cookies {
    cursor: pointer;
  }

  @include media-breakpoint-down(md) {
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 0;

    > div:first-child {
      width: auto;
    }
  }
}

You are welcome to use your creativity here.

Using the styling above will make the popup appear on the bottom left part of the screen on desktop, whilst on mobile, it will cover the entire width of the bottom part of the screen real estate.

The Javascript

Finally, for the most important ingredient in our tutorial.

// cookie policy
$(document).on("ready", function () {
  if (document.cookie.indexOf("accepted_cookies=") < 0) {
    $(".cookie-overlay").removeClass("d-none").addClass("d-block");
  }

  $(".accept-cookies").on("click", function () {
    document.cookie = "accepted_cookies=yes;";
    $(".cookie-overlay").removeClass("d-block").addClass("d-none");
  });

  // expand depending on your needs
  $(".close-cookies").on("click", function () {
    $(".cookie-overlay").removeClass("d-block").addClass("d-none");
  });
});

Document.cookie lets you read and write cookies associated with your browser. It’s really easy and intuitive to use as shown in the code above.

You can read all cookies using the command document.cookie and you can add a new cookie using document.cookie = newCookie.

A few things to note:

• On page load, we check if document.cookie includes accepted_cookies=

• If it’s not present, .indexOf would output -1. If it is present, it would output 0 or higher. In conclusion, if we can’t find accepted_cookies inside document.cookie, we show the cookie policy popup.

• The user has two options. They can click on .close-cookies which will close the cookies popup, but it will appear once again next time they visit the website. You can expand this example to cover this scenario (for example, disable cookies for this user).

• On the other hand, the user can also click .accept-cookies button, which will add accepted_cookies=yes; to document.cookie and hide the popup. Next time the user comes to the website or goes to another page, document.cookie will include accepted_cookies. Therefore, the popup won’t be displayed to the user.

• You can move document.cookie = “accepted_cookies=yes;” within the if statement so the user automatically accepts whenever they visit the website. If you decide to do that, you can probably remove the Accept button as it is not needed anymore.