Minimal Cookie Consent Banner & Box In JavaScript – ez-consent

ez-consent is a tiny JavaScript library that creates a non-intrusive cookie ? consent banner or notice box to inform the visitors how your website uses cookies.

How to use it:

1. Install & download the package.

# NPM
$ npm install ez-consent --save

2. Import the ez-consent library.

import { ez_consent } from './src/ez-consent.js';

3. Or load the ez-consent.min.js in the document.

<script src="https://cdn.jsdelivr.net/npm/ez-consent@latest/dist/ez-consent.min.js"></script>

4. Load a theme of your choice:

• box-bottom-left.css: Notice Box
• subtle-bottom-right.css: Bottom-right banner

<link rel="stylesheet" href="box-bottom-left.min.css" />
<link rel="stylesheet" href="subtle-bottom-right.css" />

5. Initialize the library and replace the privacy page URL:

ez_consent.init({
  privacy_url: 'https://cssscript.com/privacy-policy/' 
});

6. Determine whether or not to always show the cookie consent notice. Default: false (Only displayed on the first visit).

ez_consent.init({
  is_always_visible: true,
  privacy_url: 'https://cssscript.com/privacy-policy/' 
});

7. Customize the cookie consent notice.

ez_consent.init({
  is_always_visible: true,
  privacy_url: 'https://cssscript.com/privacy-policy/',
  texts: {
    main: "We use cookies",
    buttons:
      {
        ok: "ok",
        more: "more"
      }
    }
});

8. Customize the read more button

ez_consent.init({
  more_button: {
    target_attribute : "_blank",
    is_consenting: true
  },
});

9. Override default CSS classes:

ez_consent.init({
  css_classes: {
    container: 'cookie-consent',   
    message_text: 'cookie-consent__tex',    
    buttons: {
      wrapper: 'cookie-consent__buttons', 
      more: 'cookie-consent__button cookie-consent__button--more',         
      ok: 'cookie-consent__button cookie-consent__button--ok',
    },
  },
});

Changelog:

v1.3.1 (01/24/2025)

• Update

v1.3.0 (12/28/2024)

• Add ability to overwrite CSS classes
• Improve themes with variables, flex scaling, RTL
• Bugfixes

v1.2.2 (03/06/2021)

• fix null error when initializing with undefined options

v1.2.1 (07/25/2020)

• fixed ci-cd publishing older version
• fixed missing shared css class to buttons

v1.2.0 (07/18/2020)

• fixed main path for node require support
• simplified quality checks
• Added the option ‘target_attribute’
• removed duplicated documentation
• added option to set if more button gives consent
• refactored options