Minimal Cookie Consent Popup In JavaScript – PureCookie

Category: Javascript | March 28, 2019
11 Comments
Demo Download
Author:SnowPatch
Views Total:32,786 views
Official Page:Go to website
Last Update:March 28, 2019
License:MIT

Preview:

Minimal Cookie Consent Popup In JavaScript – PureCookie

Description:

PureCookie is a small JavaScript library that displays an elegant cookie consent popup to ask the user to accept/reject cookies.

How to use it:

Download and import the PureCookie’s JavaScript & CSS files into your document. That’s it.

<link rel="stylesheet" href="purecookie.css"/>
<script src="purecookie.js"></script>

Config the cookie consent popup in the purecookie.js.

// popup title
var purecookieTitle = "Cookies."; 
// popup content
var purecookieDesc = "By using this website, you automatically accept that we use cookies.";
// policy link
var purecookieLink = '<a href="cookie-policy.html" target="_blank">What for?</a>'; 
// button text
var purecookieButton = "Understood";

See Also:

You Might Be Interested In:

11 thoughts on “Minimal Cookie Consent Popup In JavaScript – PureCookie”

  2. AlbanPatault

    Hi,

    Thanks for this stuff, realy helpful!

    A small addition to avoid breaking all js in your page :

    Replace at line 62 in purecookie.js

    document.body.innerHTML += “”

    by

    var cookieDiv = document.createElement(‘div’);
    cookieDiv.id = ‘menu’;
    cookieDiv.innerHTML = ””;
    document.body.appendChild(cookieDiv);

    The use of body.innerHTML += rewrites the whole document, and breaks your js.
    If there are any event listeners bound to elements in the document, those are gone too because the elements were destroyed and replaced with identical-looking ones.

    Reply ↓
    1. Pedro Knigge

      I just replace body.innerHTML by: document.getElementById(“aca-va-el-pop-up”).innerHTML
      and put some div with and ID in the body:
      Now just put the content in that div without break everything.

      Full code:
      function cookieConsent() {
      if (!getCookie(‘purecookieDismiss’)) {
      document.getElementById(“aca-va-el-pop-up”).innerHTML += ‘‘ + purecookieTitle + ‘‘ + purecookieDesc + ‘ ‘ + purecookieLink + ‘‘ + purecookieButton + ‘‘;
      pureFadeIn(“cookieConsentContainer”);
      }
      }

      Reply ↓
  8. dsm

    I tried your change in the script and it works very well, before that I had a problem with the search engine and reCAPTCHA v2

    Reply ↓

Leave a Reply