Easy Cookie Consent Modal Popup Window
A lightweight & gdpr compliant cookie consent plugin written in plain javascript. An "all-in-one" solution which also allows you to write your cookie policy inside it without the need of having a dedicated page.
Github: https://github.com/orestbida/cookieconsent
Key features
- Lightweight
- Cross-browser support (IE8+)
- Standalone (no external dependencies needed)
- GDPR compliant
- Support for multi language
- WAI-ARIA compliant
- Allows you to define different cookie categories with opt in/out toggle
- Allows you to define custom cookie tables to specify the cookies you use
Installation & Usage
-
Download the latest release or use via CDN or NPM
# CDN links https://cdn.jsdelivr.net/gh/orestbida/cookieconsent@v2.6.2/dist/cookieconsent.js https://cdn.jsdelivr.net/gh/orestbida/cookieconsent@v2.6.2/dist/cookieconsent.css
Thanks to Till Sanders for bringing the plugin on npm.
npm i vanilla-cookieconsent yarn add vanilla-cookieconsent
-
Import the plugin: add a
script
tag pointing tocookieconsent.js
<html> <head> <!-- head content --> </head> <body> <!-- body content --> <script defer src="<path-to-cookieconsent.js>"></script> </body> </html>
Note: replace
<path-to-cookieconsent.js>
with a valid path!
API & configuration parameters
After getting the plugin like so:
var cookieconsent = initCookieConsent();
the following methods are available:
- cookieconsent
.run(<config_object>)
- cookieconsent
.show(<optional_delay>)
- cookieconsent
.hide()
- cookieconsent
.showSettings(<optional_delay>)
- cookieconsent
.hideSettings()
Additional methods for an easier management of your scripts and cookie settings (expand them to see usage example):
cookieconsent
.accept(<accepted_categories>, <optional_rejected_categories>)
[v2.5.0+]cookieconsent
.allowedCategory(<category_name>)
cookieconsent
.validCookie(<cookie_name>)
cookieconsent
.eraseCookies(<cookie_names>, <optional_path>, <optional_domains>)
[v2.5.0+]cookieconsent
.loadScript(<path>, <callback_function>, <optional_custom_attributes>)
cookieconsent
.set(<field>, <object>)
[v2.6.0+]cookieconsent
.get(<field>)
[v2.6.0+]
Easy Cookie Consent Modal Popup Window Demo
View Demo Full Screen View Demo New Tab
Easy Cookie Consent Modal Popup Window Code
Scripts
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orestbida/cookieconsent@v2.6.2/dist/cookieconsent.css" />
<script src="https://cdn.jsdelivr.net/gh/orestbida/cookieconsent@v2.6.2/dist/cookieconsent.js"></script>
Javascript
window.addEventListener('load', function(){
// obtain plugin
var cc = initCookieConsent();
// run plugin with your configuration
cc.run({
current_lang: 'en',
autoclear_cookies: true, // default: false
theme_css: '<path-to-cookieconsent.css>', // 🚨 replace with a valid path
page_scripts: true, // default: false
// delay: 0, // default: 0
// auto_language: false, // default: false
// autorun: true, // default: true
// force_consent: false, // default: false
// hide_from_bots: false, // default: false
// remove_cookie_tables: false // default: false
// cookie_name: 'cc_cookie', // default: 'cc_cookie'
// cookie_expiration: 182, // default: 182 (days)
// cookie_domain: location.hostname, // default: current domain
// cookie_path: '/', // default: root
// cookie_same_site: 'Lax', // default: 'Lax'
// use_rfc_cookie: false, // default: false
// revision: 0, // default: 0
onAccept: function (cookie) {
// ...
},
onChange: function (cookie, changed_preferences) {
// ...
},
languages: {
'en': {
consent_modal: {
title: 'We use cookies!',
description: 'Hi, this website uses essential cookies to ensure its proper operation and tracking cookies to understand how you interact with it. The latter will be set only after consent. <button type="button" data-cc="c-settings" class="cc-link">Let me choose</button>',
primary_btn: {
text: 'Accept all',
role: 'accept_all' // 'accept_selected' or 'accept_all'
},
secondary_btn: {
text: 'Reject all',
role: 'accept_necessary' // 'settings' or 'accept_necessary'
}
},
settings_modal: {
title: 'Cookie preferences',
save_settings_btn: 'Save settings',
accept_all_btn: 'Accept all',
reject_all_btn: 'Reject all',
close_btn_label: 'Close',
cookie_table_headers: [
{col1: 'Name'},
{col2: 'Domain'},
{col3: 'Expiration'},
{col4: 'Description'}
],
blocks: [
{
title: 'Cookie usage 📢',
description: 'I use cookies to ensure the basic functionalities of the website and to enhance your online experience. You can choose for each category to opt-in/out whenever you want. For more details relative to cookies and other sensitive data, please read the full <a href="#" class="cc-link">privacy policy</a>.'
}, {
title: 'Strictly necessary cookies',
description: 'These cookies are essential for the proper functioning of my website. Without these cookies, the website would not work properly',
toggle: {
value: 'necessary',
enabled: true,
readonly: true // cookie categories with readonly=true are all treated as "necessary cookies"
}
}, {
title: 'Performance and Analytics cookies',
description: 'These cookies allow the website to remember the choices you have made in the past',
toggle: {
value: 'analytics', // your cookie category
enabled: false,
readonly: false
},
cookie_table: [ // list of all expected cookies
{
col1: '^_ga', // match all cookies starting with "_ga"
col2: 'google.com',
col3: '2 years',
col4: 'description ...',
is_regex: true
},
{
col1: '_gid',
col2: 'google.com',
col3: '1 day',
col4: 'description ...',
}
]
}, {
title: 'Advertisement and Targeting cookies',
description: 'These cookies collect information about how you use the website, which pages you visited and which links you clicked on. All of the data is anonymized and cannot be used to identify you',
toggle: {
value: 'targeting',
enabled: false,
readonly: false
}
}, {
title: 'More information',
description: 'For any queries in relation to our policy on cookies and your choices, please <a class="cc-link" href="#yourcontactpage">contact us</a>.',
}
]
}
}
}
});
});
External Link for Easy Cookie Consent Modal Popup Window