cookie-banner

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

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;
}
  • Ansh

    Very nice and easy script. Exactly what I was looking for. Thank you so much.

    • http://www.creare-webdesign.co.uk/ James Bavington

      No problem Ansh. It’s also now available in a WordPress Plugin http://wordpress.org/plugins/creare-eu-cookie-law-banner/

      • Mark

        Hi James,

        Reference “Implied Consent Pop Up”.

        Is there anything you can do / offer to make the same available for Site Maker (by Moonfruit) CMS system? There is no means off accessing the ‘backend’ code to get to the close tag. All one can do is add “HMTL Snippet” on the CMS front end. Advice greatly appreciated!

        • http://www.creare.co.uk/ James Bavington

          Hey Mark, I’ve never used the Site Maker by Moonfruit I’m afraid, but if I ever do have the opportunity to use it and make a Cookie Banner, i’ll let you know.

      • Matthew Harrington

        Hi James,

        Having a problem – it’s not persisting for me.

        I can open the page and it will display.
        If i refresh the page, it disappears even though I haven’t clicked closed.

        Not sure what it does if I open another page first?

  • haydn

    Loving it. Is there a way to add a dismiss/close button for users?

  • Catriona Murphy

    Hi James, great article. I’m currently inputting the cookie message and testing it, do you know how I could input a ‘Hide’ type message into the banner? (I don’t use WordPress).

    • http://www.creare-webdesign.co.uk/ James Bavington

      Hi Catriona, thanks for your kind comments on the article. The simplest way might be to add the following HTML markup which closes the banner via JavaScript:


      Close

      Just make sure you have the correct amount of parent()’s for how many divs make-up the banner in relation to where you add the code. Hope that makes sense.

    • http://www.creare.co.uk/ James Bavington

      I’ve added within the code embed above, a jQuery onClick even anchored around an ‘X’ that you can use to close the banner.

    • Catriona Murphy

      Hi James, yeah I see that now. Thanks for your quick response! :)

      • http://www.creare.co.uk/ James Bavington

        No problem at all, let me know if you have any problems implementing.

        • Catriona Murphy

          Hi James, I was able to make the ‘X’ show within the message but for some reason, when I clicked on it, it didn’t close it. Do you think this may have to do with jQuery? Thanks.

          • http://www.creare.co.uk/ James Bavington

            It could be, do you have jQuery running on your site?

          • Catriona Murphy

            Hi James, sorry in the delay getting back you. I’m pretty sure that the website has jQuery on it.

          • http://www.creare.co.uk/ James Bavington

            No problem, hard to say without taking a close look. Would it be possible to post or email me the URL with the banner on, and I can take a quick look for you?

  • http://www.creare.co.uk/ James Bavington

    Hi Catriona, I don’t think you’re running jQuery on the page. You can either run jQuery, or to save on the load time, you can use regular JavaScript. Simply change the onclick=”” contents to this:

    onclick="document.getElementById('cookie-law').remove();"

  • http://www.creare.co.uk/ James Bavington

    Hi Chris, I don’t think I’d backslashed an inverted comma properly. Try it again now from the code above.

  • http://piciscan.co.uk PiciScan

    Hi there, this looks like just the thing I am after for my site. It looks easy to style and implement and your video is informative. Please can I just ask if this will work with a secure site? I have thus far been unable to find anything that will function on a secure site and hope that this will. If it doesn’t in its current format, is there anything I can do to make it function on a site with an SSL certificate? So far, other plugins are marked as insecure and don’t appear unless I allow the browser to display insecure elements. I am looking for a solution that will be secure, and display properly.

    • http://www.creare.co.uk/ James Bavington

      Thanks for the kind comments about the Script and video. The Script is completely self-sufficient and doesn’t rely on any external files or assets so I can’t see you having a problem using it on your secure site. Please do let me know though if you have any issues and I’ll be happy to help.

      • http://piciscan.co.uk PiciScan

        Hi James,
        Thanks for that. I was thinking, after I’d asked the question, that it probably would be okay, as it doesn’t seem to rely on anything external. Other plugins fall down because they are dependent on http:// links. I’ll give it a go and get back to you with the result.
        Mark

  • Chris Simmons

    Hi. I like the script but I can’t get the X (close) to work in IE (versions 8 -11). Dev tools shows an error message:
    “Object doesn’t support this property or method .remove”
    The script works fine in Firefox, Chrome, Safari.
    Can you give me any advice on how to fix this?

    • Chris Simmons

      Correction: doesn’t work in Opera either:
      error: document.getElementById(‘cookie-law’).remove();

    • http://www.creare.co.uk/ James Bavington

      Hi Chris, sorry to hear that the Script isn’t working for you, I’ve just doubled checked my local version and it’s working OK for me. Please could you drop me a link to your development site and I can take a closer look at the error and help get it working. Please drop on here or Tweet it to me @jamesbavington

  • Pete

    I think this is a great script but I cant get the “X close” to work in ie 9 I have tried the “document.getElementById(‘cookie-law’).remove();” tip but this doesn’t work either, I am running jquery?

    • http://www.creare.co.uk/ James Bavington

      Hi Pete, could you possibly send me a URL to your development site so that I can check it out for you? The Script should work in IE9, so I’d love to take a look and see what the problem is incase there’s something I’ve missed.

  • http://www.creare.co.uk/ James Bavington

    Thanks Chris, I’m just taking a look now. Please could you remove the hard-coded 2x Divs for the Cookie Banner. The Script will automatically create those Divs in the browser once the page has loaded. If you inspect the page using Firebug etc, you’ll see the Divs appear twice.

    • Chris Simmons

      Hi,

      removed 6 lines from html (cookie stuff).
      Or should I leave class=”cookiebanner”> ?
      If the divs shouldn’t be there, I must have misunderstood your instructions above.
      Thanks for looking at this.

  • Chris Simmons

    All working now with new js you put.
    Thanks for your help with this.
    Please can your remove the link to the test page in my post above?

  • http://www.elvangold.co.uk Ian McEwan

    Hi, could the script be added to a site-wide template, rather than each individual page?

    • http://www.creare.co.uk/ James Bavington

      Absolutely, I’d recommend adding it to a separate JS file, and sourcing it in via your theme/templates to every page.

      • http://www.elvangold.co.uk Ian McEwan

        Thank you James, I’ll give it a try.

      • http://www.elvangold.co.uk Ian McEwan

        Hi, I’m having trouble getting the script to run in a Business Catalyst site. I have put the script in a JS file and linked it to the site template. The first problem is that the cookie is dropped okay but the banner doesn’t show, and the second is that the shopping cart doesn’t work with the script. Can you think of anything obvious that I may be doing wrong? I know the script works just fine and that the fault is mine.

  • Les

    Added to site and working however one question. On initial display I get the warning displayed but if I then choose to leave the page (no consent) but later return I don’t get the warning redisplayed. Is this correct? I assumed that by leaving I wasn’t giving consent at that moment and if I then return shouldn’t I still get the warning redisplayed?

    • http://www.creare.co.uk/ James Bavington

      Hi Les, yes by default the banner will only display the once, even if it’s not closed. The script was designed to replicate the implied consent method as initially adopted by the BBC.

  • Pat

    I am having issues getting this to work in IE 8 – I know it sounds crazy (we still have windows 7 machines with IE8) but i am getting this error is there anyway round it?
    SCRIPT438: Object doesn’t support property or method ‘hasOwnProperty’

    Works on all other browsers and on IE 8 if the document standards are above IE 8!!

    • http://www.creare.co.uk/ James Bavington

      Hi Pat, is your script online that I can take a look at? I remember testing this down to IE7 when we wrote it, so hopefully I can help you out with a quick fix.

  • http://www.wasaweb.net/ wasaweb

    Thank you for creating this JavaScript: it’s really neat! Is there a way to hide the message to those who have disabled cookies on their browsers? At the moment, in case where a user has enabled JavaScript but disabled cookies on his / her browser, I think the dialogue is shown on each page loaded, as JavaScript is executed, but the cookie cannot be set.

    • http://www.creare.co.uk/ James Bavington

      Wasaweb, this is a good suggestion actually, I’ll try and tweak the code ASAP to do this.

      • sjefzodic

        Do you have an ETA for the ‘Creare’s ‘Implied Consent’ EU Cookie Law Banner’ tweaked code?
        Your script is already good and can be even better. no unnecessary features, effective and exactly what it should do.
        Thanks James for your work.

  • Mark

    Exactly what I was looking for. Simply to set up and configure, does exactly what it says. Thank you.

  • Carole

    Hi Mark- great code and super video especially for a newbee to web design. I do have one problem- the cookie displays on phone nad tablet but not on desktop size. Do you know why this might be? I’m using bootstrap 3.

    • http://www.creare.co.uk/ James Bavington

      Hi Carole, thanks for the kind comments. Hard to say without checking out your site if you can DM me on Twitter or via our contact form.

  • Carole

    Sorry I meant James- my eye obviously caught Mark’s comment below!

  • michauko

    Thanks for sharing it. I gave a credit back on my web sites. Regards.

  • Stephanie

    Hi! Thank you for this great script – I am a complete newbe but was able to implement it. But, I’d like for the banner to be on the bottom of the page, but whenever I change the style to position:fixed; bottommargin:0; the banner goes to the bottom, but behind a image carrousel I have there… can you please help me? I’m stuck! (The link to the video is also broken…) http://martinez-benazet.com/test/laclinica.html

    • http://www.creare.co.uk/ James Bavington

      Hi Stephanie, you just need to apply some CSS Absolute Positioning to your banner, to ensure if sits above the carousel.

      #cookie-law {
      z-index: 999;
      }

      • Stephanie

        Thank you so much for your quick answer!!! Now it floats on top of everything!!! 😀 Unfortunately I can’t get it down to the bottom now…? It seems to be stuck to the top left corner. I have: position:fixed; bottommargin:0; z-index: 999;

        Thank you for your patience!

  • http://www.learningtoo.eu Pat Godfrey

    [FIXED HEADER SOLUTION] Thanks for this script. It is well explained and easy to apply to a standard page. However, I had added a jQuery on-scroll dynamic-sized header to my site as well as responsive media queries, so it took me a while to figure out how to integrate your great script with it: I’m not a developer (learning/user experience designer only – sorry). I thought my solution might be a useful return for your great script by way of thanks?

    PROBLEM: The site banner is fixed to the top of the page as a header (CSS position:fixed). The jQuery changes its class on scroll between CSS .large (12em) and CSS .small (4em), which I also use to control its height and positioning responsively between viewports. So the body tag method resulted in a difficulty positioning it responsively according to the media queries in my CSS or dynamically according to the on-scroll jQuery. Also, when the cookie was set the remaining content would not align easily in the void left to the dynamic header.

    SOLUTION: The solution I came up with was to create the new div in an ‘aside’ tag, which enabled me to maintain the semantic of the cookie notice within the page content and after the header. The aside tag is styled according to the dynamic classes created by the jQuery on-scroll script (CSS .large and CSS .small) and given a CSS height:0; and CSS margin-top:n; to match the dynamic height of the header using the jQuery (and media queries setting the CSS .large to the CSS .small values – so CSS .large becomes margin-top:4em on a smaller viewport, for example). The result is to display the cookie message exactly beneath the fixed header throughout the responsive CSS rules and the jQuery class swapping, and to maintain the presentation once the cookie is set and the notice no longer displays.

    Anyway, it looks swish and I’m pleased your commenting and coaching video has helped me push my boundaries and to make my updated site cookie compliant :) This was my first cookie! The site will be live shortly to view the codes. Cheers guys, Pat (LearningToo.eu).

  • http://paulleaderinbrackets.co.uk Paul Leader

    Hello thank you for this script, it works brilliantly as I’m sure you know! I’m currently trying to put together a personal website and I have incorporated some accessibility features. One such feature uses alternate style sheets and another excellent script that I found called Style Sheet Switcher. The problem I am having is that in order for Style Sheet Switcher to remember preferences, it requires a small script placing in the header:
    window.onload=function(){
    var formref=document.getElementById(“switchform”)
    indicateSelected(formref.choice)
    indicateSelected(formref.switchcontrol)
    }
    and this is in some way clashing with yours. I’ve tried everything to get the 2 scripts to integrate or sequence but it’s stumped me. Any help that you may be able to offer would be more than appreciated. Paul

  • Gabriele

    Hello and thanks for the script, it’s simple to add and modify but… how can I do to make appear the popup in every page of the site until I make click on the “X” to close it (in my case I’ve changed the “X” with “Accetto”)?For the italian law, the popup must be visible in all pages for all the time until the visitor doesn’t accept the cookies policy, so the cookie must be saved into the browser only after the click on, in my case, “Accetto”!
    Thank you for your answer.

  • Claudio

    Hello guys and thanks for the script. I’ve just a little question. By clicking the “X” the pop up is closed. But if I refresh the page the pop up still appear. Is there a way to click the “X” and close the popup until I clean the cookies?

  • a120

    thanks guys, sweet piece of code, spent 4 hours looking for that!

  • Guille Acosta

    Great! Really usefull

  • David Jackson

    Top stuff brilliant. Why aren’t all articles like this, simple clear straightforward

  • Join Me In The 1900s

    Thank you for this script. Whatever I do, though, I can’t
    make the banner appear in the middle of the page (horizontally). Can you help
    please? I have tried margin: auto. Also is it possible for the X to be
    superscript so that it appears at the top right hand side like regular close
    commands? Thank you.

    • Chosen-Blood

      Did you set a width for your banner? Otherwise it will be centered on the entire width, and it will appear to be to the left I believe. Made an example: https://jsfiddle.net/wjvwr49u/

    • http://www.twitter.com/jamesbavington James Bavington

      If you would be able to share a link to your code, I can happily take a look for you.

  • http://www.twitter.com/jamesbavington James Bavington

    Hey, you just need to add:

    left: 0;
    right: 0;
    to your #cookie-law{} ID.

  • tekboy

    is posible to have it only show based on user location like, like will show only when users are in europe wont show if users are from the us

  • Giuseppe Malacrino

    Thank you for the script. It is perfect! How can I add an onscroll event (that possibly calls the removeMe function) so that if the user scrolls down, it closes the message?

  • Gilly

    Hi James, Great article, I’ve been using this script on a couple of websites for some time and it’s been great so thanks!

    One Question though: I’m updating my website atm and i’m using the retina.js script but it doesn’t seem to play well with Cookie script, if the Cookie script is loaded inline or through a custom.js file the retina.js just stops working… any suggestions as to why?

    Thanks
    Gilly

  • Łukasz Wójcik

    Hi, Thanks a lot! I have a question though – how to assure a correct charset in the notification? I cannot get polish native letters to work…

  • Stefano Melis

    Thanks for this useful, clean and to the point script. I have added a simple scroll detection by supplementing the last two functions with a listener, here’s the code should it be useful to anyone else:

    window.onload = function(){
    if(checkCookie(window.cookieName) != window.cookieValue){
    createDiv();
    document.addEventListener(“scroll”, removeMe);
    }
    }
    function removeMe(){
    var element = document.getElementById(‘cookie-law’);
    element.parentNode.removeChild(element);
    document.removeEventListener(“scroll”, removeMe);
    }

  • Jim

    Thanks guys. A really nice solution which I was easily able to deploy on a Joomla based site.

  • Bern

    This does not work in opera and chrome. i have not yet tested it in safari. it does not store the cookie? every time i open the website the popup appears? thanks