Wanted: Script for cookie consent pop up message.

**robertsaunders** · 08-20-2015, 06:09 PM

Google has told me that I need to obtain EU end users’ consent to the storing and accessing of cookies and other information if I want to continue using AdSense.

They have suggested links to various sites that offer scripts for pop up bars that disappear when you accept cookies (such as https://silktide.com/tools/cookie-consent/download/) but they don't allow me to customise the font and colours.

Can anyone suggest where I might be able to get a simple customiseable script? All I want is a simple bar at the top of the page with a message saying "This site uses cookies etc. " a link to "more info", and an "OK" button which makes the bar and message disappear when clicked.

Thanks

Rob

**Beverleyh** · 08-21-2015, 12:22 PM

Hopefully this will help: http://www.dynamicdrive.com/forums/e...ie-Consent-Bar

**robertsaunders** · 08-21-2015, 10:56 PM

Originally Posted by Beverleyh

Hopefully this will help: http://www.dynamicdrive.com/forums/e...ie-Consent-Bar

Thank you very much indeed, Beverley! That is just what I was after.

I understand all the HTML and CSS but I know very little about JS. Can I put the script into an external file and link to it, to save having to paste all the code into every page? And if so, how would I save the external file using notepad?

Also, if I've inserting the JS inline, does it matter where it goes or can I put it anywhere?

Thank you again.

Rob

**Beverleyh** · 08-22-2015, 07:38 AM

Yes you can save it into an external file. For that you would open up Notepad (I think that's in Programs >> Accessories?) and copy+paste the JavaScript into it - just the code between the <script></script> tags - then save it with the .js extension. So you might call the file "cookie.js". You can type the full file name, including the .js extension, into the field for the file name when you save from Notepad. Then you upload the "cookies.js" file to your web server - let's say you save it in the main folder of your website. You would link to it from within your web page(s) like this;

Code:

<script src="/cookie.js"></script>

You should put this JavaScript link reference above the closing </body> tag (it's preferred that way for almost all JavaScripts nowadays, so that the rest of the page can render without being blocked waiting for scripts to load).

Hope that helps

**BorderTerroir** · 08-23-2015, 05:59 AM

Sorry Bev I can't get this to work.

Here's my test page;
http://www.castlefordheritagetrust.org.uk/zSandPit.php

I thought the problem might be with this line;
document.cookie = "consent=ok;path=/;expires="+d.toGMTString();

So I moved the js file to the root directory and it still doesn't work.

Where am I going wrong?

John

**Beverleyh** · 08-23-2015, 06:16 AM

You've missed some of the code in the cookies.js file - there should be a line which adds a class of "js" to the <html> tag, and 3 lines where the variables are defined for cookie, btn and bar.

Have another look at the source of the demo page http://fofwebdesign.co.uk/template/_...ie-consent.htm and copy+paste the whole code block (but not the block for my Google Analytics.

**BorderTerroir** · 08-23-2015, 08:54 AM

Sorry Bev I'm still not there.

My js file now reads like this;

Code:

document.documentElement.className = 'js'; // adds .js class to <html> tag

var cookie = getCookie('consent'),
    bar = document.getElementById('consent'),
    btn = document.getElementById('ok');

btn.onclick = function() { // hide bar and set cookie when button is clicked
	bar.style.display = 'none';
	var d = new Date; 
	d.setTime(d.getTime()+24*60*60*1000*90); // 90 days
	document.cookie = "consent=ok;path=/;expires="+d.toGMTString();
	}

function getCookie(name) {
	var v = new RegExp(name+"=([^;]+)").exec(document.cookie);
	return (v != null) ? unescape(v[1]) : null;
	}

bar.style.display = (cookie == 'ok') ? 'none' : 'table'; // hide bar if cookie is set

But it still doesn't work.

http://www.castlefordheritagetrust.org.uk/zSandPit.php

John

**Beverleyh** · 08-23-2015, 09:06 AM

Correction - put the link reference to the JS file before the closing </body> tag.

**BorderTerroir** · 08-23-2015, 09:31 AM

Many thanks that's sorted it.

You are a star!

**robertsaunders** · 08-23-2015, 06:38 PM

Bev, thank you so much for your help. I've just added the code to http://www.curiouser.co.uk and it's working fine but I have a small issue. When I view the site on an iPad (Chrome and Safari) the bar does not stretch the full length of the screen - it only goes about 95% of the way across. Any ideas why this might be? I doesn't do it on your site but I can't work out what is making it do it on mine.

Rob