Cookie Consent Notice Plugin For Bootstrap 5/4 - cookieAlert.js

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 5/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 5 or 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 alert component.

<div class="alert text-center cookiealert" role="alert">
  <b>Do you like cookies?</b> &#x1F36A; We use cookies to ensure you get the best experience on our website. <a href="/privacy/" target="_blank">Learn more</a>
  <button type="button" class="btn btn-primary btn-sm acceptcookies">
    I agree
  </button>
</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/Bootstrap-Cookie-Alert@gh-pages/cookiealert.js"></script>

5. Fire an event when the user accepts cookies.

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

Changelog:

v1.2.0 (2023-06-22)

• Adjusted alert padding

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.