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!
Twitter
Facebook
Linkedin