CookieConsent demo — Orest Bida

Demo playground

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

Toggle dark theme

Toggle force_consent

Toggle auto_language

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

enable the page_scripts option:

cookieconsent.run({
    //...
    page_scripts: true,
    //...
});

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

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

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.

Demo playground

Themes

How to block third party scripts

API

How to open settings modal without using API

How to block iframes