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 modes.
• 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. Install and import the cookiesConsent component.

# Yarn
$ yarn add @metamorfosilab/cookies-consent
# NPM
$ npm install @metamorfosilab/cookies-consent
# PNPM
$ pnpm add @metamorfosilab/cookies-consent

import { CookiesConsent } from '@metamorfosilab/cookies-consent'
// core stylesheet
@import '@metamorfosilab/cookies-consent/dist/index.css';

2. Import a theme of your choice:

import { 
  CookiesConsent, 
  darkTheme, 
  smoothTheme, 
  contrastTheme } from '@metamorfosilab/cookies-consent'

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

const cc = new CookiesConsent({
      // Configuration object
})

4. Customize the cookie consent message.

const cc = CookiesConsent({
      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 = CookiesConsent({
      cookies : {
        statistics : {
          name : "stats",
          title : "Title"
          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,
          onLoad : false,
        },
        cookie_checked : {
          name : "cc-checked",
          description : "<h2>Checked cookies</h2>",
          checked : true,
          disabled : false,
        },
        {
          name: 'analytics',
          title: 'Analytics',
          description: 'Analytics Cookies.',
          cookies: [
            {
              name: 'cc_ga',
              code: 'G-XXXXXXXXXX',
              manageFunction: manageGoogleAnalytics,
            },
            {
              name: 'cc_gtm',
              code: 'GTM-PVJH7S4',
              manageFunction: manageGoogleTagManager,
            },
          ],
        },
      } 
})

6. Callback functions.

const cc = CookiesConsent({
      callback : {
        first_load: (params: CookiesStatus) => {},
        accept: (params: CookiesStatus) => {},
        reject: (params: CookiesStatus) => {},
        load: (params: CookiesStatus) => {},
      },
});

7. More configuration options.

const cc = CookiesConsent({
      // 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
      ignorePages: ["/policy", "/cookie-policy", "examples"],
      // hide the description of the cookies in the settings
      hideDescription: true,
      // set the settings window as the main
      mainWindowSettings: true,
      // enable aniamtion
      animation: true,
      // theme
      theme: null,
});

8. API methods.

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

Changelog:

v0.2.9 (03/06/2024)

• Update