Cookie Consent - Modal wrapper but just on the first load possible?

I know this is a lot to ask for but…

After reading its wiki I can understand how to make the cookie valid for a certain period of time… but how do I make a

appear or disappear depending on that cookie ?

I don’t understand how does not Webflow an option to do this in a “webflow way”, I mean, it is necessary for all European web sites…

Thank you

You show it by default. If the user has a cookie that it was already shown, hide it.

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 ?

I don’t understand, can you show what have you done so far?

Oh I’m sorry.

I have created a blank site with a typical cookies acceptance banner :

https://preview.webflow.com/preview/cookies-consent-demo?preview=fb0439b6f885202a28787fb111df0b95

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.

Paste this in your site header custom code:

<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>
3 Likes

Thank you !!

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

It should already work. To test it, open a new private/incognito window.

What the script does is to hide the notice if it was already previously displayed, not closed via orange button.

You can use a simple click interaction on the button to hide the modal.

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?)

It’s working !!! I think it’s working !!!

If it comes back in 10 minutes it’s working !!!

I can’t believe it ! thank you so much !!

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 !

Thank you !!!

2 Likes

Hi,

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?

Hope that makes sense!

Thanks

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?

Thanks!

60000 is the amount of milliseconds in a minute. Don’t change this constant.

You multiply it by the number of minutes you want, and hours, and days, and years.

1 second:   1000

1 minute:   1000 * 60, which is the same as 60000

15 minutes: 60000 * 15

1 hour:     60000 * 60

12 hours:   60000 * 60 * 12

1 day:      60000 * 60 * 24

7 days:    60000 * 60 * 24 * 7

28 days:    60000 * 60 * 24 * 28

1 year:     60000 * 60 * 24 * 365

10 years:   60000 * 60 * 24 * 365 * 10
2 Likes

Thank you once again @samliew !!

Hello again,

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() {

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

});

});

Thank you !!

You duplicate everything inside getScript function, and rename the cookie and class selectors.

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

I can’t make it work, I’ve tried all possible combinations. All I get is that the first Cookie stops working…

I think I’m doing something wrong that I don’t see.

If I replace the old script with a new one, with a new DIV .name and a new .button , it doesn’t work.

I’m just trying to setup a new one, without the older one, using Travaux for the Cookies.set and anther button.

What’s wrong ??

var Webflow = Webflow || ;
Webflow.push(function() {

// Load cookie library
$.getScript(‘https://cdn.rawgit.com/js-cookie/js-cookie/v2.1.3/src/js.cookie.js’, function() {

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

});

});