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


Stylish Multilingual Cookie Consent Popup In Vanilla JavaScript


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.{
  "cc_autorun" : true,
  "cc_website_name" : "CSSScript",
  "cc_website_url" : "",       
  "cc_theme_css" : "./src/cookieconsent.css" // path to theme CSS

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

  // 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;

// hide the cookie consent popup

// clear cookies

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

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


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


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


  • darkmode button minor bugfix


  • darkmode read-more button hover fix


  • minor code refactoring


  • fix minor bugs & replace innerText with innerHTML


  • 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


  • add custom table headers


  • fix minor ui bugs on ie8


  • fix minor css bug


  • remove unused code


  • improve cookie-policy ui


  • bug fixed for IE 8/9.


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


  • cookie-policy-ui update


  • fix minor glitch on small screen devices


  • minor changes


  • fix double saved cookies


  • 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.

  2. Francisco Tazón Vega

    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


Leave a Reply