GDPR Cookie Consent Notification With Bootstrap 4 - bsgdprcookies

bsgdprcookies is a jQuery plugin which lets you create GDPR/RODO compliant Cookie Consent/Cookie Usage notification popup using Bootstrap 4 modal component.

The plugin automatically shows the Cookie Consent popup on page load to make your website GDPR/EU Cookie Law compliant by informing the visitors about the use of Cookies when they first visit your website.

More about GDPR:

• A GDPR Checklist for Those Who Are Tired of GDPR Checklists
• Ultimate GDPR Compliance jQuery Toolkit
• EU GDPR Information Portal
• GDPR Compliant Cookie Consent Popup Plugin - jQuery ihavecookies.js
• Best GDPR Plugins To Make Your WordPress GDPR Compliant
• JavaScript GDPR Plugin For Google Analytics – Trackless
• GDPR Cookie Compliance Plugin With jQuery - gdpr-cookie

How to use it:

1. Load Bootstrap 4 framework and jQuery JavaScript library in the document.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

2. Load the jQuery bsgdprcookies plugin's JavaScript after jQuery.

<script src="jquery.bs.gdpr.cookies.js"></script>

3. Initialize the plugin to show a basic cookie accept modal on page load.

$('body').bsgdprcookies();

4. Customize the Cookie Consent modal with the following options.

$('body').bsgdprcookies({

  // unique ID
  id: 'bs-gdpr-cookies-modal',

  // extra class
  class: '',

  // modal title
  title: 'Cookies & Privacy Policy',

  // backdrop of the modal
  backdrop: 'static',

  // Cookie Consent message
  message: 'Your cookie message...',

  // shows scrollbar
  messageScrollBar: false,

  // max height
  messageMaxHeightPercent: 25,

  // auto displays the modal after 1.5 seconds
  delay: 1500,

  // 30 days
  expireDays: 30,

  // options for read more link
  moreLinkActive: true,
  moreLinkLabel: 'More informations..',
  moreLinkNewTab: true,
  moreLink: 'privacy-policy.php',

  // text for accept button
  acceptButtonLabel: 'Accept'

});

5. Advanced options which can be used to inform the user about the use of external services.

$('body').bsgdprcookies({
 
  allowAdvancedOptions: true,
  advancedTitle: 'Select which cookies you want to accept',
  advancedAutoOpenDelay: 1000,
  advancedButtonLabel: 'Customize',
  advancedCookiesToSelect: [
    {
        name: 'necessary',
        title: 'Necessary',
        description: 'Required for the site to work properly',
        isFixed: true
    },
    {
        name: 'preferences',
        title: 'Site Preferences',
        description: 'Required for saving your site preferences, e.g. remembering your username etc.',
        isFixed: false
    },
    {
        name: 'analytics',
        title: 'Analytics',
        description: 'Required to collect site visits, browser types, etc.',
        isFixed: false
    },
    {
        name: 'marketing',
        title: 'Marketing',
        description: 'Required to marketing, e.g. newsletters, social media, etc',
        isFixed: false
    }
  ],

});

6. Execute a callback function after you user clicks the 'Accept' button.

$('body').bsgdprcookies({
 
  OnAccept: function() {
    // do something
  }

});

 

---

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