cookie-consent-js
Advanced tools
A simple dialog and framework to handle the EU law (as written by EuGH, 1.10.2019 – C-673/17) about cookies in a website.
A simple dialog and framework to handle the EU law (as written by EuGH, 1.10.2019 – C-673/17) about cookies in a website.
css or scss to fit your websiteThere are already language files for cz, de, en, es, fr, gr, it, oc and tr. If you add one, please make a pull request to have it added here as well, thanks.
Follow these easy steps to integrate the cookie settings in your page.
npm install cookie-consent-jsAlternatively you can download the git repository.
cookie-consent.css<link rel="stylesheet" href="/node_modules/cookie-consent-js/src/cookie-consent.css"/>
This should be done before any bootstrap or other frameworks css. You can overwrite styling in your projects css, take a look at cookie-consent.scss.
cookie-consent.js<script src="/node_modules/cookie-consent-js/src/cookie-consent.js"></script>
In your websites <head> or at the bottom of the <body>.
const cookieConsent = new CookieConsent({
contentUrl: "/node_modules/cookie-consent-js/cookie-consent-content", // location of the language files
privacyPolicyUrl: "/privacy-policy.html"
})
In props you should at least define contentUrl and privacyPolicyUrl. See below "Configuration properties".
<a href="javascript:cookieConsent.reset()">Cookie settings</a>
So the user can anytime reconfigure, if he wants tracking or not.
Client side JavaScript: Surround your tracking code with
if (cookieConsent.trackingAllowed()) {
// Google Analytics code and/or other tracking code
}
Server side PHP: Surround your tracking code with
if($_COOKIE['cookie-consent-tracking-allowed'] === 'true') {
// do some tracking
}
All other languages: Just read, if the cookie cookie-consent-tracking-allowed is "true"
...that's all! Contact me, if you have questions.
This framework writes a cookie (it's default name is cookie-consent-tracking-allowed)
with the value "true", if the user has accepted tracking. You can read the value with the JavaScript
API (cookieConsent.trackingAllowed()) or from any other language, server or client side, which can read cookies.
cookieConsent.reset()
Use this to allow the user to reconfigure the cookie settings, for example, in your service navigation as "Cookie settings".
cookieConsent.trackingAllowed()
Returns true if the user did accept tracking cookies. Use this function to disable tracking. Surround tracking code,
like the Google Analytics code with
if (cookieConsent.trackingAllowed()) {
// Google Analytics code and/or other tracking code
}
Read the cookie from a PHP server with
if($_COOKIE['cookie-consent-tracking-allowed'] === 'true') {
// do some tracking
}
With default values.
self.props = {
buttonPrimaryClass: "btn btn-primary", // the "accept all" buttons class, only used for styling
buttonSecondaryClass: "btn btn-secondary", // the "accept necessary" buttons class, only used for styling
autoShowModal: true, // disable autoShowModal on the privacy policy page, to make that page readable
blockAccess: false, // set "true" to block the access to the website before choosing a cookie configuration
position: "right", // position ("left" or "right"), if blockAccess is false
postSelectionCallback: undefined, // callback, after the user has made a selection
lang: navigator.language, // the language, in which the dialog is shown
defaultLang: "en", // default language, if the `lang` is not available as translation in `cookie-consent-content`
content: [], // deprecated, we now have a `content` folder, which contains the language files
contentUrl: "./cookie-consent-content", // the url of the "cookie-consent-content" folder, which contains the language files
privacyPolicyUrl: "privacy-policy.html",
cookieName: "cookie-consent-tracking-allowed", // the name of the cookie, the cookie is `true` if tracking was accepted
modalId: "cookieConsentModal" // the id of the modal dialog element
}
You can disable autoShowModal, for instance, in the privacy policy and legal notice pages to make these pages better
readable.
var cookieConsent = new CookieConsent({
autoShowModal: false,
privacyPolicyUrl: "privacy-policy.html",
contentUrl: "./cookie-consent-content"
})
See ./src/cookie-consent.scss and overwrite values as you need in your project's stylesheet.
You can use this banner for your website free of charge under the MIT-License.
The banner and framework was designed in cooperation with data protection officers and lawyers. However, we can not guarantee whether the banner is correct for your website and assume no liability for its use.
cookie-consent-js is a project of shaack.com.
FAQs
A simple dialog and framework to handle the EU law (as written by EuGH, 1.10.2019 – C-673/17) about cookies in a website.
The npm package cookie-consent-js receives a total of 113 weekly downloads. As such, cookie-consent-js popularity was classified as not popular.
We found that cookie-consent-js demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.