Advanced Cookie Consent Manager In JavaScript – cookiesConsent.js

Preview:

Description:

An advanced cookie consent JavaScript library for requesting consent for cookie usage on your site.

Features:

• Dark and Light themes.
• Custom buttons.
• Accept or reject personalized cookies individually.
• Allows you to exclude pages.
• Useful callback functions.
• Compatible with GDPR and ePrivacy Directive.

How to use it:

1. Load the main stylesheet and JavaScript in the document.

<link rel="stylesheet" href="src/cookiesconsent.min.css" />
<script src="src/cookiesconsent.min.js"></script>

2. Load a theme of your choice:

<!-- Dark Theme -->
<link href="src/themes/cookiesconsent.theme-dark.css" rel="stylesheet" />
<!-- Light Theme -->
<link href="src/themes/cookiesconsent.theme-dark.css" rel="stylesheet" />
<!-- Sober Theme -->
<link href="src/themes/cookiesconsent.theme-sober.css" rel="stylesheet" />

3. Initialize the cookiesConsent.js to display a basic cookie consent message on the page.

const cc = CookiesConsentJS();

4. Customize the cookie consent message.

const cc = CookiesConsentJS({
      content : {
        // title
        title: "Cookies compliance",
        // message
        message: "We use cookies",
        // custom button text
        btnAccept: "Accept all",
        btnReject: "Reject all",
        btnDismiss: "Cookies policy",
        btnSettings: "Settings",
        btnSettingsSelectAll: "Select all",
        btnSettingsUnselectAll: "Unselect all",
        btnSettingsAccept: "Accept selection",
        btnInfo: "More info",
        policy: "Privacy Policy",
        // left, right, center
        align: "left",
        // policy link
        policyLink : "https://gdpr-info.eu/",
        // Text that will be shown in the information popup
        info: "<h2>This is the info title</h2>",
    },
});

5. Set custom cookies that users can accept or reject them individually.

const cc = CookiesConsentJS({
      cookies : {
        statistics : {
          name : "stats",
          description : "<h2>Statistic cookies</h2>",
        },
        preferences : {
          name : "prefs",
          description : "<h2>Preference cookies</h2>",
          checked : true,
          disabled : true,
        },
        profile : {
          name : "profile",
          description : "<h2>Profile cookies</h2>",
          disabled : true,
        },
        cookie_checked : {
          name : "cc-checked",
          description : "<h2>Checked cookies</h2>",
          checked : true,
          disabled : false,
        },
      },
});

6. Callback functions.

const cc = CookiesConsentJS({
      callback : {
        first_load: null,
        accept: null,
        reject: null,
        load: null,
      },
});

7. More configuration options.

const cc = CookiesConsentJS({
      // the number of days the cookie will be valid
      expirationDays: 365,
      // cookie path
      path: "/",
      // lax, static, none
      sameSite: "lax",
      // top, top-left, top-right, bottom, bottom-left, bottom-right
      position: "top",
      // top-left, top-right, bottom-left, bottom-right
      btnDismissPosition: "bottom-left",
      // enable/disable buttons
      buttons: ["reject", "accept", "settings", "info", "dismiss"],
      // exclude pages
      denylistPages: ["/policy", "/cookie-policy", "examples"],
});

8. API methods.

cc.getStatus();
cc.getConfig();
cc.showMessage();
cc.removeCookies();

Changelog:

11/09/2022

• Improved google cookie deletion performance