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.


CookiesPlease is available on bower:

$ bower install cookiesplease

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


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:

    <script src="vendor/cookiesplease/cookiesplease.min.js"></script>
        function loadGoogleAnalytics() {
            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

            ga('create', 'UA-XXXXXXXX-X', 'auto');
            ga('send', 'pageview');
        if(cookiesplease.wasAccepted()) {
        document.addEventListener('CookiesPleaseAccepted', loadGoogleAnalytics);


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:

    var cookiespleaseOptions = {
        buttonDecline: true,
        prependToBody: true
<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">

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.



Buy me a coffee !