Show And Hide Cookie Consent Banner Using localstorage

File Size: 11.1 KB
Views Total: 6121
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Show And Hide Cookie Consent Banner Using localstorage

A simple cookie consent plugin to make your Bootstrap powered website comply with the European cookie law.

The plugin displays a bottom cookie banner to inform visitors that your site has cookies. It uses local storage to save the close status so that the cookie banner won’t redisplay until the saved value is cleared.

How to use it:

1. Load the Cookie Banner plugin's JavaScript and CSS files into your Bootstrap website. jQuery and Bootstrap JS are optional.

<!-- jQuery Is Required For Bootstrap 4 version -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<!-- Bootstrap files -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>
<!-- Cookie Banner -->
<link rel="stylesheet" href="./src/cookie-banner.css">
<script async src="./src/cookie-banner.js"></script>

2. Add cookie consent message to the cookie banner.

<!-- Bootstrap 4 Version -->
<div class="nk-cookie-banner alert alert-dark text-center mb-0" role="alert">
  &#x1F36A; This website uses 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 ml-3" onclick="window.nk_hideCookieBanner()">
    I Got It
  </button>
</div>

<!-- Bootstrap 5 Version -->
<div id="cb-cookie-banner" class="alert alert-dark text-center mb-0" role="alert">
  &#x1F36A; This website uses 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 ms-3" onclick="window.cb_hideCookieBanner()">
    I Got It
  </button>
</div>

3. That's it. Override the default styles of the cookie consent banner.

.nk-cookie-banner {
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  z-index: 999;
  border-radius: 0px;
  display: none;
}

Changelog:

2022-06-13

  • Fixed demo

2021-10-20

  • Update cookie-banner.css
  • Works with the latest Bootstrap 5 framework.

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