Notice
Website under developement!

Lightweight cookie-consent

profile icon
Orest Bida
— Aug 22, 2020
☕ 9 min read
Last updated: Jun 01, 2021

Go to demo

There are a LOT of powerful cookie consent solutions out there, even free ones. I had tried a few of those free ones, but one way or another, they never fully met my own requirements. So I decided to "bake" one for myself.

My requirements

As per my needs, the solution had to be something relatively simple, highly optimized, no npm packages or other dependencies. A single .js plugin which must have had at least the following main features:

  • Easy management of scripts
  • Multilanguage support
  • GDPR compliant
  • Lightweight + vanilla JS
  • Not horrible looking

And ... so i did! A pure vanilla js solution which works in almost all browser - yea, IE too, although it's pretty much dead now.

Get started

The installation is pretty straightforward. Either download it or use it via cdn:

https://cdn.jsdelivr.net/gh/orestbida/cookieconsent@v2.x/dist/cookieconsent.js
https://cdn.jsdelivr.net/gh/orestbida/cookieconsent@v2.x/dist/cookieconsent.css

once you've added the script into your html, like so:

<script defer src="<path-to-js>/cookieconsent.js"></script>

the next step is need to initialize the plugin! You can choose to create another .js file which you will then add to the html page the same way like the script before, or choose to write it inline (to avoid that one additional http request):

Show code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<script defer src="<path-to-js>/cookieconsent.js"></script> <!-- Inline script --> <script> window.addEventListener('load', function(){ const cc = initCookieConsent(); // basic configuration cc.run({ current_lang : 'en', theme_css : '<path-to-css>/cookieconsent.css', onAccept : function(){ // do something ... }, onChange: function(){ // preferences changed, do something }, languages : { en : { consent_modal : { title : "I use cookies", description : 'Your cookie consent message here', primary_btn: { text: 'Accept', role: 'accept_all' //'accept_selected' or 'accept_all' }, secondary_btn: { text : 'Settings', role : 'settings' //'settings' or 'accept_necessary' } }, settings_modal : { title : 'Cookie settings', save_settings_btn : "Save settings", accept_all_btn : "Accept all", reject_all_btn : "Reject all, close_btn_label: "Close", blocks : [ { title : "Cookie usage", description: 'Your cookie usage disclaimer' },{ title : "Strictly necessary cookies", description: 'Category description ... ', toggle : { value : 'necessary', enabled : true, readonly: true } },{ title : "Analytics cookies", description: 'Analytics description ... ', toggle : { value : 'analytics', enabled : false, readonly: false } }, ] } } } }); }); </script>

Note: This is a basic configuration, there are many other options you can configure!

Done

With all of that done, you should see the cookieconsent pop into your screen!

Upcoming improvements

As of now the plugin is not very customizable (visually). You can change the color scheme easily thanks to css variables inside cookieconsent.css but that's pretty much it! (Unless you want to dive in yourself and inspect the style of the existing classes)

Update: added gui_options parameter for more layout options

Also, the plugin does not manage (yet!) iframes, so if you'd like to automatically block things like youtube embedded iframes, that's a no-go for now.

Update: created iframemanager plugin to easily manage iframes

Where to find it

If you want to give it a try, you can find the plugin on github . Contributions are very welcome!

Related tags

This article has 0 views