Source: ICO cookies guidance
Many people are not aware of it yet, but the law is already in effect in the UK. However The Information Commissioners’ Office (ICO), the UK regulator, gave everybody a one year ‘grace period’ before they start enforcing it.
That grace period will expire on May 26th 2012.
From that date, if you are not compliant or visibly working towards compliance, you run the risk of enforcement action, which can include a fine of up to half a million pounds for a serious breach.
Source: EU Cookie Law Explained – The Cookie Collective website
The script checks if cookies are allowed by browser and shows the cookie warning. If visitor agrees to accept cookies from the website, cookie will be saved for next 6 months and warning will disappear.
Some things to mention:
- The script is not preventing the website from saving cookies on visitor’s computer as it is hard (if not impossible) to filter all cookies being produced by the website by just using single script (feedbacks on this are more than welcome ;))
- The script is not redirecting to any other website if user didn’t agree to accept cookies. It might hurt SEO in my opinion (once again – please share your thoughts), although it’s easy to add this functionality to the script.
- You are free to modify and distribute this script.
Cookie warning script demo page3>
- Add this code between head tags:
- And this code where you want warning to appear:
- Add this CSS code to your stylesheet:
Video tutorial (thanks to Fraser Mcculloch)
Share your opinion by posting or replying to others comments.
February 20, 2015 at 14:21 - 8 years ago
the scrips is really good, thank you.
is there another option to have a floating cookie button on every page ?
if so how would i achieve this ?
Ian McEwan –
June 3, 2014 at 09:59 - 9 years ago
Thanks for the script, Donatas 🙂 I’m pretty new to all this, and I’ve noticed that the wording on the banner is different to that in the script. So, if I wanted to change what’s on the banner,where would I look? Also, can I change the position of the banner on the page by adding to #cookiesWarning? Thanks again.
Donatas Stonys –
June 13, 2014 at 17:49 - 9 years ago
Thank you, Ian 🙂
In order to change wording, one would have to look at lines 90, 92, 100, 102 and 120 (please check GitHub link above ;)).
The warning will appear wherever you will place it within your website code (header, body, sidebar, footer, etc.). By default it should fill the 100% of the width of element, for example, header’s width, or sidebar’s width.
If you were to change warning’s default width, margins, borders or shadows and etc., you should refer to cookies.css file.
Hope this helps 😉
Ian McEwan –
June 3, 2014 at 09:50 - 9 years ago
Thanks for the script Donatas, it works fine 🙂
November 7, 2013 at 20:52 - 10 years ago
I’m using you script (thanks!) but I have a weird issue: I have a main site at site.com and a blog in the folder site.com/blog/
If I accept the agreement at site.com and then go to site.com/blog/ the disclaimer remains deactivated.
But if I accept the agreement at site.com/blog and then go to site.com the disclaimer appears again (and when I accept it again there, the browser has 2 cookies, one for path = / and one for path = /blog/
Is there a way to convince the script that even if you accept the agreement first at site.com/blog/ that covers the whole domain and it doesn’t have to ask again when you visit site.com or other folders?
Dave Taylor –
December 23, 2012 at 12:35 - 10 years ago
This works ok on everything execpt a MAC running Safari 4.1.3
It states that cookies are disabled? I have checked and they are not, in fact my site is placing cookies on the MAC, any thoughts
Scott Spragg –
December 19, 2012 at 21:16 - 10 years ago
This is one of the best scripts I have seen around, but I have noticed one problem.
If you do not ‘accept’ on the first page you land on and navigate to another page, then accept on that page, the div returns on all subsequent pages you visit on your site other than the page you accepted on?
How can this be fixed please?
Many thanks in advance of your response.
Colin Walton –
November 13, 2012 at 23:00 - 11 years ago
Great script! just what I have been looking for.
Thanks for the extra advice and support too.
November 13, 2012 at 23:15 - 11 years ago
You’re welcome, Colin.
Rick Crosoer –
September 3, 2012 at 00:50 - 11 years ago
Please can you advise me – I have a dual language site (English and French).
How should the warning on the French index page be handled? Translating the warning to french is easy enough but would this contravene the ICO requirements? After all the site is English owned! Where should the “read more” link point?
September 3, 2012 at 11:22 - 11 years ago
You could split the script to two separate scripts in a few ways. That’s what I can think about right now:
Same cookie would be generated/checked from each script so the same visitor would have to agree either to English or French version in order to hide the warning.
Speaking about the ICO requirements – I’m not the lawyer, and hopefully other visitors of this blog will correct me if I’m wrong, but as far as I know different EU countries apply the law bit differently and UK is probably the most active member here so far. Thus, I cannot make secure comments regarding EU cookie law, but I believe you should be fine by simply using the common sense here – having multi-language version of script is obviously a good thing as long as each script appear on corresponding version of the website and links to appropriate content on, say, EU Parliament websites or the sources of other local authorities, say, French Government websites – as long as it gives an idea in native language what is it all about and links to more information. Please check it with the lawyers if necessary and you’re more than welcome to share this information here.
August 3, 2012 at 15:52 - 11 years ago
This is a really good script – thanks.
Not sure about the warning that cookies are disabled which seems a bit unnecessary.
There seems no way to close it other than activating cookie settings.
Is there any way this function can be disabled or provided with a close button?
August 3, 2012 at 16:27 - 11 years ago
I haven’t tested this, but removing this block of code from script should do the job:
// Display warning if cookies are disabled on browser
document.getElementById(“cookiesWarningActive”).innerHTML = “Cookies are disabled.
Your browser currently not accepting cookies.“;
Let me now if it doesn’t 🙂
July 26, 2012 at 20:13 - 11 years ago
Great script, but is it possible to use a seperate style sheet? i want to use the script on a forum..
July 26, 2012 at 21:43 - 11 years ago
This script uses separate style sheet already 😉 Whole script is wrapped into #cookiesWarning id and besides that you can separately style the red warning message (#cookiesWarningActive), the text in it (#cookiesWarningActive small) and “Read more…” URL.
So, the style is defined only in style sheet and nowhere else. Here is the picture of active warning HTML code:
However, I added even more ids and classes to make the script even more customizable. Please feel free to download 0.7 version. Simply replace warnCookies.js and cookies.css files with new ones. I’m not using HTML5 only syntax here (which would allow to use even more styling options) as I want this script to work on older websites too 😉 New style sheet can be found on GitHub
Here is the screenshot of updated code:
Perhaps this tutorial will help you to style the form elements.
Hope this helps.
June 13, 2012 at 13:09 - 11 years ago
Thank you so much for the speed you have updated this 🙂
This was good but is now a great solution for any web site, until the EU do something else… 😉
All the best
June 13, 2012 at 10:46 - 11 years ago
Great script but I have one question.
How would I embed a link into the text displayed so that I can direct site visitors to an information page about cookies?
June 13, 2012 at 12:40 - 11 years ago
The script is updated to version 0.6. Functionality you have asked (“Read more” link) is added and please note some changes to CSS file.
Hope this helps.
Have a nice day!
June 10, 2012 at 09:40 - 11 years ago
New version works great – Great Script
June 8, 2012 at 17:13 - 11 years ago
This seems to work fine in IE but not in Chrome ( after clicking the continue button the warning message only flashes for about 1 second then refreshes the page, hiding the message?)
June 8, 2012 at 20:55 - 11 years ago
The bug you have mentioned is fixed now. The script should work fine on all major browsers. Current script version is 0.5. Please download it directly or from GitHub,
Thank you for your feedback.
May 30, 2012 at 17:02 - 11 years ago
The script has been updated.
* BUG: HTML
//div id="cookiesWarning"/////div//block remains styled after visitor agrees to allow cookies. FIX: New DOM and CSS elements added.