Zendesk Help Center - cookies consent banner

document_head.hbs

<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<script>
	$(function() {
		var cookies_accepted = localStorage.getItem('cookies_accepted');

		if (cookies_accepted !== 'true') {
			$("#cookie-consent-banner").show();
		}

		$("#cookie-consent-banner .close").click(function() {
			localStorage.setItem("cookies_accepted", true);
			$("#cookie-consent-banner").hide();
		});
	});
</script>
<style>
	#cookie-consent-banner {
		padding: 10px;
		background: hsl(45, 100%, 81%);
		z-index: 9999999;
		text-align: center;
		display: none;
	}

	#cookie-consent-banner .close {
		padding-left: 10px;
	}
</style>
<div id="cookie-consent-banner">
	<span>Just a heads up: we use cookies, ok?</span>
	<a class="close" href="#">X</a>
</div>

Will the above script stops stamping the cookies before user consent? if not what would be the script to stop cookies stamping before user consent. I tried the below code but not sure if that is correct or not.

< div id="cookie-consent-banner" style="display: none;"> < span>By continuing to use this website, you consent to the use of cookies in accordance with our <a class="cookie-policy-link js-cookie-policy-link" href="#">Cookie&nbsp;Policy</a></span> < a class="close" href="javascript:void(0)">X</a> < /div>

#cookie-consent-banner { background: #fff; border: 1px solid #ccc; bottom: 2%; box-shadow: 0px 4px 8px rgba(0,23,35,0.1); left: 10px; padding: 20px; position: fixed; width: 340px; z-index: 1000; } #cookie-consent-banner .close { font-weight: bold; padding: 3px 8px; color: #333; position: absolute; right: 5%; top: 5%; } #cookie-consent-banner .close:hover { text-decoration: none; background-color: #ededed; }

window.zESettings = { cookies: false }; $(document).ready(function() { var cookies_accepted = localStorage.getItem('cookies_accepted'); if(!cookies_accepted) { $("#cookie-consent-banner").show(); } $("#cookie-consent-banner .close").click(function() { localStorage.setItem("cookies_accepted", true); $("#cookie-consent-banner").hide(); window.zESettings = { cookies: true }; }); });

Hey @fornandakishore, the idea here is simply to display a banner informing the user that cookies are always used in the help center, regardless of their consent. In this example, there is no javascript function that will stop writing cookies if the user does not agree. If they click the "X" link, we just stop bothering them on every page.

Cheers!

I might have missed something here. If you're talking about defining how cookies are used for the Web Widget, you should use the updateSettings API. Here's an example:

<script>
	window.zESettings = {
		cookies: false
	};
	
	$(document).ready(function() {
		var cookies_accepted = localStorage.getItem('cookies_accepted');
		if (cookies_accepted !== 'true')) {
			$("#cookie-consent-banner").show();
		}
		
		$("#cookie-consent-banner .close").click(function() {
			localStorage.setItem("cookies_accepted", true);
			$("#cookie-consent-banner").hide();
			zE('webWidget', 'updateSettings', {
				cookies: true
			});
		});
	});
</script>

### I've updated the cookie consent banner to use vanilla JavaScript instead of jQuery.

<style>
	#cookie-consent-banner {
		display: none; /* Initially hidden */
		background-color: #f1f1f1;
		padding: 10px;
		position: fixed;
		bottom: 0;
		width: 100%;
		text-align: center;
	}
	.close {
		cursor: pointer;
		color: blue;
		text-decoration: underline;
	}
</style>

<div id="cookie-consent-banner">
	<p>This site uses cookies to enhance your experience. <span class="close">Close</span></p>
</div>

<script>
	window.zESettings = {
		cookies: false
	};

	document.addEventListener("DOMContentLoaded", function() {
		var cookies_accepted = localStorage.getItem('cookies_accepted');
		if (cookies_accepted !== 'true') {
			document.getElementById("cookie-consent-banner").style.display = "block"; // Show banner
		}
		
		document.querySelector("#cookie-consent-banner .close").addEventListener("click", function() {
			localStorage.setItem("cookies_accepted", 'true'); // Store acceptance
			document.getElementById("cookie-consent-banner").style.display = "none"; // Hide banner
			zE('webWidget', 'updateSettings', {
				cookies: true
			});
		});
	});
</script>