CkieConsent v2.8.9

A lightweight & gdpr compliant cookie consent plugin written in plain javascript. An "all-in-one" solution which also allows you to write your cookie policy inside it without the need of having a dedicated page.

Documentation | iframemanager

Demo playground

Note: the cookieconsent will reset after each setting change (for demo purposes only)





Themes


Dark Turquoise (CSS)

Add theme_turquoise class to parent container to enable

.theme_turquoise{
    --cc-bg: #161a1c;
    --cc-text: #d8e5ea;
    --cc-btn-primary-bg: #60fed2;
    --cc-btn-primary-text: #000;
    --cc-btn-primary-hover-bg: #4dd4ae;
    --cc-btn-secondary-bg: #242c31;
    --cc-btn-secondary-text: var(--cc-text);
    --cc-btn-secondary-hover-bg: #2b353c;
    --cc-toggle-bg-off: #667481;
    --cc-toggle-bg-on: var(--cc-btn-primary-bg);
    --cc-toggle-bg-readonly: #343e45;
    --cc-toggle-knob-bg: var(--cc-cookie-category-block-bg);
    --cc-toggle-knob-icon-color: var(--cc-bg);
    --cc-cookie-category-block-bg: #1e2428;
    --cc-cookie-category-block-bg-hover: #242c31;
    --cc-section-border: #222a30;
    --cc-block-text: #bac9cf;
    --cc-cookie-table-border: #2b3035;
    --cc-overlay-bg: rgba(4, 6, 8, .85);
    --cc-webkit-scrollbar-bg: #2c343a;
    --cc-webkit-scrollbar-bg-hover: #384148;
}

.theme_turquoise .cc_div a{
    color: var(--cc-btn-primary-bg);
}

.theme_turquoise #cc_div #s-hdr{
    border-bottom: none;
}

.theme_turquoise .cc_div #c-txt{
    color: #b0b8c6!important;
}
Light Funky (CSS)

Add theme_funky class to parent container to enable

.theme_funky{
    --cc-bg: #f9faff;
    --cc-text: #112954;
    --cc-btn-primary-bg: #3859d0;
    --cc-btn-primary-text: var(--cc-bg);
    --cc-btn-primary-hover-bg: #1d2e38;
    --cc-btn-secondary-bg: #dfe7f9;
    --cc-btn-secondary-text: var(--cc-text);
    --cc-btn-secondary-hover-bg: #c6d1ea;
    --cc-toggle-bg-off: #8fa8d6;
    --cc-toggle-bg-on: #3859d0;
    --cc-toggle-bg-readonly: #cbd8f1;
    --cc-toggle-knob-bg: #fff;
    --cc-toggle-knob-icon-color: #ecf2fa;
    --cc-block-text: var(--cc-text);
    --cc-cookie-category-block-bg: #ebeff9;
    --cc-cookie-category-block-bg-hover: #dbe5f9;
    --cc-section-border: #f1f3f5;
    --cc-cookie-table-border: #e1e7f3;
    --cc-overlay-bg: rgba(230, 235, 255, .85);
    --cc-webkit-scrollbar-bg: #ebeff9;
    --cc-webkit-scrollbar-bg-hover: #3859d0;
}

.theme_funky #c-ttl{
    color: var(--cc-btn-primary-bg);
}

/* Custom border radius */
.theme_funky #cm,
.theme_funky #s-bl .act .b-acc,
.theme_funky #s-inr,
.theme_funky .cc_div .b-tl,
.theme_funky .cc_div .c-bl{
    border-radius: 1.2em;
}

.theme_funky .cc_div .c-bn{
    border-radius: .7em;
}

How to block third party scripts

  1. enable page_scripts option:

    cookieconsent.run({
        //...
        page_scripts: true,
        //...
    });
  2. set type="text/plain" and data-cookiecategory="<category>" to any script you want to manage via the cookieconsent:

    <script type="text/plain" data-cookiecategory="analytics">
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
    
        ga('create', 'UA-XXXXX-Y', 'auto');
        ga('send', 'pageview');
    </script>
    
    <script type="text/plain" data-cookiecategory="marketing" src="./assets/js/my_custom_script.js" defer></script>

Note: the value of the data-cookiecategory attribute must correspond to one of the categories defined in the cookieconsent configuration code!

Available API

cookieconsent.run(<config-object>);
cookieconsent.show(<optional-delay>);
cookieconsent.showSettings(<optional-delay>);
cookieconsent.hide();
cookieconsent.hideSettings();

More API (check docs. for more examples)

cookieconsent.accept('all', ['marketing']);             // accept all categories except "marketing"
cookieconsent.allowedCategory('analytics');             // check if "analytics" category is accepted
cookieconsent.validCookie('_gid');                      // check if "_gid" cookie is valid (exists and is not empty)
cookieconsent.eraseCookies(['cc_cookie']);              // erase cookies (only if exist)
cookieconsent.loadScript("./assets/js/my_script.js");
cookieconsent.updateScripts();
cookieconsent.set('data', {value: 21})                  // save custom data into the cookie
cookieconsent.get('data');                              // retrieve field from cookie
cookieconsent.getUserPreferences();                     // accept type, accepted/rejected categories
cookieconsent.getConfig();
cookieconsent.updateLanguage('de');               		// dynamically update/change modal's language

How to open settings modal without using API

Simply create a button or link with data-cc="c-settings" attribute:

<button type="button" data-cc="c-settings">Cookie preferences</button>