How to control the display and closing of a banner using local browser storage in Webflow
Tools:
Introduction
Controlling the display and closing of an advertising banner using the browser's local storage improves the user experience. This technique makes it possible to avoid redisplaying the banner every time you visit, improving the user experience by reducing interruptions and distractions.
Here's how to do it:
1. Add the “banner” ID to your banner
2. Add the “close-btn” class to your element to close your banner
3. Hide your default banner
Your banner should be in Display: None position by default
This helps to avoid strange behavior that shows the default banner and then hides it once the page is loaded.
4. Add this code in the <body>of your page
<script>
// Vérifier si la bannière doit être fermée lors du chargement de la page
document.addEventListener('DOMContentLoaded', function() {
if (localStorage.getItem('bannerClosed') !== 'true') {
document.getElementById('banner').style.display = 'flex';
}
});
// Ajouter un gestionnaire d'événements pour fermer la bannière
document.querySelector('.close-btn').addEventListener('click', function() {
document.getElementById('banner').style.display = 'none';
localStorage.setItem('bannerClosed', 'true');
});
</script>
Growth Marketer, Webflow expert and a jack of all trades. I take care of commercial operations, ensure the smooth running of projects and take care of issues related to marketing (SEO, Tracking, Copywriting, etc.)
