GDPR Cookie Notice

This is a javascript solution built for nold.io to show a gdpr compliant cookie notice on your website. An example runs on this page, so you can play around with it.

Getting started

You can download the script from Github.

Include the CSS and Javascript files:

<script type="text/javascript" src="/gdpr-cookie-notice/dist/script.js"></script>

<link rel="stylesheet" type="text/css" href="/gdpr-cookie-notice/dist/style.css" />

The script needs the init at the bottom of the page, before closing body tag.

Init the plugin with the following config file

gdprCookieNotice({
  locale: 'en', //This is the default value
  timeout: 500, //Time until the cookie bar appears
  expiration: 30, //This is the default value, in days
  domain: '.nold.io', //If you run the same cookie notice on all subdomains, define the main domain starting with a .
  implicit: true, //Accept cookies on scroll
  statement: 'https://google.com', //Link to your cookie statement page
  performance: ['JSESSIONID'], //Cookies in the performance category.
  analytics: ['ga'], //Cookies in the analytics category.
  marketing: ['SSID'] //Cookies in the marketing category.
});

Now the notice will be visible on page load at the bottom of the screen. Clicking on cookie settings will display a modal window, with 4 cookie categories: essential, performance, analytics and marketing. Everything is checked by default. Cookies listed in the config file for each category will be deleted on page load, if user is opted our from a specific category.

Loading scripts after the cookies are enabled

You can listen to the javascript event called gdprCookiesEnabled to load scripts only when the cookies are enabled by the user. For example, to load a specific tracking tool like a Facebook pixel, wrap its code like so:

<script type="text/javascript">
  document.addEventListener('gdprCookiesEnabled', function (e) {
    if(e.detail.marketing) { //checks if marketing cookies are enabled
      //facebook pixel code
    }
  });
</script>

How can i translate the plugin?

Duplicate the src/langs/en.js file, rename it, translate it and include it before your configuration runs. Define the locale name in the locale parameter.

Is this totally GDPR compatible?

It works for us, might not work for you. I don't know, i'm not a lawyer.

How can i include a button to show the cookie settings modal?

Simply add the classname 'gdpr-cookie-notice-settings-button' to any element, like this.

How can i change the colors and stuff?

Well, its just css, so you could overwrite the styles in your own css files. OR, run npm install, edit the sass variables at the top of src/sass/_gdpr-cookie-notice.scss and run gulp to generate the new files in the src folder which you can preview by going to localhost:3000 in your browser.