Little script to quickly comply with EU cookie law
Switch branches/tags
Nothing to show
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.
LICENSE
README.md
bower.json
cookiesplease.js
cookiesplease.min.js
cookiesplease.png
package.json

README.md

cookiesplease

CookiesPlease

Little script to quickly comply with EU cookie law.
It'll allow you to add a message asking the user is he accepts or not cookies' storage for your website.

Installation

CookiesPlease is available on bower:

$ bower install cookiesplease

If you're not using bower you still can install it manually, cloning this repository.

Usage

Simply include CookiesPlease as the very first JavaScript in your <head> tag.
As it is now self-initialized, you no longer have to call cookiesplease.init().

CookiesPlease offers you two functions to check if cookies were accepted, or not:

if(cookiesplease.wasAccepted()) {
    // Run JS if user has accepted cookies' storage
} 
if(cookiesplease.wasDeclined()) {
    // Run JS if user has refused cookies' storage
} 

Furthermore, it'll dispatch an event when user accept/decline cookies. This event allows you to load others scripts without refreshing the page:

document.addEventListener('CookiesPleaseAccepted', function() {});
document.addEventListener('CookiesPleaseDeclined', function() {});

Here's a common example, defering Google Analytics' loading while user hasn't accepted cookies:

<head>
    <script src="vendor/cookiesplease/cookiesplease.min.js"></script>
    <script>
        function loadGoogleAnalytics() {
            (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-XXXXXXXX-X', 'auto');
            ga('send', 'pageview');
        }
        if(cookiesplease.wasAccepted()) {
            loadGoogleAnalytics();
        }
        document.addEventListener('CookiesPleaseAccepted', loadGoogleAnalytics);
    </script>
</head>

Options

CookiesPlease comes with a bunch of options:

Option Default value Usage
buttonAccept true Show a button to accept cookies' storage
buttonDecline false Show a button to decline cookies' storage
clearCookiesOnDecline false Remove every stored cookie if user refuse their storage
storeChoiceOnDecline true Remember user's decline (...storing a cookie!!)
prependToBody false If you prefer to add the div at the beginning of <body>
buttonAcceptText 'Continue' Text used for the accept button
buttonDeclineText 'Decline' Text used for the decline button
message 'This website...' Message displayed

As it is self-initialiazed, you'll need to declare these options in a variable called cookiespleaseOptions (case sensitive) before including the script itself:

<script>
    var cookiespleaseOptions = {
        buttonDecline: true,
        prependToBody: true
    };
</script>
<script src="vendor/cookiesplease/cookiesplease.min.js"></script>

What about the CSS ?

CookiesPlease has it's own default CSS, but you can easily customize it. Everything is wrapped in the following element :

<div id="cookiesplease" class="cookiesplease">
    ...
</div>

CookiesPlease's default CSS use the .cookiesplease class, to allow you to use #cookiesplease id (then avoiding any conflict) :

#cookiesplease {
    background-color: #eee;
    border-top: 1px solid #222;
    color: #222;
}
#cookiesplease p {}
#cookiesplease a {}
#cookiesplease button {}
#cookiesplease .cookiesplease-accept {}
#cookiesplease .cookiesplease-decline {}
#cookiesplease.cookiesplease-hidden {}
body.cookiesplease-shown {}

Please note that the .cookiesplease-shown is added to the <body> element, until the user click on any button. This allows you to customize external elements, for pushing down the body for example.

Legals

Donations

Buy me a coffee !