Cookie Consent Settings Modal With jQuery And Bootstrap

Cookie Consent Settings Modal With jQuery And Bootstrap
File Size: 13.1 KB
Views Total: 277
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Just another cookie consent plugin that makes your site comply with EU Cookie Law and GDPR.

The plugin uses the Bootstrap framework to show a Privacy Settings modal popup that informs users how your site collects/uses their privacy data and allows them to accept/reject specific cookies like marketing, preferences, Analytics.

How to use it:

1. Load the needed jQuery library and Bootstrap framework in the document.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>

2. Load the bootstrap-cookie-consent-settings.js script after jQuery.

<script src="src/bootstrap-cookie-consent-settings.js"></script>

3. Initialize the plugin and done.

var cookieSettings = new BootstrapCookieConsentSettings()

4. Customize the Privacy Settings (modal content).

<!-- content/en.html -->
<div class="modal-dialog modal-lg shadow" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <h4 class="modal-title">Privacy Settings</h4>
    </div>
    <div class="modal-body">
      <div class="bcb-body-text" style="font-size: 80%">
        <!-- @formatter:off -->
        <p>We use cookies and similar technologies that are necessary to operate the website. Additional cookies are only used with your consent. We use the additional cookies to perform analyses of website usage and to check marketing measures for their efficiency. These analyses are carried out to provide you with a better user experience on the website. You are free to give, deny, or withdraw your consent at any time by using the "cookie settings" link at the bottom of each page. You can consent to our use of cookies by clicking "Agree". For more information about what information is collected and how it is shared with our partners, please read our <a href="https://www.jqueryscript.net/privacy/">Data Protection Statement</a>.</p>
        <!-- @formatter:on -->
      </div>
      <p><a href="./demo/legal-notice.html">Legal Notice</a>
        <a href="#bcb-options" data-toggle="collapse" class="float-right">My settings</a>
      </p>
      <div id="bcb-options" class="collapse">
        <div class="bcb-option" data-name="necessary">
          <div class="custom-control custom-checkbox mb-1">
            <input type="checkbox" checked disabled class="custom-control-input" id="bcb-checkboxNecessary">
            <label class="custom-control-label" for="bcb-checkboxNecessary"><b>Necessary</b></label>
          </div>
          <ul>
            <li>Required to run the website</li>
          </ul>
        </div>
        <div class="bcb-option" data-name="analyses">
          <div class="custom-control custom-checkbox mb-1">
            <input type="checkbox" class="custom-control-input" id="bcb-checkboxAnalyses">
            <label class="custom-control-label" for="bcb-checkboxAnalyses"><b>Analyses</b></label>
          </div>
          <ul>
            <li>Monitoring website usage and optimizing the user experience</li>
            <li>Evaluation of marketing actions</li>
          </ul>
        </div>
        <div class="bcb-option" data-name="personalization">
          <div class="custom-control custom-checkbox mb-1">
            <input type="checkbox" class="custom-control-input" id="bcb-checkboxPersonalization">
            <label class="custom-control-label"
              for="bcb-checkboxPersonalization"><b>Personalization</b></label>
          </div>
          <ul>
            <li>Storage of your preferences from previous visits</li>
            <li>Collecting user feedback to improve our website</li>
            <li>Recording of your interests in order to provide customised content and offers</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="modal-footer">
      <button id="bcb-buttonDoNotAgree" type="button"
        class="btn btn-link text-decoration-none">
      I do not agree
      </button>
      <button id="bcb-buttonAgree" type="button" class="btn btn-primary">Agree</button>
      <button id="bcb-buttonSave" type="button" class="btn btn-outline-dark">
      Save selection
      </button>
      <button id="bcb-buttonAgreeAll" type="button" class="btn btn-primary">Agree to all</button>
    </div>
  </div>
</div>

5. Determine whether to show the Cookie Consent Settings Modal on page load. Default: true.

var cookieSettings = new BootstrapCookieConsentSettings({
    autoShowDialog: false
})

6. More configuration options.

var cookieSettings = new BootstrapCookieConsentSettings({

    // the language, in which the modal is shown
    lang: navigator.language, 

    // supported languages (in ./content/)
    languages: ["en", "de"], 

    // dialog content
    contentURL: "./content/",

    // cookie name stored as JSON
    cookieName: "cookie-consent-settings",

    // 365 days
    cookieStorageDays: 365,

    // callback function, called after the user has made his selection
    postSelectionCallback: undefined 
    
})

7. Show the Cookie Consent Settings Modal manually.

cookieSettings.showDialog();

8. Get cookie settings.

// get all
cookieSettings.getSettings();

// get a specific setting
cookieSettings.getSettings("analyses");

Changelog:

v1.1.2 (2021-06-03)

  • bugfix postSelectionCallback

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