New EU cookie law (e-Privacy Directive) – The law which applies to how you use cookies and similar technologies for storing information on a user’s equipment such as their computer or mobile device changed on 26 May 2011.
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
I made this simple JavaScript cookie warning to use it on my websites. I would be grateful if you give me a feedback on this script and I could improve it.
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.
- If JavaScript is disabled on browser then script won’t work.
- You are free to modify and distribute this script.
Cookie warning script demo page
Installation
- Add this code between head tags:
- And this code where you want warning to appear:
- Download the script (warnCookies.js (version 0.9) or check the code (HTML, CSS and JavaScript) on GitHub) and upload it to your website. The code above will look for the script in root directory.
- Add this CSS code to your stylesheet:
[showMiddleOfPostAdd]
Screenshots
Video tutorial (thanks to Fraser Mcculloch)
Related Images:
22 responses to “A Simple JavaScript cookie warning”
hello
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 ?
cheers pal
kieran
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.
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 😉
Thanks for the script Donatas, it works fine 🙂
Hi,
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?
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
Re Dave
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?
Also, what bits of Javascript need to be removed if you do not want the checkbox, but just want the Continue button to close the div?
Many thanks in advance of your response.
Regards, Scott
Great script! just what I have been looking for.
Thanks for the extra advice and support too.
Colin
You’re welcome, Colin.
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?
Hello Rick,
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.
Kind regards,
Donatas
Hi Donatas
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?
Regards
Bob
Hello Bob,
I haven’t tested this, but removing this block of code from script should do the job:
“else {
// Display warning if cookies are disabled on browser
document.getElementById(“cookiesWarning”).appendChild(newCookiesWarningDiv).setAttribute(“id”, “cookiesWarningActive”);
document.getElementById(“cookiesWarningActive”).innerHTML = “Cookies are disabled.
Your browser currently not accepting cookies.“;
}”
Let me now if it doesn’t 🙂
Regards,
Donatas
Hej,
Great script, but is it possible to use a seperate style sheet? i want to use the script on a forum..
Hello Fabian,
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.
Kind regards,
Donatas
Donatas
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
Michael
Hi
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?
Thanks
Michael
Hello Michael,
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!
Regards,
Donatas
New version works great – Great Script
Thank you
Hi
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?)
Hello buddy,
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.
Regards,
The script has been updated.
Changes:
* BUG: HTML
//div id="cookiesWarning"/////div//block remains styled after visitor agrees to allow cookies. FIX: New DOM and CSS elements added.