search

dobarkod / cookie-banner

JavaScript based cookie-info banner for complying with EU cookie law
MIT License
425 stars 85 forks source link
cookie-banner eu-cookie

readme

Cookie Banner Build Status

Cookie Banner is a super-easy way to ensure you're complying with the EU cookie law. Just reference the cookiebanner.min.js script from your page and you're done.

Cookie Banner script is very lightweight and depends on no JavaScript libraries, css files or images.

Demo

To see the script in action download the files and open/serve tests/demo.html and/or tests/tests.html.

Quickstart

Add a single line to your web page, just before the closing </body> tag:

<script type="text/javascript" id="cookiebanner"
  src="https://cdn.jsdelivr.net/gh/dobarkod/cookie-banner@1.2.2/dist/cookiebanner.min.js"></script>

or via cdnjs:

<script type="text/javascript" id="cookiebanner"
  src="https://cdnjs.cloudflare.com/ajax/libs/cookie-banner/1.2.2/cookiebanner.min.js"></script>

This will display a black-and-white floating banner at the bottom of your web page, informing the user that the site is using cookies, and giving them the link to a page with more information.

When the user clicks the "close" button, the banner will set a cookie (oh, the irony!) remembering that the banner was acknowledged, so the same user will not be bothered again.

Options

If you don't like the defaults, you can modify the banner content and style. The following options are settable through a data- property on the script tag:

Here's an example:

<script type="text/javascript" id="cookiebanner"
    src="https://cdn.jsdelivr.net/gh/dobarkod/cookie-banner@1.2.2/dist/cookiebanner.min.js"
    data-height="20px" data-position="top"
    data-message="We use cookies to improve your browsing experience.">
</script>

Self-hosting

If you don't want to depend on cdnjs or jsdelivr, copy the cookiebanner.min.js file directly to your site and serve it yourself.

If you want to compile cookiebanner with the rest of your application's javascript, you can call it with options as follows:

<script type="text/javascript">
      var options = { message: "We use cookies to enhance your experience.", moreinfo: "/about/cookies" };
      var cb = new Cookiebanner(options); cb.run();
</script>

Internals and more options

If the banner needs to be shown, the script will create the following DOM subtree by default and add it just before the closing </body> tag:

<div class="cookiebanner">
    <div class="cookiebanner-close" style="float: right; padding-left:5px;">&#10006;</div>
    <span>Message. <a rel="noopener noreferrer" href="https://github.com/dobarkod/cookie-banner/blob/master/." target="_blank">Learn more</a></span>
</div>

If the close-precedes option is sto to false (added in 1.2.1), the DOM looks slightly different:

<div class="cookiebanner">
    <span>Message. <a rel="noopener noreferrer" href="https://github.com/dobarkod/cookie-banner/blob/master/." target="_blank">Learn more</a></span>
    <div class="cookiebanner-close" style="float: right; padding-left:5px;">&#10006;</div>
</div>

You can use CSS with div.cookiebanner > span and div.cookiebanner > a to further modify the banner appearance.

You can also try customizing the close button via the .cookiebanner-close CSS class. Keep in mind that you might have to override and/or reset certain properties by using !important CSS rules.

Event-Handlers (Callbacks)

There are two ways you can utilize event handlers like i.e. on-inserted.

Within JS (recommended):

<script type="text/javascript">
      var options = { onInserted: function (instance) { console.log('Hey, I got inserted!') } };
      var cb = new Cookiebanner(options); cb.run();
</script>

As a data-attribute:

<script type="text/javascript" id="cookiebanner"
    src="https://cdn.jsdelivr.net/gh/dobarkod/cookie-banner/dist/cookiebanner.min.js"
    data-on-inserted="function (instance) { console.log('Hey, I got inserted!'); }">
</script>

Hacking

Get the newest and the freshest from GitHub:

git clone https://github.com/dobarkod/cookie-banner.git

If you've modified the code, it's recommended you run it through linter to catch potential errors, and minifier to minimize its footprint.

We're old-school here so we just use Makefile for the tasks:

make lint  # run jshint to check the code
make test  # run the tests
make # minify it

You'll need jshint, eslint and uglifyjs (v2) tools installed for this, and also phantomjs if you want to run the automated tests.

Pull requests are welcome! In order to get your pull-request accepted, please follow these simple rules:

License (MIT)