Show a Website Pop-up Only Once with Cookies
HTML-код
- Опубликовано: 3 авг 2024
- Learn how to add a website pop-up modal that is only shown to a user once, not every time they refresh the page or change the page. I've made a Webflow clone able for this to make the process even easier: webflow.com/website/Simple-Po...
📐Template used
Etro: www.nikolaibain.com/template/...
All templates: www.nikolaibain.com/templates
🔗 Links
Pop-up Cloneable: webflow.com/website/Simple-Po...
Custom code to use: www.nikolaibain.com/code-snip...
👋🏻 Where to find me
Website: nikolaibain.com
Instagram: / nikolai_bain
Dribbble: dribbble.com/nikolaibain
Worked like a charm! I followed the updated instructions in the cloneable and copied the interactions after pasting it into my project. Thank you for this!
Lol, spent about 2 hours trying to create this from scratch, then found this video. If I owned a bonsai tree, it would have died from lack of care long ago. Thank you sir.
Love the background blur on the windows. Nice touch.
Super helpful video! Thank you so much for the custom code. I created a pop-up, and then realized it showed up on every page every time someone clicked on the next page. This fixed that problem!
Glad to hear I could help! 🤩
Short and sweet! Thanks
This is cool!
Saved me a whole lot of time.
Knowledge bombs. Love it!
💣
There is an issue where the class called Pop-up Wrapper and it does not match the javascript to change the display from none to flex. To fix change the class name from Pop-up Wrapper to popup-overlay
You will need to accomplish this in the "Interactions" as this feature is typically a CSS property. I created a new "Page Load" interaction. Start an animation (name popup ease in) Apply the class provided with the popup. New action / choose "Opacity" NOT Hide show, Set initial state "0." Add another new action / Opacity / Delay 3 sec (or match your delay in provided javascript) / Duration 1 sec / Opacity 100%. Adjust setting as needed. Works great!
Hello Nikolai, awesome video and the code is great! Is there a way to keep showing the banner if the user clicks to go to other pages? The load time and show once is perfect, I only need that tweak :) Thanks a lot!
thanks!
Great video Nikolai, thank you - btw, what mouse and keyboard do you use? , they both sound amazing
Haha, sorry if they were a bit loud 😅 Just some cheap ones, I've wanting to get the new Apple Magic Keyboard, but they don't do it in Space Grey. Sad days 😓
I've added an opacity ease out animation but is there a way to ease in so the pop-up isn't abrupt?
10/10
Hi Nikolai! This was SUPER helpful. Great video. I don't suppose you could do a video, or explain, or if you have a video that explains - how to make a cookie pop-up that would disable this cookie function and all other cookies if the user desired?
Glad to hear! If you want to do this, best you use the Finsweet Cookies tool, it's super helpful :)
@@NikolaiBain Legend - thank you so much, looks like exactly what I need.
Thanks for this! What if I wanted to see the popup every time a user visits the website. Example, if they closed the tab and reopened, I'd want it to show. Is there a simple change to the code to make that happen?
Great Job! I also want to know how to modify the cookie expire value to 24 hours. The value in the code is '1'
Same here
Thanks a lot for this. My only question is how to add animation to the pop-up to help with easing when it loads in. Help!
Hey ISZY-IZZY - did you figure this out? I'm also looking for the same. Thanks!
what if you need the pop up to only pop up for people that have subscribed and continue to pop up otherwise?
@nikolai bain, What if I want to add the pop-up to select pages of my website and not the entire site? Would adding the code to the page settings make it work? For example, I want to add a pop-up only to blog pages. Should it still work? I tried doing it and it's not working.
better to add the code to the project settings, but only add the pop up symbol to the pages that you want the pop ups on :) Let me know if this works!
Thank you! Any idea why the popup might not be closing when I click the x or anywhere on the screen? It works perfectly other than that
Hey Josiah, the pop-up actually doesn't carry over interactions when you copy over symbols, so that might be why, but just re-check the interactions if they are there and see what elements they are triggering :)
Hi Nikolai, the popup will run twice when used with the fnsweet cookie opt in banner. After you accept all cookies, the popup loads, then if you refresh, the popup still loads again. If you refresh one more time, the cookie works and keeps the popup from loading in a third time. I have been unsuccessful debugging this.
Any idea how to solve this?
It was working before until recently it suddenly have same issues you have encountered. Let me know if you have any updates solving this.
I don't know why, but my pop up appears every single time i click on "Home" and i just wanted it to appear once :(((
I cannot get this pop-up to load. Any suggestions?
Hi Nikolaibain, I've cloned this at my site, but I can't make it to be displayed only once. Every single time you browse to any different page, it appears again and again, also it does not repect the timing to be appeared at the first time you get in into the web. I check the code, check the same name class, but nothing, it ramain the same. Some clue what could be happing? thanks in advance!
Hey Carlos! Just tested it again and it's working fine so here's what to check: The custom code is pasted in the section of the project settings, and you're pasting it in the project settings and not just the page settings. Also, delete any transitions if you've applied one to the pop-up, you won't need to add a fade-in animation.
Best to delete the pop up from your website, delete the classes used, and just re-add it again following the steps :) Let me know if it works this time!
@@NikolaiBain Yeah it's working now! thanks a lot mate for your great stuff! Regards
@@carlosr.194 Great to hear!!
@@NikolaiBain Hello! I really am having the same problem. I cleaned up the classes and deleted the pop up. I re did all the steps twice and each time I did not even edit the form or any text. I went to my project settings and placed the code into the footer section under "footer code". Saved changed and published. It did not respect the timing for the pop up. What would you suggest that I do next?
@@ddappliances6570 I have the same issue. Have you find a solution yet?
is there an update because its not working
There is actually! I'm working on a new video for this but you can find the new code + instructions here: www.nikolaibain.com/convert
@@NikolaiBain Is there any update recently it's not working on my side. I also email you via your website.
@@emilbustos3594 make sure you use the custom code from the link here in the youtube description. the code in the tutorial in webflow is incorrect for some reason.
@@JPC4 yt description code still doesn't work. what to do?
@@monkeydgen do you have any other custom code? it may interfere. I also change my pop up wrapper to be named "pop-up-wrapper" and then changed the custom code to that as well. custom code says "popup-overlay" but should also be called "pop-up-wrapper" or whatever you decide to call your pop up wrapper.
Hi guys!
Use this code if tutorial one does not work.
Make sure your Pop-Up Wrapper is displayed block.
var Webflow = Webflow || [];
Webflow.push(function() {
// Load cookie library
$.getScript('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)
$('#pop-up-wrapper').remove();
}
// On button click
$('#pop-up-wrapper').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 * 60 * 24 * 60);
// Set this cookie
Cookies.set('notice', 'shown', { expires: expireTime });
});
});
});
Tried this. It's working! Thanks a lot
Hello, I DM'd you on Insta, but I was wondering if there is a way to make that cookie expire? Woudl I replace the expire: 1 w/ say 86400e3 for a day, is it in milliseconds by default?
Wow, just realised 1 cannot possibly stand for milliseconds. 1 = true? If so, how do I set an expiry for the cookie, so that after X days the cookie will be forgotten?
@@JoyChien-tm2bn did you find a solution?