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

This is a mobile optimized version of this page, view original page.

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!

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!


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