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" 
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" 
      integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" 
      crossorigin="anonymous"
>

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. 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="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.0/js.cookie.min.js"></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.