Loading...
Bootscore v6 is here! Learn more

Documentation Plugin

bs Cookie Settings

This plugin adds GDPR/CCPA-ready cookie consent functionality seamlessly to Bootscore. It is based on a modified cookieconsent script created by Orest Bida.

  • Demo: Cookie preferences modal
  • If you have already clicked the banner, open this page in a private window or delete cookies to show the banner again.

On first page visit, a cookie banner will appear at the bottom of the page. There you can either accept all cookies, reject all or open the settings in a modal. By clicking on “Accept all” or “Reject all”, a cookie is set with your preferences and the banner hides for 182 days.

If you’ve already clicked a button and want to see the banner again, open the Google Chrome Dev Console > Application > Cookies > https://bootscore.me, search for bs_cookie_settings cookie and delete it, or simply view page in a private tab.

Installation

  1. Download Plugin
  2. In your admin panel, go to Plugins > and click the Add New button.
  3. Click Upload Plugin and Choose File, then select the Plugin’s .zip file.
  4. Click Install Now.
  5. Click Activate to use your new Plugin right away.

Usage

Init

Initialize plugin with inline script in a Custom HTML widget in Footer Info position and replace your data.

5.6.0

<script>
  // Init
  window.addEventListener('load', function () {

    // obtain plugin
    var cc = initCookieConsent();

    // run plugin with your configuration
    cc.run({
      current_lang: 'en',
      autoclear_cookies: true,
      page_scripts: true,

      languages: {
        'en': {
          consent_modal: {
            title: 'We use cookies!',
            description: 'We use cookies on our website to enhance your browsing experience by remembering your preferences and analyzing site traffic. By clicking "Accept all", you consent to the use of all cookies. However, you can manage your <a data-bs-toggle="modal" href="#bs-cookie-modal">cookie preferences</a> to provide a controlled consent.',
            primary_btn: {
              text: 'Accept all',
              role: 'accept_all'
            },
            secondary_btn: {
              text: 'Reject all',
              role: 'accept_necessary'
            },
            settings_btn: {
              text: 'Manage preferences'
            },
            consent_footer: {
              description: '<a class="small link-secondary text-decoration-none" href="#">Privacy Policy</a> • <a class="small link-secondary text-decoration-none" href="#">Terms & Conditions</a> • <a class="small link-secondary text-decoration-none" href="#">Imprint</a>'
            }
          },

          settings_modal: {
            title: 'Cookie preferences',
            save_settings_btn: 'Save preferences',
            accept_all_btn: 'Accept all',
            reject_all_btn: 'Reject all',
            close_btn_label: 'Close',
            cookie_table_headers: [
              { col1: 'Name' },
              { col2: 'Domain' },
              { col3: 'Expiration' },
              { col4: 'Description' }
            ],
            blocks: [
              {
                title: 'Cookie usage',
                description: 'We use cookies to ensure the basic functionalities of the website and to enhance your online experience. You can choose for each category to opt-in/out whenever you want. For more details relative to cookies and other sensitive data, please read the full <a href="#">Privacy Policy</a>.'
              }, {
                title: 'Necessary',
                description: 'These cookies are essential for the proper functioning of our website. Without these cookies, the website would not work properly',
                toggle: {
                  value: 'necessary',
                  enabled: true,
                  readonly: true          // cookie categories with readonly=true are all treated as "necessary cookies"
                }
              }, {
                title: 'Analytics',
                description: 'These cookies allow the website to remember the choices you have made in the past',
                toggle: {
                  value: 'analytics',     // your cookie category
                  enabled: false,
                  readonly: false
                },
                cookie_table: [           // list of all expected cookies
                  {
                    col1: '^_ga',         // match all cookies starting with "_ga"
                    col2: 'google.com',
                    col3: '2 years',
                    col4: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.',
                    is_regex: true
                  }, {
                    col1: '_gid',
                    col2: 'google.com',
                    col3: '1 day',
                    col4: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.',
                  }
                ]
              }, {
                title: 'Advertising',
                description: 'These cookies collect information about how you use the website, which pages you visited and which links you clicked on. All of the data is anonymized and cannot be used to identify you',
                toggle: {
                  value: 'advertising',
                  enabled: false,
                  readonly: false
                },
                cookie_table: [             // list of all expected cookies
                  {
                    col1: '_name',
                    col2: 'xyz.com',
                    col3: '2 weeks',
                    col4: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.',
                    is_regex: true
                  }, {
                    col1: '_name',
                    col2: 'xyz.com',
                    col3: '3 days',
                    col4: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.',
                  }
                ]
              }, {
                title: 'More information',
                description: 'For any queries in relation to our policy on cookies and your choices, please <a href="#yourcontactpage">contact us</a>.',
              },

            ]
          }

        }
      }

    });
  });
</script>

Block / manage scripts

Set type="text/plain" and data-cookiecategory="<category>" to any script tag you want to manage. Use inline-script HTML widget in Footer Info position after the init script.

<!-- Google Analytics -->
<script type="text/plain" data-cookiecategory="analytics">
  // Code goes here
</script>

<!-- Advertising -->
<script type="text/plain" data-cookiecategory="advertising">
  // Code goes here
</script>

Open preferences modal

To open settings modal again, add following link to your privacy policy and to a Custom HTML widget in a Footer widget position.

<a data-bs-toggle="modal" href="#bs-cookie-modal">Cookie Preferences</a>

Button

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#bs-cookie-modal">Cookie Preferences</button>

Changelog

Earlier versions can be downloaded via the Github repository. Install/downgrade via the plugin uploader.

Load version on Github
  • [FEATURE] Add composer.json f90194b
  • [FEATURE] Add plugin update checker e004b7b
  • [IMPROVEMENT] Change btn-outline-secondary to btn-outline-primary af96550
  • [UPDATE] Bootstrap 5.3 color classes cbc7c29

Load version on Github
  • Refactored modal
  • Removed plugin’s backdrop and uses Bootstrap modal backdrop instead
  • Settings link triggers now modal instead modal-dialog
  • Changed settings link to data-bs-toggle="modal" Breaking
  • Hide banner if modal is open
  • Changed id’s
  • Updated to FA6 Chevron

Load version on Github
  • Added missing modal class

Load version on Github
  • Fix modal backdrop in Chrome/Edge. Used rgba instead of opacity
  • Switched to FA5 icons

Load version on Github
  • Initial release
To top