Cookieconsent Script

A script that displays a cookie consent message as required by EU regulation (GDPR). The plugin displays a message on the user's first visit and they have the ability to consent to different categories of cookies and services.

See the demo: Cookieconsent

Default look

Cookieconsent modal

Features

Four different blocking methods
Multilingual
Mobile ready

Currently it can block all the bad cookie monsters in 4 ways:

Dynamic script tags

Some services insert dynamically created SCRIPT tags to the HEAD at page load. These can be intercepted and blocked.

Script tag blocking

Some third party services require you to insert a SCRIPT tag into your HTML pages. These can be inactivated until the user allowes them.

Script wrapping

Some services are not inserted in a SCRIPT tag and are obscured by layers of other code. Thats why this script creates a global wrapper function what you can use to wrap and block any JS code.

Local cookies

Finally the local cookies set on your domain can be also filtered by overriding the bowsers COOKIE SET method.

Usage

Download the file cookieconsent.zip from the latest release and unpack its content.
Include the script file into your HTML page before everything else.

<script src="cookieconsent.js"></script>

Call the init() function with the configuration object.

See a working example in the docs folder.

Configuration object

The script is being controlled mainly by a configuration object which is passed to the inital call. It acts as configuration and a global state object.

<script>
  window.CookieConsent.init({
    // How long to wait until bar or initial modal comes up.
    UITimeout: 1000,
    // Show 'bar' or 'modal' initial layout
    mode: 'bar'
    // Show the 'reject all cookies' button. It's false by default.
    showRejectAllButton: false,
    // Look and feel.
    theme: {
      barColor: '#2C7CBF',
      barTextColor: '#FFF',
      barMainButtonColor: '#FFF',
      barMainButtonTextColor: '#2C7CBF',
      modalMainButtonColor: '#4285F4',
      modalMainButtonTextColor: '#FFF',
      focusColor: 'rgb(853 238 52 / 75%)'
    },

    // You can declare a 'customCSS' property to partially customize the default CSS instead of customizing specific properties described on the 'theme' object. The value of this property should be a template string as in the example. Bear in mind that this style will be injected in the document body.
    customCSS: `
      #cconsent-bar, #cconsent-bar * { box-sizing:border-box; }
      #cconsent-bar .visually-hide, #cconsent-modal .visually-hide { position: absolute !important; overflow: hidden !important; clip-path: rect(1px 1px 1px 1px) !important; width: 1px !important; height: 1px !important; }
      #cconsent-bar { background-color: red; color: black; padding:15px; text-align:right; font-family:inherit; font-size:14px; line-height:18px; position:fixed; bottom:0; inset-inline:0; z-index:9998; transform: translateY(0); transition: transform .6s ease-in-out; transition-delay: .3s;}
      #cconsent-bar.ccb--hidden {transform: translateY(100%); display:block; visible:hidden;}
    `,

    // Optionally, you have the chance to fully override the CSS as per your requirements. This options gives you full freedom but you'll have to declare CSS for the UI elements. The resulted style will be injected in the document head.
    fullCSSOverride: `
      #cconsent-bar, #cconsent-bar * { box-sizing:border-box }
      #cconsent-bar .visually-hide, #cconsent-modal .visually-hide { position: absolute !important; overflow: hidden !important; clip-path: rect(1px 1px 1px 1px) !important; width: 1px !important; height: 1px !important; }
      #cconsent-bar { background-color: #2b7abb; color: #fff; padding:15px; text-align:right; font-family:inherit; font-size:14px; line-height:18px; position:fixed; bottom:0; inset-inline:0; z-index:9998; transform: translateY(0); transition: transform .6s ease-in-out; transition-delay: .3s;}
      #cconsent-bar.ccb--hidden {transform: translateY(100%); display:block; visible:hidden;}
      #cconsent-bar .ccb__wrapper { display:flex; flex-wrap:wrap; justify-content:space-between; max-width:1800px; margin:0 auto;}
      #cconsent-bar .ccb__left { align-self:center; text-align:left; margin: 15px 0;}
      #cconsent-bar .ccb__right { align-self:center; white-space: nowrap;}
      #cconsent-bar .ccb__right > div {display:inline-block; color:#FFF;}
      #cconsent-bar button { line-height:normal; font-size:14px; border:0; padding:10px 10px; color: #2b7abb;}
      #cconsent-bar button.consent-give { line-height:normal; font-size:14px; border:none; padding:10px 10px; color: #2b7abb; background-color: #fff;}
      #cconsent-bar button.consent-decline { line-height:normal; font-size:14px; border:none; padding:10px 10px; color: #fff; background-color: #2b7abb; margin-right: 10px; border: 1px solid #fff}
      #cconsent-bar button.ccb__edit { appearance:none; margin-right:15px; border:0; padding:0; text-decoration:underline; color: #fff; background:none; }
      #cconsent-bar a:hover, #cconsent-bar button:hover { cursor:pointer; }
      #cconsent-bar button:focus-visible {box-shadow: 0 0 0 2px rgb(40 168 52 / 75%);}
      #cconsent-modal, #cconsent-init-modal { display:none; font-size:14px; line-height:18px; color:#666; width: 100vw; height: 100vh; position:fixed; left:0; top:0; right:0; bottom:0; font-family:sans-serif; font-size:14px; background-color:rgba(0,0,0,0.6); z-index:9999; align-items:center; justify-content:center;}
      @media (max-width: 600px) { #cconsent-modal, #cconsent-init-modal { height: 100% } }
      #cconsent-modal button, #cconsent-init-modal button { border: 0 }
      #cconsent-modal strong, #cconsent-init-modal strong {color:#333; margin-top:0}
      #cconsent-modal.ccm--visible, #cconsent-init-modal.ccm--visible {display:flex}
      #cconsent-modal .ccm__content, #cconsent-init-modal .ccm__content { max-width:600px; max-height:600px; overflow-Y:auto; background-color:#EFEFEF; display:flex; flex-direction:column; justify-content:space-between; }
      @media (max-width: 600px) { #cconsent-modal .ccm__content, #cconsent-init-modal .ccm__content { max-width:100vw; height:100%; max-height:initial; }}
      #cconsent-modal .ccm__content > .ccm__content__heading, #cconsent-init-modal .ccm__content > .ccm__content__heading { border-bottom:1px solid #D8D8D8; padding:35px 35px 20px; background-color:#EFEFEF; position:relative; }
      #cconsent-modal .ccm__content > .ccm__content__heading strong, #cconsent-init-modal .ccm__content > .ccm__content__heading strong { font-size:21px; font-weight:600; color:#333; margin:0 }
      #cconsent-modal .ccm__content > .ccm__content__heading p, #cconsent-init-modal .ccm__content > .ccm__content__heading p { margin-top:1rem; margin-bottom:1rem; }
      #cconsent-modal .ccm__content > .ccm__content__heading .ccm__cheading__close, #cconsent-init-modal .ccm__content > .ccm__content__heading .ccm__cheading__close { appearance:none; padding:0; border:0; font-weight:600; color:#888; cursor:pointer; font-size:26px; position:absolute; right:15px; top:15px; width:26px; height:26px; background:none; text-align:center; }
      #cconsent-modal .ccm__content > .ccm__content__heading .ccm__cheading__close:focus-visible, #cconsent-init-modal .ccm__content > .ccm__content__heading .ccm__cheading__close:focus-visible { box-shadow: 0 0 0 0.25rem rgb(40 168 52 / 75%); }
      #cconsent-modal .ccm__content > .ccm__content__body { background-color:#FFF; }
      #cconsent-modal .ccm__content > .ccm__content__body .ccm__tabgroup { margin:0; border-bottom: 1px solid #D8D8D8; }
      #cconsent-modal .ccm__content > .ccm__content__body .ccm__tab-head {color:#333; font-weight:600; cursor:pointer; position:relative; padding:0; margin:0; transition: background-color .5s ease-out; }
      #cconsent-modal .ccm__content > .ccm__content__body .ccm__tab-head:hover { background-color:#F9F9F9 }
      #cconsent-modal .ccm__content > .ccm__content__body .ccm__tab-head__status { order: 1; position:absolute; left:35px; font-weight: 600; display:inline-block; margin-right: 20px; pointer-events: none; }
      #cconsent-modal .ccm__content > .ccm__content__body .ccm__tab-head__status.ccm__tab-head__status--checked { font-size:1em; color:#28a834; }
      #cconsent-modal .ccm__content > .ccm__content__body .ccm__tab-head__status.ccm__tab-head__status--unchecked { font-size:1.4em; color:#e56385; }
      #cconsent-modal .ccm__content > .ccm__content__body .ccm__tab-head__text { order: 2; pointer-events: none; }
      #cconsent-modal .ccm__content > .ccm__content__body .ccm__tabgroup .ccm__tab-head .ccm__tab-head__icon-wedge { transition: transform .3s ease-out; transform-origin: center; position:absolute;right:25px; top:50%; transform:rotate(0deg); transform:translateY(-50%); order: 3;}
      #cconsent-modal .ccm__content > .ccm__content__body .ccm__tabgroup .ccm__tab-head .ccm__tab-head__icon-wedge > svg { pointer-events: none; }
      #cconsent-modal .ccm__content > .ccm__content__body .ccm__tabgroup.ccm__tabgroup--open .ccm__tab-head .ccm__tab-head__icon-wedge { transform:translateY(-50%) rotate(-180deg) }
      #cconsent-modal .ccm__tab-trigger { appearance: none; background: none; display: flex; flex-direction: row; width: 100%; padding:17px 35px 17px 56px; color:#333; font-weight:600; }
      #cconsent-modal .ccm__tab-trigger:focus-visible {box-shadow: 0 0 0 2px rgb(40 168 52 / 75%);}
      #cconsent-modal .ccm__content > .ccm__content__body .ccm__tab-content {padding:0; margin:0}
      #cconsent-modal .ccm__content > .ccm__content__body .ccm__tabgroup .c

Cookieconsent

Install / Use

README