Stylish Multilingual GDPR & Cookie Consent Popup In Vanilla JavaScript

Preview:

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