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.
To see the script in action download the files and open/serve tests/demo.html and/or tests/tests.html.
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/[email protected]/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.
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:
height- Banner/notice height (default:32px)fg- Banner/notice text color (default:#ddd)bg- Banner/notice background color (default:#000)link- Link text color (default:#aaa)position- Banner/notice position,toporbottom(default:bottom)padding- Set custom padding (default:5px 16px)message- Notice message textlinkmsg- Link text content (default:Learn more)close-text- Text/symbol for the.cookiebanner-closeelement (default:✖)close-style- CSS style for.cookiebanner-closeelement (default:float:right;padding-left:5px;)close-precedes- Controls whether.cookiebanner-closeelement precedes or follows the<span>containing the message (default:true)font-size- Text/font size for the .cookiebanner (container) element (default:14px)font-family- Font family for the .cookiebanner (container) element (default:arial, sans-serif)text-align- Text align/position for the .cookiebanner (container) element (default:center)effect- Effect used when inserting the notice, currently onlyfadeis supported (triggered when cookiebanner is displayed and when it is closed) (default:null)fade-out-duration-ms- Duration in milliseconds of fade-out effect (only iffadeeffect is specified, default:2000)cookie- Name for the cookie that stores acceptance info (default:cookiebanner-accepted)expires- Cookie expiry date/time (defaults toInfinityakaFri, 31 Dec 9999 23:59:59 GMT). There's basic support for specifying a callback function (more flexibility, must return one ofNumber,String, orDate-- seeCookies.set()). You can also just specify a valid UTC string. When specified as a "numeric string", it is treated as number of seconds from now. So,expires: '90'ordata-expires="90"would expire the cookie in 90 seconds.cookie-path- Path to set for the cookiecookie-domain- Set a custom cookie domain (default:null)cookie-secure- Set (true/false) secure cookie for HTTPS (default:false)moreinfo- Link where the visitor can read more about cookies (default: http://aboutcookies.org)moreinfo-target- Target formoreinfolink (default:_blank)moreinfo-decoration- Text decoration formoreinfolink (default:none)moreinfo-font-weight- Font weight formoreinfolink (default:normal)moreinfo-font-size- Font size (i.e 12px) formoreinfolink (default:null)moreinfo-rel- Rel attribute value formoreinfolink (default:noopener noreferrer). Set tofalseor `` if you wish to disable it.moreinfo-class- CSS class formoreinfolink (default:null). If present, it will be used to detect themoreinfolink (instead of getting the firstaelement withinmessage). Use when yourmessagehas more than one link and you do not want the first one to havemoreinfolink set.mask- Controls whether a mask is created over the viewport (default:false). Clicking anywhere on the mask is considered as acceptance.mask-opacity- Opacity used for the windowmask(default:0.5)mask-background- CSS background style applied to themask(default:#000)zindex- Z-index set on the notice (default:255). Ifmaskis used, the notice's z-index is automatically incremented by 1 so it appears above the mask.accept-on-scroll- Whentrue, agrees and closes the notice when window is scrolled. (default:false)accept-on-click- Whentrue, agrees and closes the notice when clicking anywhere on the page. (default:false)accept-on-first-visit- Whentrue, agrees automatically (which stops showing the notice for subsequent requests), but the notice is not automatically closed. (default:false)accept-on-timeout- Automatically agrees and closes the notice after specified number of milliseconds. (default:null)on-inserted- A function which gets executed after the banner is inserted in the DOM (default:null)on-closed- A function which gets executed after the banner is closed (default:null)delay-before-close- Wait N milliseconds before closing the notice. (default:null)debug- Whentrue, closes the banner without setting the cookie (default:false)
Here's an example:
<script type="text/javascript" id="cookiebanner"
src="https://cdn.jsdelivr.net/gh/dobarkod/[email protected]/dist/cookiebanner.min.js"
data-height="20px" data-position="top"
data-message="We use cookies to improve your browsing experience.">
</script>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>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;">✖</div>
<span>Message. <a rel="noopener noreferrer" href=".." 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=".." target="_blank">Learn more</a></span>
<div class="cookiebanner-close" style="float: right; padding-left:5px;">✖</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.
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>Get the newest and the freshest from GitHub:
git clone https://github.com/dobarkod/cookie-banner.gitIf 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 itYou'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:
- all code submissions must pass cleanly (no errors) with
make test - there should be no external JavaScript, CSS, image files or any other dependencies
- the code should work with no errors or warnings on recent Chrome, Firefox, Safari, Internet Explorer browsers and iOS and Android platforms
- if you want to add significant features, file an issue about it first so we can discuss whether the addition makes sense for the project
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
