EU Cookie Law WordPress Plugin [Retired]This tutorial and download shows you how to implement an 'implied consent' notification message using jQuery and includes WordPress plugin.
The Cookie Law is a new piece of privacy legislation from Europe that requires websites to obtain consent from visitors to store or retrieve cookies and is designed to protect online privacy, by making consumers aware of how information about them is collected by websites, and enable them to choose whether or not they want to allow it to take place. This tutorial and download show you how to implement an 'implied consent' notification message.
Update 17/06/2013: Major update to the Wordpress Cookie plugin. Changes include a fully responsive layout, a new configuration manager, improved control over styling and more configuration options. See notes below for details.
The Cookie Law
The Cookie Law was started as an EU Directive that was adopted by all EU countries on May 26th, 2011. At the same time, the UK updated its Privacy and Electronic Communications Regulations, which brought the EU Directive into UK law. Each EU member state has done or is doing the same thing. Although they all have their own approach and interpretation, the basic requirements of the directive remain the same.
Many people are unaware that the law is already in effect in the UK. However, the UK's regulator, The Information Commissioner's Office (ICO), gave everybody a one-year 'grace period' for implementing a solution which expired on 26th May 2012.
In a nutshell, the requirements of the directive mean that website operators must get "informed consent" from users before they record any detailed information in the cookies they store on visitors' computers. This means that a website must ask for consent from the user before using cookies.
Are all cookies affected? The vast majority are - all cookies that are not "strictly necessary for a service requested by a user".
Tracking cookies used by Google Analytics are affected as well, so even if your website does not use cookies, but you use Google Analytics (or possibly any other similar products) still need consent from the user.
There are two methods for gaining consent - explicit and implied.
- Explicit consent means that a website will not use any cookies unless the user explicitly agrees to "opt-in" to receiving cookies.
- Implicit consent means that a website will continue to use cookies and that it is up to the user to "opt out" by changing their browser cookie preferences or by leaving the site.
A Solution
This method relies on implied consent and you should ensure that this method is correct for your website. If you are relying on implied consent you need to be satisfied that your users understand that their actions will result in cookies being set. Without this understanding, you do not have their informed consent (further info here )
This code and WordPress plugin will create a small banner at the top of the guest's browser that greets them with the message:
You can change this text from within the plug-in settings page.
DISCLAIMER
Whilst every effort has been taken to ensure that this code remains up to date and conforms to the EU Cookie Law, the authors cannot and will not be held responsible if it is found to be inadequate in any way. The authors are NOT legal experts and nothing contained within constitutes legal advice.
It is your responsibility to ensure that implied consent is suitable for your site before using this code or plugin.
For more information on the Cookie Law please visit the The Information Commissioner's Office .
On the first visit to the website, the user will see a banner across the top of the page as shown in the screenshot above. If they continue to use the site the message is not shown, nor will it be shown again. The plugin and code set a cookie to determine if the message has already been shown. This cookie is deemed essential to the services provided and is excluded from the regulation. The cookie is called visited and the value is set to yes. The cookie has a far-future expiration date.
The code is very straightforward, it first checks to see if cookies are enabled or not on the guest's browser. If they are then it checks to see if the message has already been shown using the presence of the visited cookie. If the cookie does not exist then the message is added to the top of the page, it has an expanding type animation when shown. The close button will shrink the message in the same way as it is shown and finally, the cookie is set so that the message isn't shown again.
Wordpress Plugin
The Wordpress plugin can be downloaded from the Wordpress Plugin Directory or using the link below: EU Cookie Law Compliance Message .
EU Cookie Law Wordpress Plugin
Installation
If you are using the WordPress plugin:
- Upload all files to the '/content/plugins/' directory
- Activate the plugin through the 'Plugins' menu in WordPress
- Configure the text through the 'Settings' menu under 'EU Cookie Message'
Configuration Options
Using the WordPress plugin you can customise the title, message and close button text as well as change the visual style using a built-in light or dark theme or create your own.
Content Padding: This option allows you to change the padding inside the main content section to increase the space around the borders.
Message Maximum Width: Change this to suit your website's maximum page width. This is the maximum width that the text will occupy.
Message hovers over content: By enabling this option you can have the cookie warning message placed above your website header - it will push the header below the message. The default is for the message to "hover" on top of the website header.
Debug Mode: This prevents the plugin from setting a cookie. You can use this for testing and the message will be shown on every page load. Remember to disable debugging when your site goes into production.
Pure HTML & Javascript
If you are going to be using the above code on a non-Wordpress website you may need to edit the template or theme. Methods will vary on how your website is written, but in general, all you need to do is include the jQuery library to every page that will contain the message and paste in the above snippet into the page just before the end of the body tag.
There are two lines in the javascript, one contains the HTML for the message, the other contains the stylesheet. You can edit these to change the look and feel of the message.
Using an xHTML Transistional Skeleton template it should be structured similar to this:
<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Your Title</title>
<meta name="Description" content="Your description" />
<meta name="Keywords" content="Your, comma delimited, keywords" />
<meta equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="all" href="your-css-stylesheet.css" />
</head >
<body>
<!-- YOUR CONTENT HERE -->
<script type="text/javascript">
jQuery(function(){
if (navigator.cookieEnabled === true)
{
if (document.cookie.indexOf("visited") == -1)
{
/ The message
jQuery('body').prepend('<div id="cookie"><div id="wrapper"><h2>Cookies on this website</h2>We use cookies to ensure that we give you the best experience on our website. If you continue without changing your settings, we'll assume that you are happy to receive all cookies from this website. If you would like to change your preferences you may do so by following the instructions <a href="http://www.aboutcookies.org/Default.aspx?page=1" rel="nofollow">here</a>.
<div id="close"><a href="#" id="closecookie">? Close</a></div><div style="clear:both"></div></div></div>');
/ The CSS
jQuery('head').append('<style type="text/css">#cookie {position:absolute;left:0;top:0;width:100%;height:100%;background:rgb(0,0,0);background:rgba(0,0,0,0.8);z-index:9999;}#cookie #wrapper {padding:20px;}#cookie h2 {color:#ffffff;padding-top:0;display:block;text-align:center;font-family:ariel,sans-serif;font-size:1.8em}#cookie p {color:#BEBEBE;display:block;font-family:ariel,sans-serif;font-size:1.4em}#cookie #close{text-align:center;}#closecookie{color:#ffffff;font-family:ariel,sans-serif;font-size:1.6em;text-decoration:none}@media only screen and (min-width: 480px) {#cookie {height:auto;}#cookie #wrapper{max-width:980px;margin-left:auto;margin-right:auto;}#cookie h2{width:18%;margin-top:0;margin-right:2%;float:left;text-align:right;}#cookie p {width:68%;margin:0 1%;float:left;}#cookie #close{width:9%;float:right;}}</style>');
/ Don't touch this
jQuery('#cookie').show("fast");
jQuery('#closecookie').click(function() {jQuery('#cookie').hide("fast");});
document.cookie="visited=yes; expires=Thu, 31 Dec 2020 23:59:59 UTC; path=/";
}
}
})
</script>
</body>
</html> 
