Show a popup based on a cookie — Free clonable template

I have implemented this on my site, but the popup keeps appearing. I don’t understand why this happens.

Beta: http://wejo-v2.webflow.io/new/home-new

Any advice?

Thanks

I have mine on a slight delay so that people can have a few seconds to look at the website before it pops up. I used the trick you suggested @vincent where you nest an inner overlay using an interaction on the popup-overlay. My only issue is that it sets the popup overlay to display block instantly and they can’t click any buttons until it pops up. Is there a way to set a delay on the display block change?

Here is my read only link:
https://preview.webflow.com/preview/fitwfaith?preview=fbf16f60a7f04677b6cbc972c03dc992

This is just awesome, @vincent!

Thank you for giving so much to this Community!!!

2 Likes

@vincet I think this is just what I have been looking for - I have designed at banner but I can’t figure how to make it stop showing. Do you think I can use this with my design? https://lululand.webflow.io/

Yes most probably. A popup or a banner, same principle.

@ColinKing I’ve got the same issue - did you manage the problem? Thanks for your help

@vincent Thank you for this.
I plugged in the code from your template site and changed the class to my wrapper but it still pops up every time I visit the shop. Am I missing a step?

https://preview.webflow.com/preview/airwall-by-zeppelin-llc?utm_medium=preview_link&utm_source=dashboard&utm_content=airwall-by-zeppelin-llc&preview=e30da76c361c5d913e29cc1be0ecbdf8&mode=preview

Hey @vincent
Thanks for your help with this cookie thing!
I have set up a popup that is working well on this site: https://myfirstplace.firstteam.com/
I made the site to be iframed into another site but the only thing is the popup keeps popping up while iframed. cookie works fine outside of iframe.

How do I fix this issue so the popup works in the iframe?

I read about adding this piece of code:
document.cookie = ‘cross-site-cookie2=noneCookie; SameSite=None; Secure=True’;

But I’m not sure I know how to add it because I am not familiar with jQuery or JS.
Any help is appreciated, please!
Popup is currently disable because the site is live and it’s annoying to our agents. Let me know and I can enable it for you

Share link: https://preview.webflow.com/preview/myfirstplace?utm_medium=preview_link&utm_source=designer&utm_content=myfirstplace&preview=66b3d401a5f72009deefe4c8bfc67d24&mode=preview

Problem Solved!
If anyone else is having the issue I had with the iframe, this will help solve it. If not, good luck!
Note: [.message-popup] is set to display none for this to work properly.

Hey Vincent, I used your tutorial and everything seems to work fine, except that it breaks the collaborator plugin.

Read only link: https://preview.webflow.com/preview/rehabthroughmotion?utm_medium=preview_link&utm_source=designer&utm_content=rehabthroughmotion&preview=74c4433b584af623138d4aca3e8e574b&workflow=preview

Hi I have added this to my site and it works fine, however the button does not close the pop up. Do you have any idea what might be happenoing?

Hi everyone, I did a similar project without jQuery, where the popup is shown:

  • When mouses leaves the screen
  • or after scrolling 50% of page height
  • or after 10 seconds

There is no code to add on the page or in the project settings, all the JS code is embedded in the popup Webflow element.

If it can help anyone: Pop-up with cookies (Cloneable) - Webflow

Hey @WebflowUser - I used your template and it works really well! Thank you!! Do you know how I can add an animation to this or an opacity transition to make it smoother (e.g. the pop-up eases in over 500ms and eases out when closed)?

Vincent… you’re seriously awesome!! :fist_right: :boom: :fist_left:

1 Like

Having trouble getting this to work after i cloned the page. I have cleared cookies and have tried using the incognito window and neither solution allows the popup to show. The only way i have been able to get it to show is by setting a show hide animation. Any help would be greatly appreciated.