Stylish Multilingual Cookie Consent Popup In Vanilla JavaScript

---

Preview:

Description:

A standalone JavaScript library that displays a stylish, multilingual, customizable cookie consent popup to make your site comply with 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.

How to use it:

1. Insert the JavaScript file cookieconsent.js into the HTML document.

<script src="./dist/cookieconsent.js"></script>

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

CookieConsent.run({
  "cc_autorun" : true,
  "cc_website_name" : "CSSScript",
  "cc_website_url" : "CSSScript.com",       
  "cc_theme_css" : "./src/cookieconsent.css" // path to theme CSS
});

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

CookieConsent.run({

  // parent contianer
  cc_container : "body", 

  // auto language detection
  cc_auto_language: false,

  // or set language here
  cc_current_lang : "en",               
  cc_default_lang : "en",
  cc_languages : {},

  // auto display on page load
  cc_autorun: false, 

  // // link to your cookie-policy page 
  cc_policy_url: null,       

  // delay in ms
  cc_delay: 20,

  // enable console log
  cc_enable_verbose: true, 
  
  // 182 days
  cc_cookie_expiration : 182, 
  
  // cookie name
  cc_cookie_name: "cc_cookie",

  // if enabled -> erase unused cookies based on deselected preferences
  cc_autoclear_cookies: true,                 
  
  // auto load CSS
  cc_autoload_css: true,  

  // theme css
  cc_theme_css: null,

  // default class for dark mode
  cc_cc_darkmode_class : 'cc_darkmode'
  
});

4. API methods.

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

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

// clear cookies
CookieConsent.clearCookies();

5. Enable a trigger button to toggle the cookie consent popup.

<button type="button" data-cc="cc_policy">Open cookie-policy</button>

Changelog:

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