Cookie Consent Notice Plugin For Bootstrap 4 - cookieAlert.js

Cookie Consent Notice Plugin For Bootstrap 4 - cookieAlert.js
File Size: 22.2 KB
Views Total: 30256
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

cookieAlert.js is a JavaScript Cookie Consent Notice plugin which allows your web app to comply with the EU cookie law by alerting users that your site has cookies.

The plugin uses Bootstrap 4 framework's alerts component to create a cookie notice bar at the bottom of the web page that is dismissable and saves the dismiss status in the browser cookies.

Also provides a standalone version which allows you to implement the cookie alert plugin without any 3rd dependencies.

How to use it:

1. Include the Bootstrap 4 framework's stylesheet in the header of the web page.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />

2. Create the Cookie Consent Notice in a Bootstrap 4 alert component.

<div class="alert alert-dismissible text-center cookiealert" role="alert">
  <div class="cookiealert-container">
    <b>Do you like cookies?</b> &#x1F36A; We use cookies to ensure you get the best experience on our website. <a href="http://cookiesandyou.com/" target="_blank">Learn more</a>

    <button type="button" class="btn btn-primary btn-sm acceptcookies" aria-label="Close">
        I agree
    </button>
  </div>
</div>

3. Include the necessary stylesheet cookiealert.css after Bootstrap's stylesheet.

<link rel="stylesheet" href="cookiealert.css" />

4. Include the main plugin file cookiealert.js at the end of the document. That's it.

<!-- From Local -->
<script src="cookiealert.js"></script>
<!-- From CDN -->
<script src="https://cdn.jsdelivr.net/gh/Wruczek/[email protected]/cookiealert.js"></script>

5. Fire an event when the user accepts cookies.

window.addEventListener("cookieAlertAccept", function() {
  alert("cookies accepted")
})

Changelog:

v1.2.0 (2020-06-12)

  • Added an "cookieAlertAccept" event

v1.1.2 (2020-04-30)

  • A couple of accessibility-related improvements.

2019-01-21

  • gracefully ignore pages without cookie notification markup

2018-12-03

  • Added copyright, inlined cubes pattern
  • Rename cookiealert-standalone.js to cookiealert.js

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