Create responsive jquery cookie disclaimer bar according the EU Law

by Posted on

It is important to display cookie disclaimer message if you are using cookie for your website as per Cookie Law. The Cookie Law is a piece of privacy legislation that requires websites to get consent from visitors to store or retrieve any information on a computer, smartphone or tablet.It was designed to protect online privacy, by making visitor to aware of how information about them is collected and used online, and give them a choice to allow it or not. So i found a simple jquery plugin (JQuery-Cookies-Message) to display responsive jquery cookie disclaimer bar according.
Responsive-jquery-cookie-disclaimer-bar
JQuery-Cookies-Message Features:
* Easy to implement
* Customizable colors and text
* Multiple button combinations and customizable links style
* Custom cookie expire time to remember the user’s choice
* Responsive design for desktop and mobile devices


Integration of responsive jquery cookie disclaimer bar

Include the JQuery library and the Cookies Message Plugin (JS+CSS) on page.

<!-- Import CSS -->
<link href="cookies-message.min.css" rel="stylesheet">    
 
<!-- Import JQuery library and the Cookies Message Plugin -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" crossorigin="anonymous" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="></script>
<script src="cookies-message.min.js"></script>

All done Initialize cookies-message plugin on page.

<script>
$(function() { $.CookiesMessage(); });
</script>




You can also customize the message bar by using following options.

<script>
$(function() {
$.CookiesMessage({
		messageText: "We use technical and analytics cookies to ensure that we give you the best experience on our website.",
		messageBg: "#151515",								// Message box background color
		messageColor: "#FFFFFF",						// Message box text color
		messageLinkColor: "#F0FFAA",				// Message box links color
		closeEnable: true,									// Show the close icon
		closeColor: "#444444",							// Close icon color
		closeBgColor: "#000000",						// Close icon background color
		acceptEnable: true,									// Show the Accept button
		acceptText: "Accept & Close",				// Accept button text
		infoEnable: true,										// Show the More Info button
		infoText: "More Info",							// More Info button text
		infoUrl: "#",												// More Info button URL
		cookieExpire: 180										// Cookie expire time (days)
	});
  });
</script>

See live demo and download source code.

DEMO | DOWNLOAD

See official github repository for more information..


Video Demo – Responsive jquery cookie disclaimer bar

Published by admin