Cookie Consent
A lightweight JavaScript plugin to handle cookie consent.
It is designed to help you comply with data privacy laws like EU Cookie Law, European GDPR or California CCPA.
Installation
npm install @klaxit/cookie-consent
or
yarn add @klaxit/cookie-consent
or
<script src="https://cdn.jsdelivr.net/npm/@klaxit/[email protected]/dist/cookie-consent.js"></script>
NOTE: the latter isn't advised if you want to have one build for all your libraries. Mostly great for tests. And don't forget to replace X.Y.Z with current package version!
Usage
// Module
import CookieConsent from "@klaxit/cookie-consent"
// or (Classic)
const CookieConsent = window.CookieConsent
// Initialize the popup and open it
const cc = new CookieConsent({
title: "We use cookies 🍪",
// ... other options
})
// Events
cc.on("accept", (cc /* your CookieConsent instance */) => console.log("Accepted !"))
cc.on("reject", (cc) => console.log("Rejected !"))
cc.on("change", (cc) => console.log("Any change !"))
// All events can also be binded to `CookieConsent`.
// Main accessors
console.log(cc.status) // accepted, rejected
console.log(cc.acceptedCategories) // ["essential", "analytics"]
// also available under `CookieConsent`
// Re-open the popup to allow user to change its consent
cc.open()
// also available under `CookieConsent` once initialized
Options
Available configuration options are documented in default options.
Integration with trackers
You can see an example integration with Google Analytics in examples/index.ejs.
If you want to try further, git clone [email protected]:klaxit/cookie-consent && yarn && yarn start
will
run this example.
By using the interface described above, you should be able to load scripts on demand depending on the three given events.
Custom design
We won't integrate custom themes BUT
we will do our best to keep current HTML structure and CSS classes in place. And use semantic versioning to indicate any breaking change. So you can rely on these to build your own !
Internationalization (i18n) ?
To keep things as simple as possible, and because there are many ways to handle i18n, we didn't provide built-in i18n capabilities. But you can easily support multiple languages by doing something like this :
const userLang = navigator.language || navigator.userLanguage
const titles = {
"fr-FR": "Nous utilisons des cookies",
"default": "We use cookies"
}
const cc = new CookieConsent({
title: titles[userLang] || titles["default"],
// ...
})
Compatibility
We do our best to support these configurations.
Browsers
DEVICE | BROWSER | VERSIONS |
---|---|---|
DESKTOP | Chrome | N / N-1 |
DESKTOP | Safari | N / N-1 |
DESKTOP | Firefox | N / N-1 |
DESKTOP | MS Edge | N / N-1 |
DESKTOP | Samsung internet | N / N-1 |
DESKTOP | Opera | N / N-1 |
DESKTOP | IE | 11 |
Definitions
Minimum supported definition is 320 x 568.
License
Please see LICENSE