Press "Enter" to skip to content

Javascript Library to Show the Cookies Consent Message Plugin

Consent Cookies JS is an easy-to-use JavaScript library to display the cookie consent message and manage user consent in accordance with the GDPR Cookie Act and the Electronic Privacy Directive.

trustarc cookie consent manager, cookie consent management tool, cookie consent manager free, best cookie consent manager, cookie consent javascript

Features:

  • Dark and light themes.
  • Custom buttons.
  • Accept or decline personal cookies individually.
  • Allows you to exclude pages.
  • Useful callback functions.
  • Compliant with the GDPR and ePrivacy Directive.

How to make use of it:

1. Load the main style sheet and javascript into the document.

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

2. Upload 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. Configure cookiesConsent.js to display a basic cookie consent message on the page.

const cc = CookiesConsentJS();

4. Personalize 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 decline 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();

Advanced Cookie Consent Manager In JavaScript, Cookies Consent JS Plugin/Github, cookie consent popup, cookie consent examples, cookie consent gdpr


See Demo And Download

Official Website(oxterisk): Click Here

This superior jQuery/javascript plugin is developed by oxterisk. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *