PureCookie is a lightweight Javascript Library which helps you to display an elegant cookie consent popup to ask the user to accept or reject the cookies.
It is the best plugin out there for alerting users about the use of cookies on your website.
The plugin compatible with EU Cookie Law and will not make you kill yourself in the process.
It’s free, fast and relatively painless.
If you are running a business which based in EU or it directed toward EU citizens, You should need to comply with the EU Cookies Directive.
That means you need to tell your site visitor’s that you’re using the cookies and You should need to get their consent for cookie usage.
How to Use Cookie Consent Popup:
After downloading the source code. You will find two files which you need to add into your site head or on the page where you want to show the Popup.
<link rel="stylesheet" href="purecookie.css"/> <script src="purecookie.js"></script>
There is no need to add any HTML code but if you want to customize its banner text. You need to edit the purecookie.js file.
Here is the Configuring option where you can change the text and add a link of the cookie policy page.
// --- Config --- // var purecookieTitle = "Cookies."; // Title var purecookieDesc = "By using this website, you automatically accept that we use cookies."; // Description var purecookieLink = '<a href="cookie-policy.html" target="_blank">What for?</a>'; // Cookiepolicy link var purecookieButton = "Understood"; // Button text // --- --- //
If you want to customize the box design like changing the background color or text color, You need to edit the purecookie.css
The Cookie Container class allows you to customize its width, height, color and many more.
.cookieConsentContainer {
z-index: 999;
width: 350px;
min-height: 20px;
box-sizing: border-box;
padding: 30px 30px 30px 30px;
background: #232323;
overflow: hidden;
position: fixed;
bottom: 30px;
right: 30px;
display: none;
}That’s It!
There are many other ways to display the notification box for cookies on your website. This plugin shows the box at the bottom right on your website.
By customizing the CSS code, You can change its position to fix it at the top of the page such as header notification.