CookieConsent v3.0.0

CookieConsent Playground

Pick your options, watch the banner on this page change, and copy the config when it looks right. Free, open source and written in plain JavaScript.

Start building Read the docs

Cookie categories ?

Pick the kinds of cookies your website uses. Visitors get an on/off switch for each one.

Languages ?

Pick the languages of your banner, then change its texts with "Edit translations".

Which language to show ?

Detected language
-
Translation available
-
Shown language
-

Layout ?

Where the banner appears and how its buttons look. Every change is previewed right away.

Consent modal

The banner visitors see first.

Preferences modal

Where visitors switch categories on or off.

Theme ?

The built-in themes need no extra CSS. For a custom theme, also copy its CSS (below) into your stylesheet; the config already adds the theme's class.

Light Funky theme 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 theme 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 theme 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);
}

Add it to your website ?

Four small changes to your page and your banner is live.

  1. Save your config as cookieconsent-config.js next to your HTML page: use Copy or Download on the config panel.

  2. Load the stylesheet in the <head> and your config at the end of the <body>:

    <!DOCTYPE html>
<html lang="en">
<head>
    <!-- ... -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orestbida/cookieconsent@/dist/cookieconsent.css">
</head>
<body>
    <!-- ... your page ... -->

    <script type="module" src="cookieconsent-config.js"></script>
</body>
</html>

  3. Stop your scripts from running until the visitor agrees. Change type to "text/plain" and add data-category with the name of one of your categories:

    Before
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
    After
    <script type="text/plain" data-category="analytics" async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>

    The script now runs only after the visitor accepts the analytics category. More about blocking scripts · for iframes (YouTube, maps…) use iframemanager.

  4. Let visitors change their choice later, for example from a link in your footer:

    <button type="button" data-cc="show-preferencesModal">Cookie preferences</button>

    Any element with data-cc="show-preferencesModal" opens the preferences modal. More about this