Create responsive jquery cookie disclaimer bar according the EU Law

Responsive-jquery-cookie-disclaimer-bar

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.


<link href="cookies-message.min.css" rel="stylesheet">    
 

<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.

See official github repository for more information..

Video Demo – Responsive jquery cookie disclaimer bar


Leave a Reply

Your email address will not be published. Required fields are marked *

Top