Enhanced Cookie Consent Bar In jQuery - cookie-consent.js

An easy-to-use and highly customizable cookie consent bar that informs your visitors about the use of cookies in your website.

More Features:

• Make your comply with the European cookie law
• Custom cookies notice message.
• Custom CSS styles.
• Saves cookie consent information in cookies or web storage.
• Trigger a function after the user has accepted the policy.

See Also:

• 7 Best Free GDPR Cookie Consent Banner Plugins In JavaScript

How to use it:

1. Load the minified version of the cookie-consent.js plugin after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/jquery.cookie-consent.min.js"></script>

2. Initialize the plugin to display a basic cookie consent bar on the page.

$(function(){
  $.cookieConsent();
});

3. Customize the cookie notice message.

$.cookieConsent({
  message: 'This website uses cookies. <a href="https://www.jqueryscript.net/privacy/">Privacy Policy</a>',
});

4. Apply your own styles to the cookie consent bar. In this example, we're going to fix the cookie consent bar to the top of the page.

$.cookieConsent({
  style: "position: fixed; width:100%"
});

5. Customize the cookie consent button.

$.cookieConsent({
  consentMessage: "I understand",
  consentStyle: "",
  acceptClass: "cookieAccept",
});

6. Determine how to save the cookie consent information.

$.cookieConsent({
  // 10 years
  consentTime: 3650, 

  // cookie, local, or session
  storage: "cookie",
});

7. Enable the development mode.

$.cookieConsent({
  testing: true
});

8. Callback functions.

$.cookieConsent({
  onInit: function(){ },
  onConsent: function(){ },
  onTemplate: function(){ console.log(this) },
});

Changelog:

2022-11-14

• v1.0.19

---

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