CookieConsent v3.0.0

A lightweight, GDPR and CCPA compliant Consent Management Tool written in vanilla JS.

Welcome to the playground!

This page allows you to create a starter config. for CookieConsent v3 and also see it in action.

New Google requirements 🚨

Google AdSense, Ad Manager and AdMob will no longer work with CookieConsent ...

Categories ?

Select the applicable cookie categories for your website.

Translations ?

Select the translations to include in your configuration.

Language options ?

Detected language: -

Translation loaded: -

Current language: -

GUI Options ?

Preferences Modal

Misc

Themes ?

Light Funky (CSS)
.cc--light-funky {
    color-scheme: light;

    --cc-bg: #f9faff;
    --cc-primary-color: #112954;
    --cc-secondary-color: #112954;

    --cc-btn-primary-bg: #3859d0;
    --cc-btn-primary-color: var(--cc-bg);
    --cc-btn-primary-hover-bg: #213657;
    --cc-btn-primary-hover-color: #fff;

    --cc-btn-secondary-bg: #dfe7f9;
    --cc-btn-secondary-color: var(--cc-secondary-color);
    --cc-btn-secondary-hover-bg: #c6d1ea;
    --cc-btn-secondary-hover-color: #000;

    --cc-cookie-category-block-bg: #ebeff9;
    --cc-cookie-category-block-border: #ebeff9;
    --cc-cookie-category-block-hover-bg: #dbe5f9;
    --cc-cookie-category-block-hover-border: #dbe5f9;
    --cc-cookie-category-expanded-block-hover-bg: #ebeff9;
    --cc-cookie-category-expanded-block-bg: #ebeff9;

    --cc-overlay-bg: rgba(219, 232, 255, 0.85)!important;

    --cc-toggle-readonly-bg: #cbd8f1;
    --cc-toggle-on-knob-bg: var(--cc-bg);
    --cc-toggle-off-bg: #8fa8d6;
    --cc-toggle-readonly-knob-bg: var(--cc-bg);

    --cc-separator-border-color: #f1f3f5;

    --cc-footer-border-color: #f1f3f5;
    --cc-footer-bg: var(--cc-bg);

    --cc-btn-border-radius: 1rem .6rem 1.3rem .5rem / .5rem 1rem;
    --cc-modal-border-radius: var(--cc-btn-border-radius);
    --cc-pm-toggle-border-radius: var(--cc-btn-border-radius);
}

.cc--light-funky #cc-main .toggle__icon:after {
    border-radius: var(--cc-btn-border-radius);
}

.cc--light-funky #cc-main .cm__btn--close {
    border-radius: var(--cc-btn-border-radius);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
Dark Turquoise (CSS)
.cc--dark-turquoise {
    color-scheme: dark;

    --cc-bg: #161a1c;
    --cc-primary-color: rgb(239, 244, 246);
    --cc-secondary-color: #b1bdc3;

    --cc-btn-primary-bg: #60fed2;
    --cc-btn-primary-color: #000;
    --cc-btn-primary-hover-bg: #4dd4ae;
    --cc-btn-primary-hover-color: #000;

    --cc-btn-secondary-bg: #242c31;
    --cc-btn-secondary-color: var(--cc-primary-color);
    --cc-btn-secondary-hover-bg: #d4dae0;
    --cc-btn-secondary-hover-color: #000;

    --cc-cookie-category-block-bg: #1e2428;
    --cc-cookie-category-block-border: #1e2428;
    --cc-cookie-category-block-hover-bg: #242c31;
    --cc-cookie-category-block-hover-border: #242c31;
    --cc-cookie-category-expanded-block-hover-bg: #242c31;
    --cc-cookie-category-expanded-block-bg: #1e2428;
    --cc-toggle-readonly-bg: #343e45;
    --cc-overlay-bg: rgba(4, 6, 8, .85)!important;

    --cc-toggle-on-knob-bg: var(--cc-bg);
    --cc-toggle-readonly-knob-bg: var( --cc-cookie-category-block-bg);

    --cc-separator-border-color: #222a30;

    --cc-footer-border-color: #212529;
    --cc-footer-bg: #0f1112;
}
Elegant Black (CSS)
.cc--elegant-black {
    color-scheme: dark;

    --cc-bg: #000;
    --cc-primary-color: rgb(239, 244, 246);
    --cc-secondary-color: #b1bdc3;

    --cc-btn-primary-bg: #ffffff;
    --cc-btn-primary-color: #000;
    --cc-btn-primary-hover-bg: #ccd4d8;
    --cc-btn-primary-hover-color: #000;

    --cc-btn-secondary-bg: rgba(255, 255, 255, 0.039);
    --cc-btn-secondary-color: var(--cc-primary-color);
    --cc-btn-secondary-border-color: #252729;
    --cc-btn-secondary-hover-bg: #252729;
    --cc-btn-secondary-hover-color: #fff;
    --cc-btn-secondary-hover-border-color: #252729;

    --cc-cookie-category-block-bg: #101111;
    --cc-cookie-category-block-border: #1d1e1f;
    --cc-cookie-category-block-hover-bg: #151516;
    --cc-cookie-category-block-hover-border: #1d1e1f;
    --cc-cookie-category-expanded-block-hover-bg: #1d1e1f;
    --cc-cookie-category-expanded-block-bg: #101111;
    --cc-toggle-readonly-bg: #2f3132;
    --cc-overlay-bg: rgba(0, 0, 0, 0.9)!important;

    --cc-toggle-on-knob-bg: var(--cc-bg);
    --cc-toggle-readonly-knob-bg: var( --cc-cookie-category-block-bg);

    --cc-separator-border-color: #252729;

    --cc-footer-border-color: #212529;
    --cc-footer-bg: #000;
}

.cc--elegant-black #cc-main .cm,
.cc--elegant-black #cc-main .pm {
    border: 1px solid var(--cc-separator-border-color);
}

Installation ?

  1. Download the cookieconsent-config.js javascript file:

  2. Add the script in the <body> tag:

    <script type="module" src="cookieconsent-config.js"></script>
    
  3. Add the stylesheet in the <head> tag:

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orestbida/cookieconsent@/dist/cookieconsent.css">
    

Next steps

How to block iframes

You can use iframemanager for this task.

Need help?

Check out the documentation!

If you can't find what you're looking for, feel free to open an issue or a discussion on github.