Cookie Consent Notice Plugin For Bootstrap 4 - cookieAlert.js

Cookie Consent Notice Plugin For Bootstrap 4 - cookieAlert.js

cookieAlert.js is a jQuery Cookie Consent Notice plugin which allows your web app to comply 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.

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

<link rel="stylesheet" 

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="" target="_blank">Learn more</a>
    <button type="button" class="btn btn-primary btn-sm acceptcookies" aria-label="Close">
        I agree

3. To use as a jQuery plugin, you need to include jQuery and the js-cookie libraries at the bottom of your web page.

<script src=""></script>
<script src=""></script>

4. Then include the cookiealert-dependencies.js after jQuery library and done.

<script src="cookiealert-dependencies.js"></script>
<!-- cookiealert.css -->
<link rel="stylesheet" href="cookiealert.css">

5. To use as a standalone JavaScript plugin, just include the cookiealert-standalone.js script at the bottom of the web page. Done.

<script src="cookiealert-standalone.js"></script>
<!-- cookiealert.css -->
<link rel="stylesheet" href="cookiealert.css">

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

  • Publication date: 01.02.2018
  • Source