Okay so I set up a div with my message and buttons (one for accepting it and another one “for learning more about cookies”)… but then how do I assign this div or section to js-cookie ?
In the settings of the page, at the Custome Code section, I’ve added the example code for a cookie that will expire in 7 days.
But what I cannot understand is how to tell this script to hide or show, depending on the expiration of that cookie, the div section with the consent message.
<script>
var Webflow = Webflow || [];
Webflow.push(function() {
// Load cookie library
$.getScript('https://cdn.rawgit.com/js-cookie/js-cookie/v2.1.2/src/js.cookie.js', function() {
// If cookie found (already shown)
if(Cookies.get('notice') !== undefined) {
// Hide cookie notice (change jQuery selector to match your own)
$('.cookies_consent_banner').remove();
}
// On button click
$('.w-button').click(function() {
// Calculate when you want to display the notice again (change 15 to number of minutes you want)
var expireTime = new Date(new Date().getTime() + 60000 * 15);
// Set this cookie
Cookies.set('notice', 'shown', { expires: expireTime });
});
});
});
</script>
I’ve changed it to that script but now it loads an empty page when I export it. I’ve deleted all cookies in my web browser to be sure it wasn’t accepted already.
Once this error is solved, how do I activate the cookie ? I mean, how do I assign that function to the orange button ?
Thank you again for taking the time to write that script and for helping me!!
I understand, but it is necessary that it only gets hidden when the consent is accepted via the button. If it is not clicked is should appear again and again until you click on accept.
On the other hand, I deleted all cookies and tried with another web browser, how’s it possible it knew that it had been already displayed in my computer (you mean know it should work because the time that we set already expired?)
Should this thread be preserved as sticky for all users looking for a solution for the cookies consent message ? I’m keeping my example page as public so your code can be consulted !
In your code that you’ve pasted here, according to this calculation, when will the notice be displayed again? What is the 60000 * 15, exactly in days/minutes?
I think 15 is the number of minutes. You just need to calculate how many minutes equals to the amount of expiration time that you wish (I guess, it worked for me like that) and replace in the script 15 with your own number of minutes.
So, and excuse my ignorance here, but just for clarity, does the above script mean that if a specific user goes to the website, then leaves the website and then returns within 15 minutes, the cookie message will not reappear. If he returns after 15 mins, it will.
So the 60000 has got nothing to do with it?
If this is so and I wanted this to be 7 days, I would put in 10,080?
Would it be possible to use this same script with two different sections ?
I would like to show a message that appears just once a day, but I’ve been trying to modify the script with the new names without any success. What I’ve tried is similar to (replacing Cookies.get and Cookies.get with Message.get and Message.set; and the DIV and button names):
var Webflow = Webflow || ;
Webflow.push(function() {
// If cookie found (already shown)
if(Message.get('notice') !== undefined) {
// Hide cookie notice (change jQuery selector to match your own)
$('.new_message').remove();
}
// On button click
$('.message_button').click(function() {
// Calculate when you want to display the notice again (change 15 to number of minutes you want)
var expireTime = new Date(new Date().getTime() + 60000 * 15);
// Set this cookie
Message.set('notice', 'shown', { expires: expireTime });
});
Do you mean like this? (I added _V2 to the renamed cookie and class selectors)
// Load cookie library
$.getScript('https://cdn.rawgit.com/js-cookie/js-cookie/v2.1.2/src/js.cookie.js', function() {
// If cookie found (already shown)
if(Cookies.get('notice') !== undefined) {
// Hide cookie notice (change jQuery selector to match your own)
$('.cookies_consent_banner').remove();
}
// On button click
$('.agree_button').click(function() {
// Calculate when you want to display the notice again (change 15 to number of minutes you want)
var expireTime = new Date(new Date().getTime() + 60000 * 15);
// Set this cookie
Cookies.set('notice', 'shown', { expires: expireTime });
});
// If cookie found (already shown)
if(Cookies_V2.get('notice2') !== undefined) {
// Hide cookie notice (change jQuery selector to match your own)
$('.cookies_consent_banner_V2').remove();
}
// On button click
$('.agree_button_V2').click(function() {
// Calculate when you want to display the notice again (change 15 to number of minutes you want)
var expireTime = new Date(new Date().getTime() + 60000 * 15);
// Set this cookie
Cookies_V2.set('notice2', 'shown', { expires: expireTime });
});
});
// If cookie found (already shown)
if(Cookies.get('travaux') !== undefined) {
// Hide cookie notice (change jQuery selector to match your own)
$('.Travo').remove();
}
// On button click
$('.nuevoboton').click(function() {
// Calculate when you want to display the notice again (change 15 to number of minutes you want)
var expireTime = new Date(new Date().getTime() + 60000 * 1);
// Set this cookie
Cookies.set('travaux', { expires: expireTime });
});