A flexible JS API to manage cookies for GDPR
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist fix: example bind all open settings panel btn Oct 5, 2018
src misc: better example + change default cookieName Oct 4, 2018
.gitattributes
.gitignore
README.md Update README.md Dec 2, 2018
index.html
package-lock.json
package.json
webpack.config.js

README.md

cookie-consent-api

A flexible JS API to manage cookie consent for GDPR.
The main idea is to easily enable or disable content on your app based on user consent.
Demo: https://cookie-consent-api.alty.fr

This is a work in progress, it has not been tested in production

Available on NPM : $ npm install cookie-consent-api

Usage

Place at end of body before other scripts

<script src="./cookie-consent-api.js"></script>
<script>
    const cookieConsent = new CookieConsentApi({
        cookieName: 'cookie_consent_settings', // optional
        cookieDuration: 365, // optional
        cookieDomain: 'localhost', // optional
        services: ['googleAnalytics', 'googleMaps', 'youtube'] // set a unique key for each service   
    });
</script>

You can check the index.html for a full usage example

Automatic content switch if consent

<div data-cookie-consent="googleAnalytics">
    <!--if-consent
        <script>
            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
                (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
                m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
            })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
            ga('create', 'UA-XXXXX-Y', 'auto');
            ga('send', 'pageview');
            console.log('js executed');
        </script>
    endif-->
</div>
<div data-cookie-consent="youtube">
    <img src="https://img.youtube.com/vi/R4lZyXjGLRs/0.jpg">
    <!--if-consent  
        <iframe width="560" height="315" src="https://www.youtube.com/embed/R4lZyXjGLRs"></iframe>
    endif-->
</div>

API methods

Getters

cookieConsent.isAllConfigured(); /* all services are accepted or refused */ 
cookieConsent.isConfigured('serviceName'); /* service is accepted or refused */ 
cookieConsent.isAccepted('serviceName'); /* service is accepted */ 
cookieConsent.isRefused('serviceName'); /* service is refused */ 
cookieConsent.getServices(); /* returns services array from config */

Setters

cookieConsent.accept('serviceName'); /* accept a service */
cookieConsent.refuse('serviceName'); /* refuse a service */
cookieConsent.acceptAll(); /* accept all services */
cookieConsent.reset(); /* delete consent cookie */

Events

cookieConsent.on('accept', function(service) { /* a service is accepted */ });
cookieConsent.on('refuse', function(service) { /* a service is refused */ });
cookieConsent.on('allConfigured', function() { /* all services configured */ });
cookieConsent.on('reset', function() { /* consent cookie deleted */ });