A full featured, small (8K) and easy to use library to show a cookie consent banner on your website. It is fully tested and GDPR/DSGVO ready.
In use by this companies/people:
- ADDITIVE GmbH
- Open an issue, if you want to get added.
npm install gdpr-cookie-consent-bannerThe company I've been working at had several discussion with their data protection officer. In Germany and the EU we must do so called "opt-in" for all cookies. After several weeks we came up with the following requirements: fully opt-in without any preselected options (or option to preselect), a easy to enhance plugin and simple cookie controls for customizability. The search began and very soon I have recognised that there is no solution that fits all or only solutions that match one case or the many that do the same. Most of the "gdpr complient" plugins had bad code, to difficult to change the HTML, CSS or had no hooks to customize events. So that is why I created this.
By default this plugin will create a banner with a functional capability, those are for initial hide the banner and save user choices. If you add capabilities by yourself you need to add this capability again, because they will not be merged with your config.
For the most, the example configuration with Google Analytics may be enough but if you need to customize it feel free to do so. The plugin can be used for everything related to cookies with consent opt-in/out. Go to the advanced section to find out more.
Examples (those you see in the demo) can be found here:
src/docs/components/consent(2)
NOTE: you must set all attributes like checked and disabled in JS as well, this plugin does not save your default settings nor override HTML attribute values for you.
<head>
<link rel="stylesheet" href="/path/to/cookie-consent.css" />
<script async defer src="/path/to/cookie-consent.umd.js"></script>
</head>
<body>
<div
id="cookiebanner"
class="cookiebanner"
aria-label="Edit your cookie settings"
role="banner"
>
<div class="info">
<div class="title">Your Cookie Controls</div>
<div class="description">
This displays the plugin with its default configuration.
</div>
</div>
<div class="choices">
<label class="choice" htmlFor="choice-functional2">
<input type="checkbox" name="choice:functional" id="choice-functional2" checked />
<div class="name">Functional</div>
</label>
</div>
<div class="buttons">
<button class="reject">Reject choices</button>
<button class="accept">Accept choices</button>
</div>
</div>
<div
id="cookienotice"
class="cookienotice"
aria-label="Show the cookie settings again"
role="button"
>
<img src="/assets/cookie.svg" alt="A shield which represents privacy" />
</div>
</body>JavaScript:
/* to modify cookies use this static class */
const Coookie = CookieConsent.cookie
window.consent = new CookieConsent({
/* options */
})HTML:
Same as in UMD build.
JavaScript:
import CookieConsent from 'gdpr-cookie-consent-banner'
// or
const CookieConsent = require('gdpr-cookie-consent-banner')
/* to modify cookies use this static class */
const Coookie = CookieConsent.cookie
window.consent = new CookieConsent({
/* name: "my-consent-name" */
})| Option | Default | Type | Description |
|---|---|---|---|
name |
cookie-consent |
string | The name of your cookie. |
banner |
src/lib/consent.js@defaultOptions |
HTMLElement | The banner html element. |
notice |
src/lib/consent.js@defaultOptions |
HTMLElement | The notice html element. |
linkOnly |
false |
boolean | If the notice is a link or should be a floating element. |
onRejectEnd |
src/lib/consent.js@defaultOptions |
Function | Called when all onReject events ran. |
onAcceptEnd |
src/lib/consent.js@defaultOptions |
Function | Called when all onAccept events ran. |
capabilities |
see Advanced | Capability[] | Capabilities you want to apply. |
NOTE: When you add
capabilitiesyou will override thedefaultOptions.capabilities. When you don't need them OK but if you need the functionality from thefunctionalcapability copy it yourself into your code → src/lib/consent.js@defaultOptions.
| Option | Default | Type | Description |
|---|---|---|---|
name |
functional |
string | Capability name. Must match with checkbox name convention of choice:<name>. |
checked |
true |
boolean | Initial state of the checkbox. Must match with input attribute checked. |
onReject |
(CookieConsent) => {...} |
Event | A callback if this capability gets rejected. |
onAccept |
(CookieConsent) => {...} |
Event | A callback if this capability gets accepted. |
onUpdate |
(CookieConsent, params) => {...} |
Event | A callback if this capability gets updated. |
onValueChanged |
(CookieConsent, params) => {...} |
Event | A callback if this capability value has changed. |
Have a look at the demo to see advanced
functionalities in action or the source of it, which you can find in
src/docs. The docs are written in preact so the actual consent component
lives in components and includes a full Google Analytics example.
Every event hook has acccess to the CookieConsent instance and all its functions. Some
others also provide params. Below is a list of what is available with examples.
Inside CookieConsent lives a static class with some utilities to work with cookies. Here
is a list of all functions, also have a look at the Google Analytics
example below.
set(...): set/create a new cookienamevaluedomainpathmaxAge(default:7)securesameSite(default:Lax)
get(...): get a cookie by its namename
getAll(): get all cookiesfind(...): find a cookie that match given string/regexregex: string or regex, e.g.g_or/^g_/g
delete(...): delete a cookie by its name and optionsnamedomainpath
deleteAll(): deletes all cookiesdomainpath
clear(thatMatch, withOptions): clear all cookies that match given string/regexregex: string or regex, e.g.g_or/^g_/gdomainpath
Is called when the user gives consent or not.
consent(CookieConsent):src/lib/consent.js
const onConsent = (consent) => {
const choices = consent.getChoices()
consent.saveUserOptions({ choices, consented: true })
}consent(CookieConsent):src/lib/consent.js
const onRejectEnd = (consent) => {
window.location.reload()
}consent(CookieConsent):src/lib/consent.js
const onAcceptEnd = (consent) => {
const choices = consent.getChoices()
consent.saveUserOptions({ choices })
}consent(CookieConsent):src/lib/consent.js
const onReject = (consent) => {
consent.removeUserOptions()
}consent(CookieConsent):src/lib/consent.js
const onAccept = (consent) => {
consent.saveUserOptions({ consented: true })
}Triggers when the choice is updated
consent(CookieConsent):src/lib/consent.jschoice(Choice): user choice for this capability
const onUpdate = (consent, { choice }) => {
console.log('Value is:', choice)
}Triggers when the value has changed
consent(CookieConsent):src/lib/consent.jschoice(Choice): user choice for this capability
const onValueChange = (consent, { choice }) => {
console.log('Value is:', choice)
}- Create plugin system, so Google Analytics does not need to be setup by someone itself
- Option to create the banner without defining the HTML somewhere
- Allow notice to be just a link
This is an example of a working Google Analytics configuration (as seen in the docs).
window.onload = function() {
window.consent = new CookieConsent({
capabilities: [
{
name: 'functional',
checked: true,
onAccept: (consent) => {
consent.saveUserOptions({ consented: true })
},
},
{
name: 'analytics',
checked: false,
onReject: () => {
if (CookieConsent.cookie.find('_g')) {
CookieConsent.cookie.clear('_g', '.' + window.location.hostname, '/')
}
},
onAccept: () => {
if (CookieConsent.cookie.find('ga-disable')) {
return
}
const gaAddress = 'https://www.google-analytics.com/analytics.js'
;(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', gaAddress, 'ga')
ga('create', 'UA-XXXXXX-XX', window.location.hostname)
ga('set', 'forceSSL', true)
ga('set', 'anonymizeIp', true)
ga('send', 'pageview')
},
},
],
})
}<div
id="cookiebanner"
class="cookiebanner"
aria-label="Edit your cookie settings"
role="banner"
>
<div class="info">
<div class="title">Your Cookie Controls</div>
<div class="description">Paste some info for your users here.</div>
</div>
<div class="choices">
<label class="choice" for="choice-functional">
<input
type="checkbox"
name="choice:functional"
id="choice-functional"
checked
disabled
/>
<div class="name">Functional with a very long long long long long</div>
</label>
<label class="choice" for="choice-analytics">
<input type="checkbox" name="choice:analytics" id="choice-analytics" />
<div class="name">Analytics</div>
<p class="info">Google Tag Manager will be enabled here.</p>
</label>
</div>
<div class="buttons">
<button class="reject">Reject choices</button>
<button class="accept">Accept choices</button>
</div>
</div>
<div
id="cookienotice"
class="cookienotice"
aria-label="Show the cookie settings again"
role="button"
>
<img src="/assets/cookie.svg" alt="Cookie icon" />
</div>