CookieConsent v3.x.x

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

Documentation | Live demos

Page under construction! 🚧

Some config. parameters are missing or don't work.

New Google requirements 🚨

Google ads related product will no longer work with CookieConsent!

Categories & Translations

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 ?

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;
}
Light Funky (CSS)
.cc--light-funky {
    --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);
}


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">