Here is how to add cookies to a custom modal

Worked a treat : )

https://preview.webflow.com/preview/hopeyard?utm_medium=preview_link&utm_source=designer&utm_content=hopeyard&preview=34cdba4c345602a29b78d62d185002ee&mode=preview

1 Like

live site - hopeyard.webflow.io

1 Like

Can someone please help me as well?

I have tried doing it and I am failing somewhere ā€¦ probably the class names. Would you mind taking a look in my project:

https://preview.webflow.com/preview/newbaseline?utm_medium=preview_link&utm_source=designer&utm_content=newbaseline&preview=ff98f440853dfa7245da97d426477d31&pageId=5e763a90d25345df4594d593&mode=preview

The page with the modal (and the cookies) is called Blog. Thank you so much!

Things seem to be running fine on my end @micav. What else do you want to happen?

Thank you! Funny enough I just realised that itā€™s working ā€¦ which wasnā€™t the case 4. days ago when I was first messaged in :slight_smile:
Thank you! and so happy :slight_smile:

1 Like

Hi there,
I followed the instructions here and made my classes lowercase, but I still canā€™t seem to get it to workā€¦ can someone see what Iā€™m doing wrong? My site address is https://kac.webflow.io/ (the modal pops right up on the homepage.)

My read-only link is: https://preview.webflow.com/preview/kac?utm_medium=preview_link&utm_source=dashboard&utm_content=kac&preview=9c2a6abd76b6307ee23df8bfdf20c60f&mode=preview

Does anyone have any advice on this? Thanks!!

You need to import the script for the Cookies library. Add this above the script tag you have for the script
<script src="https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js"></script>

3 Likes

YES!!! THANK YOU! The help is much appreciated. That worked.

1 Like

Hi guys, I am the same problem. Impossible to succeed in making my modal disappear with cookie.

I would like to remove the Modal wrapper in the ā€œCategorias Templateā€ (ecommerce pages)

There is of the project : https://preview.webflow.com/preview/lagranja?utm_medium=preview_link&utm_source=dashboard&utm_content=lagranja&preview=822579bbd855ab5a3ee2fead7d9de78e&mode=preview

Thanks for your help !

Switch the code you have in your page settings with the following one:

var cookieName = 'modalClosed';

if (!Cookies.get(cookieName)) {
  $('.modal').remove();
}

$('.link-block-7').click(()=>{
  Cookies.set(cookieName, 'ok', { expires: 7 });
})

1 Like

Thanks for your help its working perfectly @Jeandcc :grin: :grin: :grin:

Cookies are so passƩ. Local storage is much easier to work with as a developer.

1 Like

Precisely @webdev. I guess cookies are just a bit more famous (not for a good motive unfortunately), and new people tend to think that they are the only way to store data in the clientā€™s browser

What a fantastic tutorial, it was exactly what I was looking for. I got everything to work except for one peculiar issue. I created the custom modal for cookie compliance, added added the cookie script, but my site loses itā€™s CSS for just the modal portion only when viewed in the latest version of Chrome. The CSS is fine in incognito mode, and itā€™s fine in safari, edge, firefox, and phones. Iā€™ve deactivated all my extensions/ad blockers in (regular) Chrome and turned off everything I could think of to no avail. The modal works in the webflow subdomain as well as other peopleā€™s version of Chrome. Can anyone tell me what I may have missed? Thanks, read only link below:

Modal CSS not applied in normal Chrome

So far, I havenā€™t been able to replicate this issue on any browser aside from the one Iā€™m working on right now,

css

Hi I have followed the cookie method and its all working (after changing my class names in the script to be all lower case). The problem Iā€™m experiencing is a ā€œflashā€ of the modal appearing for a split second before disappearing on site load. Does anyone else have this issue? The live site shows a good example of this: https://www.servicedesign.com.hk/

My site read link below:

https://preview.webflow.com/preview/sdhk?utm_medium=preview_link&utm_source=designer&utm_content=sdhk&preview=a9385a2cd8c01325bd51f84453170bd2&mode=preview

@Noah_Scott- You can set you modal to display none in CSS then check for the cookie and change your logic to set the display to show under your conditions. Using remove is causing the issue.

Hi, As this thread looks like itā€™s all about cookies, I have a question. I have two cookies running (one for privacy policy etc. and a second for another consent specific to my page) but seem that the two scripts get into a fight with each other and only one stays aliveā€¦ the other one doesnā€™t work anymore.

The first cookie that is specific to my page used to work without any problem with the scripts above but the second one put it down. Any info/way to get around it?

just in case if anyone has the same issue, I solved it by changing the expiry figure and it works fine nowā€¦ but still the same flash as mentioned in previous comment by @Noah_Scott