Awesome one-of-a-kind Cookie Consent panel.
- Key features
- How to install
- Translations
- Theme Customisation
- Darkmode Theme Customisation
- Settings
- API Methods
window.CookieConsentTheme
window.CookieConsentThemeDark
window.CookieConsentTranslations
window.CookieConsentSettings
window.CookieConsentModalOpen()
window.CookieConsent.marketing
window.CookieConsent.preferences
window.CookieConsent.statistics
window.CookieConsent.necessary
window.CookieConsent.updated
window.CookieConsent.id
window.CookieConsent.type
- Event
consent-updated
- Event
consent-show
- Event
consent-hide
- Event
consent-ready
- Event
consent-close
- Event
consent-badge-show
- Event
consent-badge-hide
- Event
consent-badge-click
- GTM Implementation with custom rules
- Development
- Lightweight
- Zero dependency
- All-in-one - no aditional css needed
- GDPR Compliant
- Custom themes
- Custom translations
-
Download the latest release or use CDN.
https://cdn.jsdelivr.net/gh/danielsitek/[email protected]/dist/cookies.min.js
-
Insert this code on the bottom of the page, or inject it via GTM.
<script type="text/javascript" src="<path-to-your>cookies.min.js"></script>
-
Customize and run.
<script type="text/javascript"> window.CookieConsentTranslations = {}; window.CookieConsentTheme = {}; </script> <script type="text/javascript" src="<path-to-your>cookies.min.js"></script>
You can use your own translation for every text in DGP Cookie Consent.
window.CookieConsentTranslations = {
locale: 'cs-CZ',
tabAgree: {
title: 'Souhlas',
body: `
<p><strong>Tato webovΓ‘ strΓ‘nka pouΕΎΓvΓ‘ cookies</strong></p>
<p>K personalizaci obsahu a reklam, poskytovΓ‘nΓ funkcΓ sociΓ‘lnΓch mΓ©diΓ a analΓ½ze naΕ‘Γ nΓ‘vΕ‘tΔvnosti vyuΕΎΓvΓ‘me soubory cookie. Informace o tom, jak nΓ‘Ε‘ web pouΕΎΓvΓ‘te, sdΓlΓme se svΓ½mi partnery pro sociΓ‘lnΓ mΓ©dia, inzerci a analΓ½zy. PartneΕi tyto ΓΊdaje mohou zkombinovat s dalΕ‘Γmi informacemi, kterΓ© jste jim poskytli nebo kterΓ© zΓskali v dΕ―sledku toho, ΕΎe pouΕΎΓvΓ‘te jejich sluΕΎby.</p>
`,
},
tabAbout: {
title: 'O aplikaci',
body: `
<p>Cookies jsou malΓ© textovΓ© soubory, kterΓ© mohou bΓ½t pouΕΎΓvΓ‘ny webovΓ½mi strΓ‘nkami, aby uΔinily uΕΎivatelskΓ½ zΓ‘ΕΎitek vΓce efektivnΓ.</p>
<p>ZΓ‘kon uvΓ‘dΓ, ΕΎe mΕ―ΕΎeme uklΓ‘dat cookies na vaΕ‘em zaΕΓzenΓ, pokud jsou nezbytnΔ nutnΓ© pro provoz tΓ©to strΓ‘nky. Pro vΕ‘echny ostatnΓ typy cookies potΕebujeme vaΕ‘e povolenΓ.</p>
<p>Tato strΓ‘nka pouΕΎΓvΓ‘ rΕ―znΓ© typy cookies. NΔkterΓ© cookies jsou umΓstΔny sluΕΎbami tΕetΓch stran, kterΓ© se objevujΓ na naΕ‘ich strΓ‘nkΓ‘ch.</p>
<p>Kdykoliv mΕ―ΕΎete zmΔnit nebo zruΕ‘it svΕ―j souhlas prostΕednictvΓm VyjΓ‘dΕenΓ o souborech cookie na naΕ‘ich webovΓ½ch strΓ‘nkΓ‘ch.</p>
`,
},
tabDetail: {
title: 'Detail',
necessary: {
title: 'NutnΓ©',
perex:
'NutnΓ© cookies pomΓ‘hajΓ, aby byla webovΓ‘ strΓ‘nka pouΕΎitelnΓ‘ tak, ΕΎe umoΕΎnΓ zΓ‘kladnΓ funkce jako navigace strΓ‘nky a pΕΓstup k zabezpeΔenΓ½m sekcΓm webovΓ© strΓ‘nky. WebovΓ‘ strΓ‘nka nemΕ―ΕΎe sprΓ‘vnΔ fungovat bez tΔchto cookies.',
},
preferences: {
title: 'PreferenΔnΓ',
perex:
'PreferenΔnΓ cookies umoΕΎΕujΓ, aby si webovΓ‘ strΓ‘nka zapamatovala informace, kterΓ© mΔnΓ, jak se webovΓ‘ strΓ‘nka chovΓ‘ nebo jak vypadΓ‘. Je to napΕΓklad preferovanΓ½ jazyk nebo region, kde se nachΓ‘zΓte.',
},
statistics: {
title: 'StatistickΓ©',
perex:
'StatistickΓ© cookies pomΓ‘hajΓ majitelΕ―m webovΓ½ch strΓ‘nek, aby porozumΔli, jak nΓ‘vΕ‘tΔvnΓci pouΕΎΓvajΓ webovΓ© strΓ‘nky. AnonymnΔ sbΓrajΓ a sdΔlujΓ informace.',
},
marketing: {
title: 'MarketingovΓ©',
perex:
'MarketingovΓ© cookies jsou pouΕΎΓvΓ‘ny pro sledovΓ‘nΓ nΓ‘vΕ‘tΔvnΓkΕ― na webovΓ½ch strΓ‘nkΓ‘ch. ZΓ‘mΔrem je zobrazit reklamu, kterΓ‘ je relevantnΓ a zajΓmavΓ‘ pro jednotlivΓ©ho uΕΎivatele a tΓmto hodnotnΔjΕ‘Γ pro vydavatele a inzerenty tΕetΓch stran.',
},
},
buttonEdit: {
label: 'Nastavit',
},
buttonAllowAll: {
label: 'Povolit vΕ‘e',
},
buttonRejectAll: {
label: 'OdmΓtnout vΕ‘e',
},
buttonConfirm: {
label: 'Potvrdit',
},
badge: {
label: 'Upravit nastavenΓ cookies',
},
lastUpdated: 'ProhlΓ‘Ε‘enΓ o cookies bylo naposledy aktualizovΓ‘no %date.',
};
Info: Key
%date
inwindow.CookieConsentTranslations.lastUpdated
will be replaced with locale date, based onwindow.CookieConsentTranslations.locale
.
Info:
perex
andbody
values are rendered as HTML content.
Since v1.6.2
Since version 1.6.2 you can insert anchor links to other tabs in
perex
andbody
. The script will look for anchor elements and if they have#tab-agree|#tab-details|#tab-about|#allow-all|#reject-all
in href attribute, click on such element will switch to selected tab.Examples:
<a href="#tab-agree">Go to tab Agree</a> <a href="#tab-details">Go to tab Details</a> <a href="#tab-about">Go to tab About</a> <a href="#allow-all">Allow all cookies</a> <a href="#reject-all">Reject all cookies</a>
For theming purposes, these all the keys with it's default values.
window.CookieConsentTheme = {
'base-color': '#393939',
'base-font-size': '15px',
'base-line': '1px solid #d0d0d0',
'base-font-family': 'sans-serif',
'base-shadow': '0 1px 6px rgba(5,27,44,.06),0 2px 32px rgba(5,27,44,.16)',
'border-radius': '6px',
'button-border-radius': '6px',
'color-grey': '#d6d6d6',
'color-primary': '#f8c132',
'color-text-light': '#757575',
'color-text': '#242424',
'color-white': '#fff',
'button-default__bg-color': '#f4f4f4',
'button-default__color': '#242424',
'button-default__text-transform': 'none',
'button-default__border': '1px solid #f4f4f4',
'button-default__box-shadow': 'none',
'button-default--hover__bg-color': '#fff',
'button-default--hover__color': '#242424',
'button-default--hover__border': '1px solid #d1d1d1',
'button-default--hover__box-shadow': '0 0 17px 0 rgba(0,0,0,.1)',
'button-primary__bg-color': '#f8c132',
'button-primary__color': '#242424',
'button-primary__text-transform': 'uppercase',
'button-primary__border': '0 none',
'button-primary__box-shadow': 'none',
'button-primary--hover__bg-color': '#efaf08',
'button-primary--hover__color': '#242424',
'button-primary--hover__border': '0 none',
'button-primary--hover__box-shadow': 'none',
'badge__bg-color': '#ffffff',
badge__color: '#f8c132',
badge__border: '0 none',
'badge__border-radius': '10rem',
'badge__box-shadow':
'0 1px 6px rgba(5,27,44,.06),0 2px 32px rgba(5,27,44,.16)',
badge__position: 'auto auto 1rem 1rem',
'base-link__color': '#242424',
'base-link__text-decoration': 'underline',
'base-link--hover__color': '#efaf08',
'base-link--hover__text-decoration': 'underline',
};
-
ZOOT / Default theme
window.CookieConsentTheme = { /* ZOOT theme is same as default theme */ };
-
Different
window.CookieConsentTheme = { 'color-primary': '#008c95', 'button-default__bg-color': '#fff', 'button-default__color': '#676767', 'button-default__border': '2px solid #676767', 'button-default--hover__color': '#676767', 'button-default--hover__border': '2px solid #676767', 'button-primary__bg-color': '#008c95', 'button-primary__color': '#fff', 'button-primary--hover__bg-color': '#007379', 'button-primary--hover__color': '#fff', badge__color: '#008c95', };
-
UrbanStore
window.CookieConsentTheme = { 'border-radius': '0', 'button-border-radius': '0', 'color-primary': '#cfad69', 'button-default__bg-color': '#f3f3f2', 'button-default__color': '#676767', 'button-default__text-transform': 'uppercase', 'button-default__border': '0 none', 'button-default__box-shadow': 'none', 'button-default--hover__bg-color': '#f3f3f2', 'button-default--hover__color': '#676767', 'button-default--hover__border': '0 none', 'button-default--hover__box-shadow': 'none', 'button-primary__bg-color': '#cfad69', 'button-primary__color': '#fff', 'button-primary--hover__bg-color': '#cfad69', 'button-primary--hover__color': '#fff', badge__color: '#cfad69', };
-
Bibloo
window.CookieConsentTheme = { 'base-color': '#3c3c3c', 'border-radius': '0', 'button-border-radius': '0', 'color-primary': '#000000', 'button-default__bg-color': '#f3f3f2', 'button-default__color': '#676767', 'button-default__text-transform': 'uppercase', 'button-default__border': '0 none', 'button-default--hover__bg-color': '#f3f3f2', 'button-default--hover__color': '#676767', 'button-default--hover__border': '0 none', 'button-default--hover__box-shadow': 'none', 'button-primary__bg-color': '#000000', 'button-primary__color': '#fff', 'button-primary--hover__bg-color': '#f3f3f2', 'button-primary--hover__color': '#000', badge__color: '#000000', };
Same options like window.CookieConsentTheme
. Darkmode theme is automatically applied by settings from the browser/OS.
window.CookieConsentThemeDark = {
...
};
You can set few settings options for Cookie Consent.
window.CookieConsentSettings = {
tabAgree: {
showButtonRejectAll: true,
},
tabAbout: {
showButtonRejectAll: true,
},
enableDarkMode: true,
disableBadge: false,
disableCross: false,
disableHeader: false,
};
Here is the complete list of setting options:
Property | Value | Description | Default value |
---|---|---|---|
tabAgree.showButtonRejectAll |
boolean |
Enable reject all button in first tab. | true |
tabDetails.showButtonAllowAll |
boolean |
Enable allow all button in details tab. | true |
tabAbout.showButtonRejectAll |
boolean |
Enable reject all button in last tab. | true |
enableDarkMode |
boolean |
Enable automatic switch to dark mode theme. | false |
disableBadge |
boolean |
Disable badge button. | false |
disableCross |
boolean |
Disable cross button in header. | false |
disableHeader |
boolean |
Disable header. | false |
Object to pass theme configuration to consent modal window. This needs to be placed before the consent script src tag.
Object to pass theme configuration for darkmode. This needs to be placed before the consent script src tag.
Object to pass translation to consent modal window. This needs to be placed before the consent script src tag.
Object to pass settings to consent modal window. This needs to be placed before the consent script src tag.
- Returns
<void>
.
Open the consent modal window and hide the badge button.
Example:
<button type="button" class="js-consent-open">Open Modal</button>
<script>
document.querySelectorAll('.js-consent-open').forEach((element) => {
element.addEventListener('click', () => {
window.CookieConsentModalOpen();
});
});
</script>
- Returns
<boolean>
.
Returns a boolean value of consent category.
- Returns
<boolean>
.
Returns a boolean value of consent category.
- Returns
<boolean>
.
Returns a boolean value of consent category.
- Returns
<boolean>
.
Returns a boolean value of consent category.
- Returns
<string>
.
Returns a ISO string formated date and time, or empty string if consent has not yet been updated.
- Returns
<string>
.
Returns a unique ID of user given consent, or empty string if consent has not yet been given.
- Returns
<string>
.
Returns a consent type of user given consent, or empty string if consent has not yet been given.
Fires every time the consent is updated.
Example:
window.addEventListener('consent-updated', () => {
console.log('Consent has been updated.', window.CookieConsent);
});
Fires every time the modal consent window is being shown.
Example:
window.addEventListener('consent-show', () => {
console.log('Consent window is being shown.');
});
Fires every time the modal consent window closes.
Example:
window.addEventListener('consent-hide', () => {
console.log('Consent window closes.');
});
Fires one time when consent script is loaded on page and ready.
Example:
window.addEventListener('consent-ready', () => {
console.log('Consent is ready.');
});
Fires every time the modal consent window is closed by ESC key or by clicking on cross.
Example:
window.addEventListener('consent-close', () => {
console.log('Consent is closed.');
});
Fires every time the consent badge is shown.
Example:
window.addEventListener('consent-badge-show', () => {
console.log('Consent badge is shown.');
});
Fires every time the consent badge hides.
Example:
window.addEventListener('consent-badge-hide', () => {
console.log('Consent badge hides.');
});
Fires every time the consent badge is clicked.
Example:
window.addEventListener('consent-badge-click', () => {
console.log('Consent badge is clicked.');
});
-
CookieConsent.marketing
Type: JavaScript Code
JavaScript Code:
function () { return CookieConsent.marketing.toString(); }
-
CookieConsent.preferences
Type: JavaScript Code
JavaScript Code:
function () { return CookieConsent.preferences.toString(); }
-
CookieConsent.statistics
Type: JavaScript Code
JavaScript Code:
function () { return CookieConsent.statistics.toString(); }
-
CookieConsent Version (optional)
This variable is only for simplified version changes.
Type: Constant
Value:
1.3.0
-
CookieConsent - Marketing
Rule type: Custom event
Event name:
cookieconsent_updated
This rule run on: Some custom events
Run this rule when...:
CookieConsent.marketing
- contains
true
-
CookieConsent - Preference
Rule type: Custom event
Event name:
cookieconsent_updated
This rule run on: Some custom events
Run this rule when...:
CookieConsent.preferences
- contains
true
-
CookieConsent - Statistics
Rule type: Custom event
Event name:
cookieconsent_updated
This rule run on: Some custom events
Run this rule when...:
CookieConsent.statistics
- contains
true
-
CookieConsent
Type of tag: Custom HTML
HTML
<script type="text/javascript" id="cookie-consent-init"> // Optional: add own translations // window.CookieConsentTranslations = {}; // Optional: add own theme // window.CookieConsentTheme = {}; // Optional: add own theme for darkmode // window.CookieConsentThemeDark = {}; // Optional: add own theme // window.CookieConsentSettings = {}; window.addEventListener( 'consent-updated', function consentUpdatedListener() { dataLayer.push({ event: 'cookieconsent_updated', }); }, ); window.addEventListener('consent-ready', function () { dataLayer.push({ event: 'cookieconsent_ready', }); }); (function cookiesInit() { var scriptEl = document.createElement('script'); scriptEl.src = 'https://cdn.jsdelivr.net/gh/danielsitek/[email protected]/dist/cookies.min.js'; scriptEl.type = 'text/javascript'; scriptEl.id = 'cookie-consent'; document.body.appendChild(scriptEl); })(); </script>
Note: You can replace version number with previously defined "CookieConsent Version" variable.
Startup:
Startup rules: All Pages
You just need node >= 12 and run these commands:
npm i
npm run dev
Then open the localhost url from terminal in browser and navigate to https://localhost:3000/public/
.
npm ci
npm run build:prod