See also: Trumbowyg, my lightweight WYSIWYG editor Made by Alex-D Donate

Cookies
EU banner

Download or npm install cookies-eu-banner bower install cookies-eu-banner
Cookies EU banner is a 1kb vanilla JavaScript library which manage
cookies consent banner display like asked by GDPR.

Introducing Cookies EU banner

Why you should love it?

GDPR compliant

This plugin follows a long search on the sites of the European Commission and CNIL. It takes into account DoNotTrack and "Read more" page.

Lightweight & simple

Just 1kb of vanilla JavaScript. You can apply any style you want on this banner. You just need to put your analytics code in the callback function of this class.

Optimized for SEO

The banner is not displayed if the visitor is a search engine bot, the robot correctly index the content of your page and does not display the cookies warning banner as description of all your pages.

Getting started

How to use?

At the top of your page, add your banner following these IDs: 


<body>
    <div id="cookies-eu-banner" style="display: none;">
        By continuing your visit to this site, you accept the use of cookies by Google Analytics to make visits statistics.
        <a href="./read-more.html" id="cookies-eu-more">Read more</a>
        <button id="cookies-eu-reject">Reject</button>
        <button id="cookies-eu-accept">Accept</button>
    </div>
    <!-- Your code... -->

Copy the minified JavaScript file called cookies-eu-banner.min.js into your project folder via Bower, npm or direct download (not recommended). Add this line at the bottom of your body (adapt it if you don't use bower). 


    <!-- Your code... -->
    <script src="bower_components/cookies-eu-banner/dist/cookies-eu-banner.min.js"></script>
    <!-- Use Cookies EU banner class here, see below -->
</body>

If you want use it, you just need to put this code after the cookies-eu-banner imported just over it, and add new CookieEuBanner() arround your code: 


<script>
    new CookiesEuBanner(function () {
        // Your code here
    });
</script>

For example, with Google Analytics: 


<script>
    new CookiesEuBanner(function () {
        (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
        function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
        e=o.createElement(i);r=o.getElementsByTagName(i)[0];
        e.src='https://www.google-analytics.com/analytics.js';
        r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
        ga('create','UA-XXXXX-X');ga('send','pageview');
    });
</script>

You can put this code in your main.js file, but you need to load cookies-eu-banner.min.js before.

Option: waitAccept

You want wait until the user has accepted cookies? You just need to pass a second parameter to the constructor.
Default value is false. 


<script>
    new CookiesEuBanner(function () {
        // Your code here
    }, true);
</script>

Option: useLocalStorage

If you really don't want save the consent in a cookie, you can use localStorage. You can pass a boolean as third parameter which define if Cookie EU banner use localStorage (true) or cookie (false).
Default value is false (cookie).

Note: the localStorage method is not as good as the cookie method since the localStorage cannot expires after 13 months as recommended. 


<script>
    new CookiesEuBanner(function () {
        // Your code here
    }, false, true);
</script>

Option: waitRemove

If you want add some transition on accept/reject, and want to prevent the premature deletion of the banner, you can add data-wait-remove attribute to the banner, with the time to wait in milliseconds (250ms in the example below).
Default value is 0. 


<div id="cookies-eu-banner" style="display: none;" data-wait-remove="250">
    
</div>