Cookie Notice

A simple way to show the cookie notice on your website without overloading it. Lightweight (~1kb), quick setup and themes.

Setup

Internal installation (why?)

Styles: Add the following code to your HTML <head></head> section.

<style>
#cookie-notice {
	display: none;
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 999;
	max-width: 450px;
	margin: auto;
	padding: 0.5rem;
	border: 1px solid #eee;
	background-color: #fefefe;
	box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.05);
	font-family: Arial, Helvetica, sans-serif;
	line-height: 22px;
	font-size: 15px;
	text-align: center;
	color: #555;
}
.cookie-notice-more {
	margin: 0 0.25rem;
	text-decoration-style: dashed;
	color: inherit;
}
.cookie-notice-close {
	padding: 0 0.5rem;
	border: 1px solid #ddd;
	border-radius: 0.125rem;
	line-height: 20px;
	text-decoration: none;
	color: #888;
}
@media only screen and (min-width: 768px) {
	#cookie-notice {
		bottom: 1rem;
		border-radius: 0.25rem;
	}
	.cookie-notice-close {
		float: right;
	}
}
</style>

Notice block: Add the following code to your HTML <body></body> section.

<div id="cookie-notice">
	We use cookies to deliver better experience.
	<a href="https://about-cookies.eu.org" class="cookie-notice-more" target="_blank" rel="noopener">More info...</a>
	<a href="javascript:void(0)" class="cookie-notice-close" onclick="closeCookieNotice()">OK</a>
</div>

Script: Add the following code to your HTML footer before the </body> closing tag.

<script>
function closeCookieNotice() {
	const nowDate = new Date();
	const expireDate = new Date(nowDate.setDate(nowDate.getDate() + 30)).toUTCString();
	document.cookie = "cookie_notice=0;path=/;expires=" + expireDate + ";SameSite=Lax;";
	document.getElementById("cookie-notice").style.display = "none";
};
document.addEventListener("DOMContentLoaded", function() {
	const cookie_notice = ('; ' + document.cookie).split('; cookie_notice=').pop().split(';')[0];
	if (cookie_notice !== "0") {
		document.getElementById("cookie-notice").style.display = "block";
	}
});
</script>

External installation

Download Cookie Notice

CSS: Add the following code to your HTML <head></head> section.

<link rel="stylesheet" href="dist/css/cookienotice.min.css">

OR

<link rel="stylesheet" href="https://cookienotice.js.org/cookienotice.min.css">

HTML: Add the following code to your HTML <body></body> section.

<div id="cookie-notice">
	We use cookies to deliver better experience.
	<a href="https://about-cookies.eu.org" class="cookie-notice-more" target="_blank" rel="noopener">More info...</a>
	<a href="javascript:void(0)" class="cookie-notice-close" onclick="closeCookieNotice()">OK</a>
</div>

JS: Add the following code to your HTML footer before the </body> closing tag.

<script src="dist/js/cookienotice.min.js"></script>

OR

<script src="https://cookienotice.js.org/cookienotice.min.js"></script>

Bundle installation

Note: Use this type of installation if you like the English version text and look of the standard cookie notice theme (view it). This requires to include only one JS file.

Download Cookie Notice

Add JavaScript: Add the following code to your HTML <head></head> section or in your HTML footer before the </body> closing tag.

<script src="dist/js/cookienotice.bundle.min.js"></script>

OR

<script src="https://cookienotice.js.org/cookienotice.bundle.min.js"></script>

Explore Themes

You can customize your cookie notice look thanks to themes.

View Themes

Frequently Asked Questions

If your website uses any kind of http cookies (tracking cookies like Google Analytics, to set preferrences, session cookies, etc.) and your serve/have/allow visitors from the European Union (most likely, yes), then according to the GDPR EU Directive you are obligated to clearly show (notice bar) that your website is using cookies.

This Cookie Notice is compatibile with 99.9% of current mobile and desktop browsers with JavaScript enabled (by default it is enabled).

Yes. You need to have an FTP access to your website files in order to edit and insert the Cookie Notice code.

The Cookie Notice will be shown to all users regardless the country or region. This is a simple cookie notification bar solution. Showing the notice to EU users only, require additional setup such as geo-location services and more code.

Yes. For that, you just need to edit your WordPress theme header.php and/or footer.php and insert the Cookie Notice code. By default those files are located in the /wp-content/themes/your-current-theme/ directory.