jQuery Plugin For Customizable EU Cookie Law Notice - Cookie Banner

File Size: 4.82 KB
Views Total: 1655
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Customizable EU Cookie Law Notice - Cookie Banner

Just another jQuery plugin that displays customizable, styleabe and dismissable EU Cookie Law Notice on your webpage.

How to use it:

1. Load jQuery library and the jQuery Cookie Banner plugin at the bottom of the web page.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="cookieBanner.js"></script>

2. Initialize the plugin.

var cookieBanner = new namespace.CookieBanner({
    //configure options here
});

3. Bind click event to dismiss button.

cookieBanner.closeElement.on('click', function(e){

    e.preventDefault();

    cookieBanner.removeMe();
    
});

4. This will display a default cookie audit like the following:

<div class="cookie-banner">
  Our website uses cookies. By continuing we assume your permission to deploy cookies, as detailed in our <a href="/privacy-policy" rel="nofollow" title="Privacy Policy">privacy policy.</a>.
  <a class="cookie-banner__close" href="#">Close <i class="icon--close"></i></a>
</div>

5. Add your own styles to the cookie notice banner.

.cookie-banner {...}

6. Full configure options.

//False disables the Cookie, allowing you to style the banner
dropCookie: true,

//Number of days before the cookie expires, and the banner reappears
duration: 14,

//Name of our cookie
cookieName: 'complianceCookie',

//Value of cookie
cookieValue: 'on',

//Selector within which to insert the cookie notice
parentElement: $('body'),

 //Prepend to the selector element (if false, append)
prepend: true,

//Content for the cookie banner
content: 'Our website uses cookies. By continuing we assume your permission to deploy cookies, as detailed in our <a href="/privacy-policy" target="_blank" rel="nofollow" title="Privacy Policy">privacy policy.</a>',

//close element selector
closeElementSelector: '.cookie-banner',

//content for the close elemenent
closeElementContent: ' <a class="cookie-banner__close" href="#">Close <i class="icon--close"></i></a>',

//Class to attach to the banner
bannerClass: 'cookie-banner',

This awesome jQuery plugin is developed by danny-allen. For more Advanced Usages, please check the demo page or visit the official website.