Simple "Cookie Warning" Notification βœ”


(Rajput Moderator) #1

HTML + JS

<p class="cookies-warning" id="cookieswarning" style="visibility:hidden;">
    GulshanForum uses cookies to make its website easier to use. <a href="https://help.gulshankumar.net/t/privacy-policy/6">Learn more about cookies.</a>
    <a href="#close" class="close" id="close" onclick="document.getElementsByClassName('cookies-warning')[0].style.display = 'none';"> X</a>
</p>

CSS

.cookies-warning {
    position: fixed;
    bottom: 10px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 1000;
    background: rgba(46,50,52,.75);
    box-shadow: 0 3px 4px 0 rgba(46,50,52,.1);
    border-radius: 5px;
    color: #fff;
    font-size: 12px;
    padding: 10px 13px 10px 20px;
    display: inline-block;
    width: 100%;
    max-width: 560px;
    font-family: 'Open Sans',Arial,sans-serif;
}
.cookies-warning {
    text-align: center;
}
.cookies-warning p {
    margin: 0 0 10px;
}


.cookies-warning a {
    color: #fff;
    opacity: .7;
    text-decoration: none;
    display: inline-block;
}

.cookies-warning .close {
    color: #fff;
    display: inline-block;
    padding: 5px;
    font-size: 1.2em;
    font-weight: 600;
    position: relative;
    top: 2px;
    transition: .18s cubic-bezier(.55,0,.1,1);
    text-decoration: none;
    text-shadow: none;
    opacity: 1;
}

JAVASCRIPT

//<![CDATA[ 
window.onload=function(){
(function() {
    var visited = localStorage.getItem('visited');
    if (!visited) {
        document.getElementById("cookieswarning").style.visibility = "visible";
        localStorage.setItem('visited', true);
    }
})();
}//]]>

PREVIEW
image


(Bihari Moderator) #3

is this a compliment?


(Gaitonde) #5

Perfect code if it has cookie to hide it on second visit.


(Ultra Noob) #6

where to add it and how


(Ultra Noob) #7

@gulshankumar help please


(Rajput Moderator) #8

Which theme are you using? does it include hooks feature?


(Rajput Moderator) #9

This JavaScript + No-Library (pure JS) code works :slight_smile:

//<![CDATA[ 
window.onload=function(){
(function() {
    var visited = localStorage.getItem('visited');
    if (!visited) {
        document.getElementById("cookieswarning").style.visibility = "visible";
        localStorage.setItem('visited', true);
    }
})();
}//]]>  

(Ultra Noob) #10

I am using Generate press theme


(Saksham Kumar) #11

And where to add all this code in Newspaper theme?? Using header and footer plugin?


(Rajput Moderator) #12

Sorry @Adarsh_Sahu and @Saksham, I don’t know how to implement this is a WordPress website… I am able to do it in HTML website :tired_face:

Maybe @gulshankumar or @anon71964425 can help :sweat_smile:


#13

Hello,

There are three things specially.

  1. HTML+JS (Add in footer)
  2. CSS (Add in Additional CSS option, find at Theme > Customize option)
  3. Again, JavaScript (Add in footer, same as first)

Where is footer?

  • If you use Genesis, please check Theme Settings. For GeneratePress, hooks option. For others, try Header or Footer plugin.

Script must be added with script opening and closing tag.

<script> ... </script>


#14

Or else paste this code inside functions.php or use code snippets plugin. Make sure to update site name and privacy policy link in the HTML code.

