Check out the new CookieConsent v3.0.0 release!🎉

CkieConsent v2.9.1

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 plugin will reset after each setting change (for demo purposes only)





Themes

Dark Turquoise (CSS)
.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)
.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;
}
Darker Blue (CSS)
.theme_blue {
    --cc-bg: #000000;
    --cc-text: #b8bfcc;
    --cc-btn-primary-bg: #8892ec;
    --cc-btn-primary-text: var(--cc-bg);
    --cc-btn-primary-hover-bg: #555faf;
    --cc-btn-secondary-bg: #1d2029;
    --cc-btn-secondary-text: #bdc2d6;
    --cc-btn-secondary-hover-bg: #16161f;
    --cc-toggle-bg-off: #000000;
    --cc-toggle-bg-on: #3a3da9;
    --cc-toggle-bg-readonly: #1b2029;
    --cc-toggle-knob-bg: #b3c6fd;
    --cc-toggle-knob-icon-color: #8892ec;
    --cc-block-text: var(--cc-text);
    --cc-cookie-category-block-bg: #111317;
    --cc-cookie-category-block-bg-hover: #15181d;
    --cc-section-border: #000000;
    --cc-cookie-table-border: #1d2029;
    --cc-overlay-bg: rgba(15, 16, 21, .9);
    --cc-webkit-scrollbar-bg: #2b2c3c;
    --cc-webkit-scrollbar-bg-hover: #8892ec;
}

.theme_blue #c-ttl,
.theme_blue #s-bl td:before,
.theme_blue #s-ttl,
.theme_blue .cc_div .b-tl,
.theme_blue .cc_div .c-bn,
.theme_blue .cc_div a{
    color: #b8c2e6;
}

.theme_blue #s-bl .c-bl{
    border-color: #111317;
}

.theme_blue .cc_div .b-tg,
.theme_blue .cc_div .b-tg .c-tg,
.theme_blue .cc_div .c-tgl,
.theme_blue .cc_div span.t-lb,
.theme_blue .cc_div .c-bn,
.theme_blue #cm,
.theme_blue #s-bl .act .b-acc,
.theme_blue #s-inr,
.theme_blue .cc_div .b-tl,
.theme_blue .cc_div .c-bl,
.theme_blue .cc_div .b-tg .c-tg:after{
    border-radius: 0;
}
🤔 How to use custom themes
  • Copy the CSS inside a <style> tag or inside a .css file.
  • Add the theme's class to the body element; e.g. <body class="theme_funky">

Add class via javascript
document.body.classList.add('theme_funky');

How to block third party scripts

API

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

Check out the docs for more examples and details.

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

Create a button or link with the data-cc="c-settings" attribute:

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

How to block iframes

You can use iframemanager for this task.