Getting Started

This guide will walk you through the process of installing and configuring Cookies Consent.

Installation

Prerequisites

• Node.js version 18 or higher.

Cookies Consent can be installed via your favorite package manager.

npm

$ npm install @metamorfosilab/cookies-consent

pnpm

$ pnpm install @metamorfosilab/cookies-consent

yarn

$ yarn add @metamorfosilab/cookies-consent

bun

$ bun add @metamorfosilab/cookies-consent

Usage

Linking styles

Cookies Consent comes with a default stylesheet that you can include in your project.

postcss

@import '@metamorfosilab/cookies-consent/dist/index.css';

scss

@import '~@metamorfosilab/cookies-consent/dist/index.css';

css

@import '@metamorfosilab/cookies-consent/dist/index.css';

Also, you can import predefined themes.

There are three themes available: contrast, dark, and smooth.

Importing the library

You can import the library in your project using the following syntax:

import { CookiesConsent } from '@metamorfosilab/cookies-consent'

Creating a new instance

To create a new instance of the library, you need to pass a configuration object to the constructor.

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

Example

const cookiesConsent = new CookiesConsent({
  expirationDays: 182, // half year
  buttons: ['accept', 'settings', 'info', 'reject'],

  content: {
    title: 'This website is using Cookies!',
    message: `
      <p>
        This site uses cookies (or similar) to measure traffic to this website. By clicking ACCEPT ALL, you are agreeing to our and our partners' use of cookies. You can change your cookie preferences at any time. For more information, please visit, our Cookie Notice.
      </p>
      `,
    settingsFooter: `
    <p>
      However, if you use your browser settings to block all cookies (including essential cookies) you may not be able to access all or parts of our website.
      <br />
      Except for essential cookies, all cookies will expire after the expiry periods as set out in the Gecko Hospitality Cookie Notice.
    </p>
  `,
  },

  cookies: [
    {
      name: 'essential_cookie',
      title: 'Essential Cookies',
      description: `
      <p>
        These cookies are required to enable core functionality of the Site. Without these cookies, services you have asked for cannot be provided. If you disable these cookies certain parts of the Site will not function for you
      </p>
      `,
    },
    {
      name: 'analytics',
      title: 'Analytics',
      description: '<p>Analytics Cookies 🍪.</p>',
      cookies: [
        {
          name: 'cc_ga',
          code: 'G-XXXXXXXXXX',
          manageFunction: manageGoogleAnalytics,
        },
        {
          name: 'cc_gtm',
          code: 'GTM-PVJH7S4',
          manageFunction: manageGoogleTagManager,
        },
      ],
    },
  ],
})