add_action( 'wp_footer', 'gdpr_consent_kcdn' );
function gdpr_consent_kcdn() {
echo '
	<p class="cookies-warning" id="cookieswarning" style="visibility:hidden;">
		GulshanForum uses cookies to make its website easier to use. <a href="https://help.gulshankumar.net/t/privacy-policy/6">Learn more about cookies.</a>
		<a href="#close" class="close" id="close" onclick="document.getElementsByClassName(\'cookies-warning\')[0].style.display = \'none\';"> X</a>
	</p>
	<style type=\'text/css\'>
	.cookies-warning {
		position: fixed;
		bottom: 10px;
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		z-index: 1000;
		background: rgba(46,50,52,.75);
		box-shadow: 0 3px 4px 0 rgba(46,50,52,.1);
		border-radius: 5px;
		color: #fff;
		font-size: 12px;
		padding: 10px 13px 10px 20px;
		display: inline-block;
		width: 100%;
		max-width: 560px;
		font-family: \'Open Sans\',Arial,sans-serif;
	}
	.cookies-warning {
		text-align: center;
	}
	.cookies-warning p {
		margin: 0 0 10px;
	}
	.cookies-warning a {
		color: #fff;
		opacity: .7;
		text-decoration: none;
		display: inline-block;
	}
	.cookies-warning .close {
		color: #fff;
		display: inline-block;
		padding: 5px;
		font-size: 1.2em;
		font-weight: 600;
		position: relative;
		top: 2px;
		transition: .18s cubic-bezier(.55,0,.1,1);
		text-decoration: none;
		text-shadow: none;
		opacity: 1;
	}
	</style>
	<script type=\'text/javascript\'>
	//<![CDATA[ 
	window.onload=function(){
	(function() {
		var visited = localStorage.getItem(\'visited\');
		if (!visited) {
			document.getElementById(\'cookieswarning\').style.visibility = \'visible\';
			localStorage.setItem(\'visited\', true);
		}
	})();
	}//]]>
	</script>
';
}

#15

@Paritosh How you make code look so good and beautiful? :thinking:


(Rajput Moderator) #16

use 3 backticks (```) above and below the code.

image


(Saksham Kumar) #17

@Paritosh How to check this if it is working or not? It will be displayed everywhere or in EU?


(Rajput Moderator) #18

everywhere around the :earth_americas:


(Rajput Moderator) #19

Open your website in incognito mode and you will see that β€œCookie Warning”.


#20

@Paritosh @gulshankumar I have got the exact same code used by KeyCDN. Popup doesn’t hide unless the user closes the popup. Maybe this is GDPR Compliant.

add_action( 'wp_footer', 'gdpr_consent_gforum' );
function gdpr_consent_gforum() {
echo '
	<p class="cookies-warning" style="display:none;">
		GulshanForum uses cookies to make its website easier to use. <a href="https://help.gulshankumar.net/t/privacy-policy/6">Learn more about cookies.</a>
		<a href="#close" class="close">X</a>
	</p>
	<style type=\'text/css\'>
		.cookies-warning {
			position: fixed;
			bottom: 10px;
			left: 50%;
			-webkit-transform: translateX(-50%);
			transform: translateX(-50%);
			z-index: 1000;
			background: rgba(46,50,52,0.75);
			box-shadow: 0 3px 4px 0 rgba(46,50,52,0.1);
			border-radius: 5px;
			text-align: center;
			color: #fff;
			font-size: 12px;
			padding: 10px 13px 10px 20px;
			display: inline-block;
			width: 100%;
			max-width: 560px;
		}
		.cookies-warning .close {
			color: #CCCCCC;
			display: inline-block;
			padding: 5px;
			font-size: 1.2em;
			font-weight: 600;
			position: relative;
			top: 2px;
			transition: 0.18s cubic-bezier(0.55, 0, 0.1, 1);
			text-decoration: none;
			text-shadow: none;
			opacity: 1;
		}
		.cookies-warning a {
			color: #fff;
			opacity: 0.7;
			text-decoration: none;
			display: inline-block;
		}
	</style>
	<script type=\'text/javascript\'>
		jQuery(function() {
			var text = jQuery(\'.cookies-warning\');
			var sign = text.find(\'.close\');
			cookieTxt = "cookiesWarningSeen=1";
			if (document.cookie.indexOf(cookieTxt) !== -1) {
				return;
			}
			text.show();
			sign.click(function() {
				window.cookieToggle = function() {};
					text.hide();
				document.cookie = cookieTxt;
			});
			window.cookieToggle = function() {
				text.toggle();
			};
		});
	</script>
';
}

P.S: @Paritosh Thanks for the tip on making code beautiful. :wink:


(Abhishek Pathak) #22

Perfect code. :heart:


(Abhishek Pathak) #23