Cookies-enabler.js is a easy-to-use pure Javascript solution for preventively blocking third-party cookies installed by js and comply with the EU cookie law.
Click here or bower install cookies-enabler
1 - Load the script
<script src="cookies-enabler.js"></script>
2 - Initiate the plugin
COOKIES_ENABLER.init( options );
scriptClass: 'ce-script',
iframeClass: 'ce-iframe',
acceptClass: 'ce-accept',
dismissClass: 'ce-dismiss',
disableClass: 'ce-disable',
bannerClass: 'ce-banner',
bannerHTML:
'<p>This website uses cookies. '
+'<a href="#" class="ce-accept">'
+'Enable Cookies'
+'</a>'
+'</p>',
eventScroll: false,
scrollOffset: 200,
clickOutside: false,
cookieName: 'ce-cookie',
cookieDuration: '365',
iframesPlaceholder: true,
iframesPlaceholderHTML:
'<p>To view this content you need to'
+'<a href="#" class="ce-accept">Enable Cookies</a>'
+'</p>',
iframesPlaceholderClass: 'ce-iframe-placeholder',
// Callbacks
onEnable: '',
onDismiss: '',
onDisable: ''
You can customize the placeholder HTML by creating a script tag with the ID ce-banner-html
.
<script id="ce-banner-html" type="text/plain">
<p>
This websites uses cookies to give you the <i>best</i> possible experience.
</p>
<p>
<a href="#" class="ce-accept">Enable Cookies</a> <a href="#" class="ce-disable">Disable Cookies</a> or <a href="#">Read More</a>
<a href="#" class="ce-dismiss">X</a>
</p>
</script>
You can also set the option as a string
containing the HTML:
bannerHTML: '<p>This website uses cookies. <a href="#" class="ce-accept">Enable Cookies</a></p>'
Add the class "ce-script"
and type="text/plain"
to every script tag that installs cookies
<script type="text/plain" class="ce-script">
// GA Demo
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);
</script>
<script type="text/plain" class="ce-script">
// FB Share Demo
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
</script>
For iframes
, change the src
attribute to data-ce-src
and add the class "ce-iframe"
<iframe class="ce-iframe" data-ce-src="https://player.vimeo.com/video/1084537" width="500" height="281">
You can enable placeholders for blocked iframes using the iframesPlaceholder
option:
iframesPlaceholder: true
Doing so, a custom placeholder for blocked iframes will be inserted after the hidden iframe
element.
You can customize the placeholder HTML by creating a script tag with the ID ce-iframePlaceholder-html
.
<script id="ce-iframePlaceholder-html" type="text/plain">
<p>This content is not available without cookies.
<a href="#" class="ce-accept">Enable Cookies</a>
<a href="#">Read More</a>
</p>
</script>
You can also set the option as a string
containing the HTML:
iFramePlaceholderHTML: '<p>This content is not available without cookies. <a href=#" class="ce-accept">Enable Cookies</a>"</p>',
You can choose how to let the user accept or dismiss the cookies.
This option will enable cookies when the user scrolls a certain amount in any direction.
// the cookies will be enabled after the user scrolls 200px
eventScroll: true // default false
scrollOffset: 200
This option will enable cookies when the user clicks on any element on the page that doesn't belong to the notice banner or other script-created elements.
clickOutside: true // default false
Adding the ce-accept
class to any element will make it act as an accept button, enabling the cookies on click.
Adding the ce-dismiss
class to any element will make it act as a dismiss button, removing the notice banner on click.
Adding the ce-disable
class to any element will make it act as a disable button, removing the notice banner and disabling cookies on click.
You can use the callback options to execute a function when cookies are accepted or the notice banner is dismissed.
onEnable: function(){
console.log('cookies have been enabled');
},
onDismiss: function(){
console.log('the banner has been dismissed');
},
onDisable: function(){
console.log('cookies have been disabled');
}
If you found this script useful, buy us a beer!