Display Bootstrap Cookie Notice Alert Bar On Page Load – jQuery Cookie Alert Plugin

In this post I am going to share useful jQuery plugin (Cookie Alert) to display EU Cookie Law Notice bar on page on load to every new website visitor as it is important to display Cookie notice bar if your website uses cookie on user’s browser that’s why in this post i am writing tutorial about integration of Cookie Alert Bar Plugin. Cookie-Alert is a pure JavaScrip plugin that creates a cookie notice bar using Bootstrap 4 alert component to make your webpage to comply the European cookie law.




Integrate Bootstrap Cookie Notice Alert Bar

Libraries

Add bootstrap library + plugin’s library on page to enable cookie notice alert bar.

<!--CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<link rel="stylesheet" href="cookiealert.css">
 
<!--JS-->
<script src="cookiealert-standalone.js"></script>



HTML

Add following html bootstrap div container on page to display your own cookie alert custom message to comply EU Cookie Law Notice.

<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>

See live demo and download source code.

DEMO | DOWNLOAD

Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.