Stylish Multilingual Cookie Consent Popup In Vanilla JavaScript

Category: Javascript | April 30, 2021
Author: orestbida
Views Total: 130 views
Official Page: Go to website
Last Update: April 30, 2021
License: MIT

Preview:

Stylish Multilingual Cookie Consent Popup In Vanilla JavaScript

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

You Might Be Interested In:


2 thoughts on “Stylish Multilingual 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