Dean Williams

jQuery Quick Easy Cookie Policy

You are currently viewing the Mobile Optimized version (AMP), some features may be missing or may not work as expected. Open Full 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.

 

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!

Author: Dean Williams

I'm a Web Developer, Graphics Designer and Gamer, this is my personal site which provides PHP programming advice, hints and tips