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.
You can see a working example on the author's website : smarchal.com.
This implementation uses default options of CookiesPlease.
You just have to remember two things :
- CookiesPlease needs to be initialized AFTER the DOM is ready (you can easily do it with jQuery or domready)
- CookiesPlease needs to be initialized BEFORE any other javascript (to avoid cookies to be created)
Here's a common example using jQuery:
<script src="vendor/jquery/jquery.min.js">
<script src="vendor/cookiesplease/cookiesplease.min.js">
<script>
$(function() {
cookiesplease.init();
});
</script>
This starter script will already display the message to the user.
You then can check if cookies are allowed :
if(cookiesplease.wasAccepted()) {
// Run JS if user has accepted cookies' storage
}
Or if they're not :
if(cookiesplease.wasDeclined()) {
// Run JS if user has refused cookies' storage
}
| 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 |
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.
- Author : zessx
- Licence : MIT
- Contact : @zessx
- Link : http://smarchal.com/cookiesplease