Customizable GDPR Cookie Consent Popup In JavaScript – Cookify

Preview:

Description:

Cookify is a highly customizable GDPR cookie consent popup library to make your site or app compliant with GDPR and EU Cookie Law.

The GDPR cookie consent popup enables visitors to manage (enable and disable) cookies allowed to use, and toggle scripts on/off accordingly.

Installation:

# NPM
$ npm i cookify

How to use it:

1. The library requires Bootstrap’s stylesheet loaded in the document.

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

2. Import the Cookify as an ES module.

import Cookify from './src/index.js';

3. Initialize the Cookify library and pass the following parameters:

var cookify = new Cookify(
    dataName = 'cookify', 
    actionCallback = () => {}, 
    trackingCallback = () => {}, 
    saveWithChange = false, 
    saveByDefault = false, 
    cookieDefault = 'necessary',
    initCallback = () => {}, 
)

4. Create checkboxes to manage your cookies:

<div class="m-3 fixed-bottom">
  <div id="manage" class="mx-md-5 p-3 bg-white shadow-lg rounded d-none" data-c-view="manage">
    <h2>Manage Cookies</h2>
    <p>We use cookies to provide and secure our websites, as well as to analyze the usage of our websites, in order to offer you a great user experience. To learn more about our use of cookies see our <a href="#" target="_blank">Privacy Policy</a>.</p>
    <div class="my-3">
      <div class="form-check">
        <input data-c-check="necessary" class="form-check-input" type="checkbox" value="" id="necessary">
        <label class="form-check-label" for="necessary">
          Necessary
        </label>
      </div>
      <div class="form-check">
        <input data-c-check="marketing" data-c-check-default="true" class="form-check-input" type="checkbox" value="" id="marketing">
        <label class="form-check-label" for="marketing">
          Marketing
        </label>
      </div>
      <div class="form-check">
        <input data-c-check="performance" class="form-check-input" type="checkbox" value="" id="performance">
        <label class="form-check-label" for="performance">
          Performance
        </label>
      </div>
    </div>
    <div class="d-flex">
      <div data-c-action="accept" class="btn btn-secondary flex-fill me-1">
        Accept
      </div>
      <div data-c-action="all" class="btn btn-primary flex-fill">
        All
      </div>
      <div data-c-action="necessary" class="btn btn-primary flex-fill ms-1">
        Necessary
      </div>
    </div>
  </div>
</div>

5. Toggle on/off scripts, images, and iframes based on user selection.

// scripts
<script type="text/plain" src="example.js" data-c-script="necessary"></script>
<script type="text/plain" data-c-script="necessary">
  console.log(example)
</script>
// images
<img data-c-script="necessary" src="/path/to/fallback.jpg" data-c-fallback="/path/to/fallback.jpg" data-c-src="/example.jpg"/>
// iframes
<iframe data-c-script="necessary" src="about:blank" data-c-fallback="about:blank" data-c-src="https://example.org"></iframe>

6. Get data state.

cookify.getDataState('type')
cookify.getDataState(cookify.viewedName)

Changelog:

v3.1.0 (09/28/2021)

• Support to manage consent for img and iframes
• Async self initialization to prevent false loading

v3.0.2 (07/19/2021)

• Fixed Bug in changeScriptType() where scripts are not loaded in Firefox
• Fixed Bug in initCheckboxes() where scripts loaded multiple times
• Fixed Bug in test file where src is imported
• Fixed Bug in event onCheckboxClick where script type changes directly to ‘plain’ without selected saveWithChange
• Changed inline script in test file to ‘performance’

v3.0.1 (07/16/2021)

• Refactor

v3.0.0 (05/16/2021)

• Added different Events for actions
• Added a new socialcard
• Added a file bootstrap.html for testing

v2.1.1 (05/06/2021)

• Fixed the script for reloading eighter the src or the inner script
• Fixed “SameSite=lax” with removing it from cookie initialisation
• Fixed init() funktion where case support called the wrong funktion