GDPR Cookie Consent Notification With Bootstrap 4 - bsgdprcookies

File Size: 10.2 KB
Views Total: 15964
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

How to use it:

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

<link rel="stylesheet" href="" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script>
<script src="" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

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

<script src=""></script>

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


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


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

  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.

  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.