WebDesires - Web Development Cannock, West Midlands
Basket is empty

jQuery Quick Easy Cookie Policy

Need Some Help? We are here for you!

We have a very friendly service - Come and chat to us and let us know what you need, we work for an hourly fee and can also provide you a no obligation quote and begin work immediately in most cases. Click "Request Support" or use our Live Chat.

Request Support

There is a mobile optimized version of this page, view AMP Version.

Looking for a quick and easy cookie policy message for your website? This cookie policy script is built entirely using JavaScript/jQuery and only requires you to add the JavaScript code to your web pages for a fast, effortless cookie policy warning popup for your visitors.

I have implemented various options so that you can configure the look and position of the cookie popup to suit your individual needs, all you need to do is modify the options array in the JavaScript to suit your requirements.

Lets start off explaining the various options you can configure:

options = {
	cookiename:'wdcookieconsent',
	bgcolor:'#303333',
	txtcolor: '#ffffff',
	txtsize: '16px',
	position: 'bottom-left',
	positionoffset: '10px 10px 10px 10px',
	boxpadding: '10px 10px 10px 20px',
	borderradius: '5px',
	message: 'We use cookies to track usage and preferences.',
	moreinfo: {
		enabled: true,
		text: 'More Information...',
		link: '/privacy-policy/',
		txtcolor: '#ffffff'
	},
	button: {
		text: 'I Agree',
		bgcolor:'#88c141',
		txtcolor: '#ffffff',
		borderradius: '5px',
		padding: '10px',
		border: '0px',
	}
	
}

There are many options here which should be mostly self-explanatory as they are either content or CSS values.

  • cookiename – The name of the cookie variable you wish to set to track a users agreement.
  • bgcolor – The background color you want to use for the cookie message box.
  • txtcolor – The text color you want to use for the cookie message in the message box.
  • txtsize – the font size of the cookie message.
  • position – The position you would like the cookie consent box to appear, various options:
    • bottom-left – Show the consent popup at the bottom left of the screen.
    • bottom-right – Show the consent popup at the bottom right of the screen.
    • top-left – Show the consent popup at the top left of the screen.
    • top-right – Show the consent popup at the top right of the screen.
  • positionoffset – top/right/bottom/left offset in pixels from the edge of the screen.
  • boxpadding – top/right/bottom/left padding in pixels for the cookie message box.
  • borderradius – any border radius you want to define for the cookie box, set to 0px for none.
  • message – the cookie box message.
  • moreinfo – this controls the “more information” link after the cookie message.
    • enabled – you can disable this by setting this to false.
    • text – the text for the a tag.
    • link – the link url to your cookie policy page.
    • txtcolor – the color you wish the link to be.
  • button – this controls the “I agree” button.
    • text – the text inside the button.
    • bgcolor – the background color of the button.
    • txtcolor – the text color of the button.
    • borderradius – any border radius you want to define for the button, set to 0px for none.
    • padding – the padding inside the button.
    • border – any border you want on the button ie. “1px solid red”.

 

Here is the full block of code which we recommend calling from the <head> of your webpage:

jQuery(document).ready(function(){
	options = {
		cookiename:'wdcookieconsent',
		bgcolor:'#303333',
		txtcolor: '#ffffff',
		txtsize: '16px',
		position: 'bottom-left',
		positionoffset: '10px 10px 10px 10px',
		boxpadding: '10px 10px 10px 20px',
		borderradius: '5px',
		message: 'We use cookies to track usage and preferences.',
		moreinfo: {
			enabled: true,
			text: 'More Information...',
			link: '/privacy-policy/',
			txtcolor: '#ffffff'
		},
		button: {
			text: 'I Agree',
			bgcolor:'#88c141',
			txtcolor: '#ffffff',
			borderradius: '5px',
			padding: '10px',
			border: '0px',
		}
		
	}
	cookieConsent(options);
});

function cookieConsent(options) {
	if (readCookie(options.cookiename) == null) {
		if (options.position == 'bottom-left') {
			var css = "position: fixed;left: 0;bottom:0px;";
		} else if (options.position == 'bottom-right') {
			var css = "position: fixed;right: 0;bottom:0px;";
		} else if (options.position == 'top-left') {
			var css = "position: fixed;left: 0;top:0px;";
		} else if (options.position == 'top-right') {
			var css = "position: fixed;right: 0;top:0px;";
		}
		
		jQuery('body').append('<'+'style>'+
			'.wdcc-box { background-color:'+options.bgcolor+';color:'+options.txtcolor+';border-radius:'+options.borderradius+';margin:'+options.positionoffset+';padding:'+options.boxpadding+';font-size:'+options.txtsize+';z-index: 9999;'+css+'} '+ 
			'.wdcc-box a { font-size:'+options.txtsize+';color:'+options.moreinfo.txtcolor+'!important;} '+
			'</style>');
			jQuery('body').append('<div class="wdcc-box">'+
				'<span class="wdcc-left-side">» '+options.message+' '+(options.moreinfo.enabled==true?'<a tabindex="1" target="_blank" href="'+options.moreinfo.link+'" rel="">'+options.moreinfo.text+'</a>':'')+' </span>'+
				'<span class="wdcc-right-side"> <button id="wdccCookie" onclick="createCookie(\''+options.cookiename+'\', \'accepted\', 999);jQuery(\'.wdcc-box\').remove();" style="padding:'+options.button.padding+';border:'+options.button.border+';background-color:'+options.button.bgcolor+';color:'+options.button.txtcolor+';border-radius: '+options.button.borderradius+';cursor:pointer">'+options.button.text+'</button> </span>'+
			'</div>');
	}
}

function createCookie(name, value, days) {
	var expires;

	if (days) {
		var date = new Date();
		date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
		expires = "; expires=" + date.toGMTString();
	} else {
		expires = "";
	}
	document.cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value) + expires + "; path=/";
}

function readCookie(name) {
	var nameEQ = encodeURIComponent(name) + "=";
	var ca = document.cookie.split(';');
	for (var i = 0; i < ca.length; i++) {
		var c = ca[i];
		while (c.charAt(0) === ' ')
			c = c.substring(1, c.length);
		if (c.indexOf(nameEQ) === 0)
			return decodeURIComponent(c.substring(nameEQ.length, c.length));
	}
	return null;
}

And thats it! A quick simple, easy to modify cookie consent popup for your website.

Let us know what you think!

5 1 vote
Article Rating
Need Some Help? We are here for you!

We have a very friendly service - Come and chat to us and let us know what you need, we work for an hourly fee and can also provide you a no obligation quote and begin work immediately in most cases. Click "Request Support" or use our Live Chat.

Request Support

SHARING IS CARING!
Facebooktwitterredditpinterestlinkedinmail

Author: Dean Williams

Professional PHP Web Developer with expertise in OpenCart Web Development, WordPress Web Development, Bespoke Systems - also a seasoned Linux Server Administrator.


0 Comments
Inline Feedbacks
View all comments

Let's Begin Your Journey...

Get in touch us now to begin your journey to having a beautifully crafted mobile responsive website. If you're still unsure what we could do for you then take a look at our Why Us page which includes reviews, or take a look at our Portfolio.

We can work on improving existing websites or craft a new stylish website making your business stand out.

You could always catch us by E-Mail, Telephone, Skype or Live Chat to us below.


0
Would love your thoughts, please comment.x
()
x