I have an announcements banner on my site that is created as a component - so that we can change it and it changes on every page. I need help learning how to create an interaction so that when someone closes the banner on any page it closes everywhere, so that when they travel to the next page on our site the banner won’t appear. I’d love to put a time limit on the close, so it will reappear after 24 hours.
For managing banner states across different pages and implementing timed reappearance, you can use several approaches:
For cross-page state management, you can utilize localStorage to save the banner’s state. This can be done by adding custom code in your page settings. When the banner is closed, set a localStorage value with a timestamp. On subsequent page loads, check this value to determine if the banner should be shown.
For timed reappearance, combine the timestamp with a duration check. For example, to show the banner again after 24 hours:
// When closing the banner
localStorage.setItem('bannerLastClosed', Date.now());
// On page load
const lastClosed = localStorage.getItem('bannerLastClosed');
const showAfter = 24 * 60 * 60 * 1000; // 24 hours in milliseconds
if (!lastClosed || Date.now() - lastClosed > showAfter) {
// Show the banner
}
For basic show/hide animations, you can use Webflow’s built-in interactions panel. Create an initial state where the banner is hidden, then add a page load animation to show it.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
This is interesting, but I’m not quite sure how to apply this to the banner. Where would I add the code snippet - in the head of each page or does this somehow go on the banner itself?
You can either add it as a code embed element inside the component so that it loads on every page that has the banner. Or add it in the global head code in you site settings.
@memetican I thought this was working for me, but the days function doesn’t seem to be working, because I set it to 1 (for 1 day) but it doesn’t come back. Refreshing doesn’t fix it. I reset the whole thing to a partial day to see if that was the issue, but no luck. Do you have any ideas as to why it would still be dismissed after the time period specified?
I had set it to “1” previously to be a single day, but that was giving me the same issue. I can reset it and clear my cache - that should allow me to test again, right?
You can just delete that cookie in your browser. In chrome that’s launch devtools, go to the Application tab, then left side you’ll see cookies.
I’ll look into this today. This piece was just split out from our larger modals library because some clients needed the suppression without the modal support. It’s possible that something might have changed during the code separation.
Incidentally, why did you use 0.08, were you trying to approximate a 2 hour suppression? If you can explain how you’re using that I might be able to add support for it.
Yes I was attempting a 2 hour suppression - because the shorter time would be good for testing as well as some possible reminder modals my team might want in the future.
