Beautiful Cookie Consent & Compliance Popup Plugin - jQuery cookieBubble

File Size: 148 KB
Views Total: 5485
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Beautiful Cookie Consent & Compliance Popup Plugin - jQuery cookieBubble

cookieBubble is a jQuery plugin for creating a configurable, beautiful Cookie Consent & Compliance popup to inform EU users that your website uses cookies.

The next version is on the way and will have the GDPR options to make your website & webapp comply with the European GDPR and Cookie law.

Installation:

# Yarn
$ yarn add cookie-bubble

# NPM
$ npm install cookie-bubble --save

How to use it:

1. Include jQuery JavaScript library together with the cookieBubble.css and cookieBubble.js on the page.

<link rel="stylesheet" href="css/cookieBubble.css"></link>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous"></script>
<script src="js/cookieBubble.js"></script>

2. Add cusotm message to the Cookie Consent & Compliance Popup as follows:

<div class="cookieBubble">
  <div class="cb-wrapper">
    <div class="cb-row">
      <div class="cb-message">
        <span>We use cookies to personalize your experience. By continuing to visit this website you agree to our use of cookies. <a href="privacy.html">Learn More</a></span>
        <a href="javascript:void(0)" class="gotit-btn">GOT IT!</a>
      </div>
    </div>
  </div>
</div>

3. Initialize the jQuery cookieBubble plugin with default settings.

$(document).ready(function(){
  $('.cookieBubble').cookieBubble();
});

4. All default configuration options to customize the Cookie Consent & Compliance Popup. These options can be overwritten when initializing plugin, by passing an object literal

$('.cookieBubble').cookieBubble({
  icon:true,
  iconColor:false,
  buttonColor:false,
  buttonTextColor:false,
  buttonRadius:false
});

5. By default, the plugin show the to users only once every 30 days. You can override the default expiration date in the JavaScript:

$('.cookieBubble').cookieBubble({
  cookieMaxAge:30
});

Changelog:

v1.1.3 (2019-01-17)

  • Improvement

About Author:

Author: João Pereira

Website: https://github.com/joaopereirawd/cookieBubble


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