GDPR Cookie Compliance Plugin With jQuery - gdpr-cookie

Yet another jQuery GDPR plugin for cookie policies that displays a GDPR Cookie Consent Notice popup to helps you comply with General Data Protection Regulation (GDPR). Inspired by the jQuery ihavecookies.js plugin.

Click the Customize Cookies to display several options with checkboxes that enable the visitors to opt-in and opt-out of the various types of cookies: Analytics, Essential, Marketing, Site Preferences.

The "Essential" checkbox can also be removed, e.g. when your site doesn't have any essential cookies but only marketing, etc.

Your Visitors are able to change their mind and modify their cookie settings by re-show the GDPR Cookie Consent Notice popup to allow more (or less) cookie types.

More about GDPR:

• A GDPR Checklist for Those Who Are Tired of GDPR Checklists
• Ultimate GDPR Compliance jQuery Toolkit
• EU GDPR Information Portal
• GDPR Compliant Cookie Consent Popup Plugin - jQuery ihavecookies.js
• Best GDPR Plugins To Make Your WordPress GDPR Compliant
• JavaScript GDPR Plugin For Google Analytics – Trackless

How to use it:

1. Add references to jQuery library and the jQuery GDPR Cookie plugin's files.

<link href="gdpr-cookie.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="gdpr-cookie.js"></script>

2. Initialize the plugin with default settings.

$.gdprcookie.init();

3. Change the default cookie types or add your owns as follows:

$.gdprcookie.init({
  cookieTypes: [
    {
      type: "Essential",
      value: "essential",
      description: "These are cookies that are essential for the website to work correctly."
    },
    {
      type: "Site Preferences",
      value: "preferences",
      description: "These are cookies that are related to your site preferences, e.g. remembering your username, site colours, etc."
    },
    {
      type: "Analytics",
      value: "analytics",
      description: "Cookies related to site visits, browser types, etc."
    },
    {
      type: "Marketing",
      value: "marketing",
      description: "Cookies related to marketing, e.g. newsletters, social media, etc"
    }
  ],
});

4. Customize the GDPR Cookie Consent messages:

$.gdprcookie.init({
  title: "Cookies & privacy",
  subtitle: "Select cookies to accept",
  message: "Cookies enable you to use shopping carts and to personalize your experience on our sites, tell us which parts of our websites people have visited, help us measure the effectiveness of ads and web searches, and give us insights into user behaviour so we can improve our communications and products.",
  delay: 2000, // delay in milliseconds
  expires: 30, // expiration date
  cookieName: "cookieControlPrefs",
  acceptReload: false,
  acceptBtnLabel: "Accept cookies",
  advancedBtnLabel: "Customize cookies",
  customShowMessage: undefined,
  customHideMessage: undefined,
  customShowChecks: undefined
});

5. Reshow the GDPR Cookie Consent Popup that enable the visitors to change the options after accepting:

$.gdprcookie.display()

6. Available event handlers.

$(document.body)
.on("gdpr:show", function() {
    console.log("Cookie dialog is shown");
})
.on("gdpr:accept", function() {
    var preferences = $.gdprcookie.preference();
    console.log("Preferences saved:", preferences);
})
.on("gdpr:advanced", function() {
    console.log("Advanced button was pressed");
});

Changelog:

v0.3.0 (2018-06-23)

• You can now have a checkbox checked by default. Use with care. 
• The advanced button can also toggle instead of going diabled.
• It can now also switch between intro and checkboxes, instead of showing both.
• You can control which cookie types are accepted before and after having seen the checkboxes.
• Added an optional text between the subtitle and the checkboxes.

v0.2.0 (2018-06-07)

• It now requires only a single cookie to function
• You can customize the name of the cookie
• Better resillience against incorrect cookie values
• Cookie expires was still hardcoded
• It's now possible to reload the page after pressing the accept button

2018-05-29

• Added extra protection from external malicious scripts or blockers

---

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