New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →

cookie-consent-js

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

cookie-consent-js

A simple dialog and framework to handle the German and EU law (may 2020) about cookies in a website

1.2.2
Source
npm

Version published: 4 years ago

Weekly downloads: 257; increased by49.42%

Maintainers: 1

Weekly downloads

Created: 4 years ago

Source

A simple dialog and framework to handle the German and EU law (may 2020) about cookies in a website

Usage

Follow these easy steps to integrate the cookie settings in your page.

1. Install cookie-consent-js in your project with `npm i cookie-consent-js`

Alternatively you can download the git repository.

2. Include `cookie-consent.css`

<link rel="stylesheet" href="/node_modules/cookie-consent-js/src/cookie-consent.css"/>

This should be done before any bootstrap or other frameworks css. You can overwrite styling in your projects css, take a look at cookie-consent.scss.

3. Include `cookie-consent.js`

<script src="/node_modules/cookie-consent-js/src/cookie-consent.js"></script>

In your <head> or at the bottom of your <body>.

4. Initialize the Script

var cookieConsent = new CookieConsent({privacyPolicyUrl: "/privacy-policy.html"})

In props you should at least define privacyPolicyUrl. See below "Configuration properties".

5. Disable "autoShowModal" in your privacy policy page

var cookieConsent = new CookieConsent({autoShowModal: false, privacyPolicyUrl: "/privacy-policy.html"})

The settings dialog is linking to the privacy policy. To enable the user to read the policy, you should disable autoShowModal there.

<a href="javascript:cookieConsent.reset()">Cookie settings</a>

So the user can anytime reconfigure, if he wants tracking or not.

...done! Contact me, if you have questions.

API

This framework writes a cookie (it's default name is cookie-consent-tracking-allowed) with the value true, if the user has accepted tracking. You can read the value with the JavaScript API (cookieConsent.trackingALlowed()) or from any other language, which can read cookies.

JavaScript API

Show the settings dialog again

cookieConsent.reset()

Use this to allow the user to reconfigure the cookie settings, for example, in your service navigation as "Cookie settings".

Read the status

cookieConsent.trackingAllowed()

Returns true if the user did accept tracking cookies. Use this function to disable tracking. Surround tracking code, like the Google Analytics code with

if(cookieConsent.trackingAllowed()) {
    // Google Analytics code and/or other tracking code
}

Read the status from PHP

Read the cookie from a PHP server with

if($_COOKIE['cookie-consent-tracking-allowed'] === 'true') {
    // do some tracking
}

Configuration properties

With default values.

this.props = {
    buttonPrimaryClass: "btn btn-primary", // bootstrap: set to "btn btn-primary"
    buttonSecondaryClass: "btn btn-outline-primary", // bootstrap: set to "btn btn-secondary"
    privacyPolicyUrl: "privacy-policy.html",
    autoShowModal: true, // disable autoShowModal on the privacy policy page, to make that page readable
    lang: navigator.language, // the language, in which the modal is shown
    content: { // the content in all needed languages
        de: {
            title: "Cookie-Einstellungen",
            body: "Wir nutzen Cookies, um Inhalte zu personalisieren und die Zugriffe auf unsere Website zu analysieren. " +
                "Sie können wählen, ob Sie nur für die Funktion der Website notwendige Cookies akzeptieren oder auch " +
                "Tracking-Cookies zulassen möchten. Weitere Informationen finden Sie in unserer --privacy-policy--.",
            privacyPolicy: "Datenschutzerklärung",
            buttonAcceptAll: "Alle Cookies akzeptieren",
            buttonAcceptTechnical: "Nur technisch notwendige Cookies akzeptieren"
        },
        en: {
            title: "Cookie settings",
            body: "We use cookies to personalize content and analyze access to our website. " +
                "You can choose whether you only accept cookies that are necessary for the functioning of the website " +
                "or whether you also want to allow tracking cookies. For more information, please refer to our --privacy-policy--.",
            privacyPolicy: "privacy policy",
            buttonAcceptAll: "Accept all cookies",
            buttonAcceptTechnical: "Only accept technically necessary cookies"
        }
    },
    cookieName: "cookie-consent-tracking-allowed",  // the name of the cookie, the cookie is `true` if tracking was accepted
    modalId: "cookieConsentModal" // the id of the modal dialog element
}

Disable autoShow

You should disable autoShowModal in the privacy policy page to make that page readable.

var cookieConsent = new CookieConsent({linkPrivacyPolicy: "privacy-policy.html", autoShowModal: false})

Styling

See ./src/cookie-consent.scss and overwrite values as you need in your projects stylesheet.

Disclaimer

Please read the LICENSE.

Keywords

FAQs

What is cookie-consent-js?

Is cookie-consent-js popular?

Is cookie-consent-js well maintained?

Package last updated on 06 Sep 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

cookie-consent-js