A Modal Dialog Bootstrap Cookie Banner Consent Settings and Framework

bootstrap-cookie-consent-settings is a modal dialog (cookie banner) and framework for handling German and EU law about cookies on a website.

The plugin uses the Bootstrap framework to show a privacy settings popup that informs users how your site is collecting/using their private data and allows them to accept/reject certain cookies such as marketing, preferences, and analytics.

bootstrap cookie consent, cookie consent code html, jquery cookie consent, cookie consent popup javascript, bootstrap 4 cookie consent banner, jquery gdpr cookie consent

How to make use of it:

1. Load the needed jQuery library and Bootstrap framework within the doc.

<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 completed it.

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 Data Protection Statement.</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 indicate the Cookie Consent Settings Modal on web page load.

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

6. More configuration choices.

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
    
})

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");

Cookie Consent Settings Modal, bootstrap-cookie-consent-settings Plugin/Github, gdpr cookie consent javascript, cookie popup jquery example


See Demo And Download

Official Website(shaack): Click Here

This superior jQuery/javascript plugin is developed by shaack. For extra Advanced usage, please go to the official website.

Share