Vanilla JavaScript Library For EU Cookie law Alert – euc.js

Preview:

Description:

euc.js is a simple yet customizable and extendable JavaScript library used to display EU-mandated cookie alert message on the webpage.

How to use it:

Include the core JavaScript file euc.js or euc.min.js in the html page.

<script src="euc.js"></script>

Initialize the plugin to display a default cookie alert message on the page.

euc.init();

All default configuration options.

euc.init({
  cookieName           : "euc",
  cookieFlag           : true,
  cookieMaxAge         : 14,
  alertId              : "cookieAlert",
  alertContent         : 'This website uses cookies. <a href='/privacy'>(Privacy)</a><button>Okay.</button>',
  alertHook            : "show-cookie-alert",
  alertParentSelector  : "body",
  alertCloseSelector   : "button",
  alertPlacementTop    : true
});

Style the cookies disclaimer in the CSS.

#cookieAlert {
  display: block;
  position: absolute;
  position: fixed;
  bottom: 0;
  right: 0;
  background-color: #763568;
  color: #FFF;
  font-weight: 700;
  padding: 8px 8px 8px 10px
}
#cookieAlert>button {
  display: inline-block;
  font-weight: 700;
  color: white;
  border: 4px solid #fff;
  background-color: transparent;
  padding: 12px;
  -webkit-transition: color .15s cubic-bezier(.4, 1, .2, 1), background-color .3s cubic-bezier(.4, 1, .2, 1);
  transition: color .15s cubic-bezier(.4, 1, .2, 1), background-color .3s cubic-bezier(.4, 1, .2, 1);
}
#cookieAlert>button:hover, #cookieAlert>button:active, #cookieAlert>button:focus {
  background-color: #fff;
  color: #763568
}