Here is how to add cookies to a custom modal

Community resources Webflow Tips
41

Update: Thought I had solved it but still coming back…

42

This was working great, however, it has stopped working. I made no changes to the class names. Anyone got any ideas? _ And then it came back - just seems it may have been an issue with MY browser.

43

@PixelGeek Very helpful, thanks! I am having problems adding multiple cookies/modals that will remain closed. Could you please explain how you would handle multiple cookies/modals? I have tried copy paste the code after each other and only changed the names etc but does not seem to work. Thanks

44

I also have the same issue with the “flash”. I don’t fully understand how to solve this. Are you able to elaborate?

45

Hi everyone,

The code worked fine and now it’s not working anyone, can someone help me with this one?

Thank you!

46

Hi everyone!

Don’t forget to add the script source for the cookie library. You can also change the cookie name and class names according to your own structure and requirements. Here’s the full code again:

<!-- Modal Cookie -->
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<script>
var yourCookieName = 'yourVistorsAction';

if(typeof Cookies.get(yourCookieName) !== 'undefined') {
$('.your-modal-parent-class').remove();
}

$('.your-modal-bg-class, .your-close-button-class').on('click', function(){
Cookies.set(yourCookieName, 'ok', { expires: 7 });
})
</script>
47

on the chrome developer console, I am getting

product-information:33 Uncaught ReferenceError: $ is not defined

48

You are probably droping the snippet of code before jQuery gets initialized.

Make sure to drop it in the “before body closing tag” section, not in the head or inside an EMBED.

If you do need to drop it inside an embed, make sure to use the following format:

<script>
window.Webflow = window.Webflow  || [];
window.Webflow.push(()=>{
    XXXXXXXXXXX-YOUR CODE HERE-XXXXXXXXXXX
})
</script>
49

I’m having an issue with getting it to work, too. My elements have combo class names; how do I work with that in the code?