Stylish Multilingual GDPR & Cookie Consent Popup In Vanilla JavaScript

Category: Javascript , Recommended | September 15, 2021
Author:orestbida
Views Total:109 views
Official Page:Go to website
Last Update:September 15, 2021
License:MIT

Preview:

Stylish Multilingual GDPR & Cookie Consent Popup In Vanilla JavaScript

Description:

A standalone JavaScript library that displays a stylish, multilingual, customizable, accessible, GDPR compliant cookie consent popup to make your site comply with GDPR and EU Cookie Law.

Click the Learn More link to display Cookie Consent Policy content in a popup window.

More Features:

  • Auto language detection.
  • Configurable expiration date.
  • Easy to create your own styles.
  • Cookie settings modal.

How to use it:

1. Insert the JavaScript file cookieconsent.js and stylesheet cookieconsent.css into the HTML document.

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

2. Initialize the library and display the cookie consent popup on page load.

var cookieconsent = initCookieConsent();
cookieconsent.run({
  onAccept: function(cookies){        
    if(cc.allowedCategory('analytics_cookies')){
      cc.loadScript('https://www.google-analytics.com/analytics.js', function(){    
        ga('create', 'UA-XXXXXXXX-Y', 'auto');  //replace UA-XXXXXXXX-Y with your tracking code
        ga('send', 'pageview');
      });
    }
  },
});

3. Customize the cookie consent popup with the following options.

cookieconsent.run({

  // language
  current_lang : "en",

  // auto display on page load
  autorun: true,

  // cookie name
  cookie_name: 'cc_cookie',

  // 6 months
  cookie_expiration : 182,

  // cookie domain
  cookie_domain: location.hostname, 

  // cookie path
  cookie_path: "/",

  // sameSite attribute
  cookie_same_site: "Lax",

  // delay in ms
  delay: 0,

  // path to theme CSS
  theme_css: '',

  // enable if you want to block page navigation until user action
  force_consent: false,

  // automatically grab the language based on the user's browser language
  auto_language: true,

  // automatically delete cookies when user opts-out of a specific category inside cookie settings
  autoclear_cookies: false,

  // enable if you want to easily manage existing script tags
  page_scripts: false,

  // remove the html cookie tables
  remove_cookie_tables: false,

  languages: {
    // add your own language here
  },

  gui_options: {
    consent_modal : {
      layout : 'cloud',               // box/cloud/bar
      position : 'bottom center',     // bottom/top + left/right/center
      transition: 'slide'             // zoom/slide
    },
    settings_modal : {
      layout : 'box',                 // box/bar
      // position : 'left',           // left/right
      transition: 'slide'             // zoom/slide
    }
  }

  onAccept: function(){
    // do something
  },

  onChange: function(){
    // do something
  },
  
});

4. API methods.

// show the cookie consent popup
cookieconsent.show(delay);

// hide the cookie consent popup
CookieConsent.hide();

// show cookie settings
CookieConsent.showSettings(delay);

// hide cookie settings
cookieconsent.hideSettings();

// allow cookie category
cookieconsent.allowedCategory(<category_name>);

// check if a cookie is valid
cookieconsent.validCookie(<cookie_name>);

// load script
cookieconsent.loadScript(path, callback, customAttributes>);

// accept categories
cookieconsent.accept(,);

// erase cookies
cookieconsent.eraseCookies(,,)

5. Enable a trigger button to toggle the cookie settings modal.

<a href="javascript:void(0);" aria-label="View cookie settings" data-cc="c-settings">Cookie Settings</a>

6. Manage third-party scripts.

cookieconsent.run({
  page_scripts: true
});
<script data-src="/path/to/analytics.js" data-cookiecategory="analytics" defer></script>

Changelog:

v2.5.1 (09/15/2021)

  • fix: revision option not working properly
  • fix: eraseCookies() function not working on localhost

v2.5.0 (08/29/2021)

  • added .accept() method
  • added .eraseCookies() method
  • added support for revisions (when cookieconsent terms change => re-prompt users to accept)
  • use better system fonts
  • minor ui tweaks

v2.4.7 (06/18/2021)

  • minor css bugfix (fixed table headers which sometimes covered table cells)
  • added option to specify custom domain for each cookie inside cookie_table

v2.4.6 (06/02/2021)

  • improved autoclear_cookies function
  • fixed minor ui bug which caused links inside cookie tables to be unclickable

v2.4.5 (05/28/2021)

  • allow html use inside table cells for more flexibility
  • fix firefox bug with cloneNode() on script tags
  • added option to set custom cookie name

v2.4.4 (05/27/2021)

  • fix occasional transition skip
  • manage unhandled error caused by a very specific config. object
  • minor code/css refactoring

v2.4 (05/26/2021)

  • added some basic options for layout and position via gui_options
  • better support for existing <script> tags which can now easily be managed through the cookieconsent
  • added new cookie settings: cookie_path, cookie_same_site
  • added new option to hide the html cookie tables
  • minor css refactoring && IE bugfixes

v2.3 (04/30/2021)

  • support WAI-ARIA
  • added css variables for an easier management of color schemes
  • added possibility to append the generated html to any element (default :=> document.body)
  • improved accessibility via css generated icons

v2.2 (03/23/2021)

  • fixed cookie (cc_cookie) not being set with https enabled on localhost
  • fixed minor bug on IE where .innerHTML throws an exception

v2.1 (03/06/2021)

  • added forced consent (block page navigation until consent is given)
  • autoload_css now uses ajax to ensure the css is properly loaded
  • minor code refactoring and optimizations

02/20/2021

  • minor css refactoring
  • catch css load error without local server

11/26/2020

  • darkmode button minor bugfix

11/14/2020

  • darkmode read-more button hover fix

11/09/2020

  • minor code refactoring

11/08/2020

  • fix minor bugs & replace innerText with innerHTML

11/07/2020

  • minor bugfix, increased z-index to 1000000

v1.2 (11/05/2020)

  • add support for custom expiration date with cc_cookie_expiration
  • add support for auto-removal of unused cookies based on cookiepolicy preferences with cc_autoclear_cookies
  • can now autolad css or not with cc_autoload_css
  • fix minor (bug/incoherence): cookiepolicy did not remember/retrieve saved preferences and always displayed default values

10/24/2020

  • add custom table headers

10/02/2020

  • fix minor ui bugs on ie8

09/29/2020

  • fix minor css bug

09/20/2020

  • remove unused code

09/19/2020

  • improve cookie-policy ui

09/15/2020

  • bug fixed for IE 8/9.

09/08/2020

  • now you can bind any buttons to open the cookie policy

09/08/2020

  • cookie-policy-ui update

09/07/2020

  • fix minor glitch on small screen devices

09/06/2020

  • minor changes

09/04/2020

  • fix double saved cookies

09/01/2020

  • fix minor glitch

You Might Be Interested In:


2 thoughts on “Stylish Multilingual GDPR & Cookie Consent Popup In Vanilla JavaScript

  1. Koky

    Hi! I really like this snippet, but I’m newbie and I have a simple question, which file I need to edit to change the text of popup? Thank you so much.

    Reply
  2. Francisco Tazón Vega

    Hi!
    Thank you for your code, great job!

    Can it be done that the first screen, the one that starts with ‘I use cookies….’ is modal, so I can comply with a Spanish resolution that requires that the request is also modal?

    Thanks in advance

    Reply

Leave a Reply