
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> 🍪 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.
- Publication date: 01.02.2018
- Source