jquery.cookiefy

It´s a very lightweight, adjustable and easy-to-use plugin for the EU-law cookie warning.

jquery.cookiefy on GitHub

What are Cookies and what is the EU cookie law?

Cookies are small pieces of data which are stored on the computers or mobile devices of site visitors. They are used to gather information about the site visitor. Also it tells the computer if the user already visited a specific site once before so he e.g. has not to sign up every time he visits the site again.

The EU Cookie law states, that site owners have to inform visitors about their usage of cookies. It was created to save and protect the privacy of site visitors.

What is jquery.cookiefy?

If you are using cookies on your website, you have to inform them about your usage of cookies. jquery.cookiefy helps you fulfill the restrictions of the new EU cookie law. You only have to adust the predefined parameters to your custom needs.

Benefits of using jquery.cookiefy

  • Simple to understand.
  • Easy to customize.
  • Lightweight: just 4 kb total.
  • Create and customize your EU cookie law warning in just a few minutes.

Installation

  • Install
    • via bower: bower install --save jquery.cookiefy
    • via npm: npm install --save jquery.cookiefy
    • via CDN (jsDelivr)
    • via downloaded files from GitHub
  • Include jquery.cookiefy in your HTML.
    • When using bower: <script src="bower_components/jquery.cookiefy/dist/jquery.cookiefy.min.js"></script>
    • When using npm: <script src="node_modules/jquery.cookiefy/dist/jquery.cookiefy.min.js"></script>
    • When using CDN: <script src="//cdn.jsdelivr.net/jquery.cookiefy/1.0/jquery.cookiefy.min.js"></script>
    • When using downloaded files: <script src="YOUR_PATH/jquery.cookiefy.min.js"></script>

Usage

$('body').cookiefy();

Parameters

Name Default Sample Description
displayedHtml warning text* You can insert your own cookie warning text, e.g.with a link to your cookie policy site.
closeButtonUrl 'img/close.png' Defines the URL of the close icon. It can be a relative or absolute URL or a base64-encoded image.
backgroundColor #bebebe tomato Changes the background-color of the cookie-warning.
color #000 red Sets the color.
fontFamily Helvetica Sets the font-family
fontSize 1.25em Sets the font-size.
borderTop 1px solid #000 2px dotted green Sets the border-top value.
zIndex 50 130 Set the z-index value of the cookie warning container
cssPrefix cookiefy_ my-own-page_ Set the css id prefix for all created DOM elements and for the cookie name
devMode false On true no cookie will be set and the warning shows up every time you open the page.

*Default warning text: We use cookies to ensure that we give you the best experience on our website. If you continue, you agree with <strong>our cookie policy</strong>.

Example

$('body').cookiefy({
    backgroundColor: 'dimgray',
    color:'ghostwhite',
    fontFamily: 'Helvetica',
    fontSize: '1rem',
    borderTop: '1px solid #000'
});