Create a simple ‘Implied Consent’ EU Cookie Law Banner with JavaScript

Written by - Published on

If you’re looking for a simple EU Cookie Law banner, then look no further. Our simple ‘Implied Consent’ JavaScript banner gives you the ability to add, style and fully control an HTML banner that fully complies with the UK EU Cookie Law.

When the UK Cookie Law came into effect last year, the ICO’s guidance for compliance was both vague and misleading. The ICO were sporting an ‘Explicit Consent’ banner, yet at the last minute suggested ‘Implied Consent’ was within the guidelines. As a result, we at Creare opted for a persistent ‘Implied Consent’ banner that stayed firmly in place on every page of the website until the visitor accepted and closed the banner.

Now that the ICO have updated their method to a one-time only, implied consent banner, we’ve updated our Script to do the same. Once installed and configured on your site, the banner will only appear once, drop a cookie to say that it’s been seen and then it doesn’t make an appearance until it expires on a date set within the Script.

Here’s the JavaScript

Simply add the following to your existing JavaScript file, or create a new file and ensure that it is sourced through the tag of each page of your website:

Our EU Cookie Law (Implied Consent) Banner V2 Walkthrough

Need some help styling the banner?

Our Cookie Banner Script automatically generates both the banner HTML and adds a temporary class to the Body tag. If you leave the JavaScript banner code as it is, then the HTML markup for styling will look very much like this:

<body class=" cookiebanner">
<div id="cookie-law">
<div class"cookie-law-holder">
 <p>Our website uses cookies. By continuing we assume your permission to deploy cookies, as detailed in our <a href=""/privacy-cookies-policy/" rel="nofollow" title="Privacy &amp; Cookies Policy">privacy and cookies policy</a></p>
</div>
</div>

Using the Body class, and the banner markup, you can position and style the banner as you see fit. If you choose to absolutely position fixed to the bottom, the temporary Body class really comes in handy for add a little extra margin to ensure that the banner doesn’t obstruct your website’s content. Here’s the very simple CSS from our video walkthrough:

#cookie-law { 
	max-width:940px;
	background:#EEEADD; 
	margin:10px auto 0; 
	border-radius: 17px;
	-webkit-border-radius: 17px;
	-moz-border-radius: 17px;
}

#cookie-law p { 
	padding:10px; 
	font-size:1.2em; 
	font-weight:bold; 
	text-align:center; 
	color:#682008; 
	margin:0;
}