Web Design. Web Development. Web Hosting.
0 items

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

Last Updated: 21/10/2022

Looking for a fast way to add a cookie policy popup to your website?

We have built a very simple, light-weight cookie policy popup script, which requires NO external CSS, and NO external Javascript.

Not only that, it comprises of just a few lines of Javascript you can quickly add to your website.

It even has an extensive array of options so you can style and configure the script to behave and appear to your liking.

 

Cookie Script Options

Lets start off explaining the various options you can configure:

options = {
 cookiename:'wdcookieconsent',
 bgcolor:'#e20018',
 border:'none',
 txtcolor: '#ffffff',
 txtsize: '16px',
 contentalign: 'center',
 position: 'bottom-left',
 width: '300px',
 positionoffset: '10px 10px 10px 10px',
 boxpadding: '10px 10px 10px 10px',
 borderradius: '5px',
 message: '» This website uses cookies to improve your experience. You can read more about this in our ',
 moreinfo: {
 enabled: true,
 text: 'Cookie Policy',
 link: '/cookie-policy',
 txtcolor: '#ffffff'
 },
 button: {
 text: 'OK',
 bgcolor:'#1a171b',
 txtcolor: '#ffffff',
 borderradius: '5px',
 padding: '10px 20px',
 margin: '10px 0px 0px',
 border: '1px solid white',
 newline: true,
 },
 showauthor: 'full'
 }

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.
  • border – The border CSS you want, ie. 1px solid black — or none
  • txtcolor – The text color you want to use for the cookie message in the message box.
  • txtsize – the font size of the cookie message.
  • contentalign – the alignment for the content, left, center or right
  • 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.
  • width – a max width you want for the cookie policy box, we dont recommend going about 300px set to none to show in one line.
  • 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.
    • margin – the margin around the button.
    • border – any border you want on the button ie. 1px solid red.
    • newline – put the button on a newline with true or keep it after the text false
  • showauthor – will display our authorship information in small text at the bottom, you can elect for full which will show the product name and a link to our site, min which will just show product name or none to hide this entirely.

 

Simple Cookie Policy Code

Copy the code below into the header of your website and adjust the options array (details above) to your liking. And thats it you are done and have a full cookie policy popup on your website.

 

<script>
jQuery(document).ready(function(){
 options = {
 cookiename:'wdcookieconsent',
 bgcolor:'#e20018',
 border:'none',
 txtcolor: '#ffffff',
 txtsize: '16px',
 contentalign: 'center',
 position: 'bottom-left',
 width: '300px',
 positionoffset: '10px 10px 10px 10px',
 boxpadding: '10px 10px 10px 10px',
 borderradius: '5px',
 message: '» This website uses cookies to improve your experience. You can read more about this in our ',
 moreinfo: {
 enabled: true,
 text: 'Cookie Policy',
 link: '/cookie-policy',
 txtcolor: '#ffffff'
 },
 button: {
 text: 'OK',
 bgcolor:'#1a171b',
 txtcolor: '#ffffff',
 borderradius: '5px',
 padding: '10px 20px',
 margin: '10px 0px 0px',
 border: '1px solid white',
 newline: true,
 },
 showauthor: 'full'

 }
 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;";
 }

 css += "text-align:"+options.contentalign;

 jQuery('body').append('<'+'style>'+
 '.wdcc-box { width:'+options.width+';border:'+options.border+';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+'" style="text-decoration:underline">'+options.moreinfo.text+'</a>':'')+' </span>'+
 (options.button.newline === true ? '<br>':'' )+
 '<span class="wdcc-right-side"> <button id="wdccCookie" onclick="createCookie(\''+options.cookiename+'\', \'accepted\', 999);jQuery(\'.wdcc-box\').remove();" style="margin:'+options.button.margin+';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>'+
 (options.showauthor == 'full' ? '<br><span style="font-size:13px">Using <a href="https://webdesires.co.uk/knowledge-base/jquery-quick-easy-cookie-policy/" style="text-decoration:underline;font-size:13px" target="_blank">Quick Easy Cookie Policy</a> by <a href="https://webdesires.co.uk/" style="text-decoration:underline;font-size:13px" title="Web Development, Web Design & Hosting UK" target="_blank">WebDesires</a></span>' : '')+
 (options.showauthor == 'min' ? '<br><span style="font-size:13px">Using <a href="https://webdesires.co.uk/knowledge-base/jquery-quick-easy-cookie-policy/" style="text-decoration:underline;font-size:13px" target="_blank">Quick Easy Cookie Policy</a>' : '')+
 '</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;
}
</script>

 

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
Author: Dean WilliamsProfessional PHP Web Developer with expertise in OpenCart Web Development, WordPress Web Development, Bespoke Systems - also a seasoned Linux Server Administrator.


Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments


Share this page..

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 email, telephone, Skype or live chat to us below.


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