cookieconsent

:cookie: Simple cross-browser cookie-consent plugin written in vanilla js

4,603

446

4,603

View on GitHub View on NPM

Top Related Projects

cookieconsent

3,463

A free solution to the EU, GDPR, and California Cookie Laws

klaro

1,267

Klaro Privacy Manager. An open-source, privacy-friendly & compliant consent manager for your website.

Quick Overview

CookieConsent is a lightweight JavaScript library for managing cookie consent on websites. It provides a customizable and user-friendly interface for obtaining user consent for various types of cookies and tracking technologies, helping website owners comply with privacy regulations such as GDPR and CCPA.

Pros

Highly customizable appearance and behavior
Supports multiple languages and easy localization
Lightweight and fast-loading (less than 5KB gzipped)
No dependencies, pure JavaScript implementation

Cons

Limited built-in styling options (requires custom CSS for advanced designs)
May require additional configuration for complex consent scenarios
Documentation could be more comprehensive for advanced use cases
No built-in integration with popular analytics platforms

Code Examples

Basic initialization:

CookieConsent.run({
  categories: {
    necessary: {},
    analytics: {}
  },
  language: {
    default: 'en',
    translations: {
      en: {
        consentModal: {
          title: 'We use cookies',
          description: 'This website uses cookies to enhance your browsing experience.'
        }
      }
    }
  }
});

Checking consent status:

if (CookieConsent.acceptedCategory('analytics')) {
  // Initialize analytics
}

Updating consent preferences:

document.querySelector('#open-settings').addEventListener('click', function() {
  CookieConsent.showSettings();
});

Getting Started

Include the CookieConsent script in your HTML:

<script src="https://cdn.jsdelivr.net/gh/orestbida/cookieconsent@v3.0.0/dist/cookieconsent.js"></script>

Initialize CookieConsent with basic configuration:

CookieConsent.run({
  categories: {
    necessary: {},
    analytics: {}
  },
  language: {
    default: 'en',
    translations: {
      en: {
        consentModal: {
          title: 'We use cookies',
          description: 'This website uses cookies to enhance your browsing experience.'
        },
        categories: {
          necessary: {
            title: 'Necessary cookies',
            description: 'These cookies are essential for the website to function properly.'
          },
          analytics: {
            title: 'Analytics cookies',
            description: 'These cookies help us understand how visitors interact with the website.'
          }
        }
      }
    }
  }
});

This basic setup creates a consent modal with two categories: necessary and analytics. Customize the content and add more categories as needed for your website.

Competitor Comparisons

cookieconsent

3,463

A free solution to the EU, GDPR, and California Cookie Laws

Pros of Cookieconsent (Osano)

More established project with a larger community and longer history
Offers additional features like geolocation support and automatic language detection
Provides a user-friendly interface for customization without coding

Cons of Cookieconsent (Osano)

Larger file size, which may impact page load times
Less flexible for advanced customization compared to the lightweight alternative
Requires more setup and configuration for complex use cases

Code Comparison

Cookieconsent (Osano):

window.cookieconsent.initialise({
  "palette": {
    "popup": { "background": "#000" },
    "button": { "background": "#f1d600" }
  },
  "content": { "message": "This website uses cookies." }
});

Cookieconsent (Orestbida):

CookieConsent.run({
  guiOptions: {
    consentModal: {
      layout: "box",
      position: "bottom right",
      equalWeightButtons: true,
      flipButtons: false
    },
    preferencesModal: {
      layout: "box",
      position: "right",
      equalWeightButtons: true,
      flipButtons: false
    }
  },
  categories: {
    necessary: {}
  }
});

The Osano version focuses on simple color customization and content, while the Orestbida version offers more detailed configuration options for layout and functionality.

klaro

1,267

Klaro Privacy Manager. An open-source, privacy-friendly & compliant consent manager for your website.

Pros of Klaro

More extensive customization options for UI and functionality
Built-in support for multiple languages and translations
Better integration with popular content management systems (CMS)

Cons of Klaro

Larger file size and potentially slower load times
Steeper learning curve due to more complex configuration options
Less frequent updates and maintenance compared to CookieConsent

Code Comparison

CookieConsent:

cookieconsent.run({
    categories: {
        necessary: {},
        analytics: {}
    },
    language: {
        default: 'en',
        translations: {
            en: {
                consentModal: {
                    title: 'We use cookies',
                    description: 'Cookie description'
                }
            }
        }
    }
});

Klaro:

var klaroConfig = {
    apps: [
        {
            name: 'analytics',
            title: 'Analytics',
            purposes: ['analytics']
        }
    ],
    translations: {
        en: {
            consentModal: {
                title: 'We use cookies',
                description: 'Cookie description'
            }
        }
    }
};

Both libraries offer similar basic functionality for managing cookie consent, but Klaro provides more granular control over individual services and their purposes. CookieConsent's configuration is generally simpler and more straightforward, while Klaro offers more advanced features at the cost of increased complexity.