Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Zendesk Help Center - cookies consent banner
<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>
@fornandakishore
Copy link

fornandakishore commented Sep 6, 2019

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 }; }); });

@luizfaias
Copy link
Author

luizfaias commented Oct 15, 2019

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!

@luizfaias
Copy link
Author

luizfaias commented Oct 15, 2019

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>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment