GDPR banner to comply with the European cookie law. Inspired by tarteaucitronjs.
npm install gdpr-consent

Comply to the european cookie law.
Inspired by AmauriC/tarteaucitron.js
The european cookie law regulates the management of cookies and you should ask your visitors their consent before exposing them to third party services.
Clearly this script will:
- Disable all services by default,
- Display a banner on the first page view and a small one on other pages,
- Display a panel to allow or deny each services one by one,
- Activate services on the second page view if not denied,
- Store the consent in a cookie for 365 days.
The prebuilt CSS/JS files can be found in the build folder.
```
build/gdpr-consent.css
build/gdpr-consent.js
To add the GDPR banner you need to add these lines at the end of the
section`html
`You can then configure your services by adding these lines at the end of the
section`html
`Custom bundler
You can also use this module with you own bundler.
$3
You can change the style of the banner with these variables.
`scss
@use "node_modules/gdpr-consent/src/css/gdpr-consent" with (
/ Override GDPR Consent variables /
$gdprcst-font-family-title: (
"Archer SSm A",
"Archer SSm B",
"Helvetica Neue",
helvetica,
arial,
sans-serif
),
$gdprcst-font-family-text: (
"proxima-nova",
"Helvetica Neue",
helvetica,
arial,
sans-serif
),
$gdprcst-color-light: #fff,
$gdprcst-color-dark: #414141,
$gdprcst-color-mid: #c83e2c,
$gdprcst-shadow-color: rgb(87 87 87 / 25%)
);
`$3
You can use the
GDPRConsent.withLanguages & GDPRConsent.withServices to change the available set of languages & services.
These methods allow you to create custom builds of this module with more or less elements.`js
import { GDPRConsent, languages, services } from "gdpr-consent";// Load languages
const { getLanguages } = languages;
GDPRConsent.withLanguages(getLanguages);
// Load services
const { twitter, facebook, youtube, vimeo } = services;
GDPRConsent.withServices((gdprConsentUser) => {
return {
twitter: twitter(gdprConsentUser),
facebook: facebook(gdprConsentUser),
youtube: youtube(gdprConsentUser),
vimeo: vimeo(gdprConsentUser),
};
});
``