Stylish Multilingual GDPR & Cookie Consent Popup In Vanilla JavaScript

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


Stylish Multilingual GDPR & Cookie Consent Popup In Vanilla JavaScript


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();{
  onAccept: function(cookies){        
      cc.loadScript('', 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.{

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

// hide the cookie consent popup

// show cookie settings

// hide cookie settings

// allow cookie category

// check if a cookie is valid

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

// accept categories

// erase cookies

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.{
  page_scripts: true
<script data-src="/path/to/analytics.js" data-cookiecategory="analytics" defer></script>


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


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

  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