Functional

How to control the display and closing of a banner using local browser storage in Webflow

outils :
Illustration croce

Table of contents

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>

5. All That's Left to Test

Photo de l'auteur
Sandro D.
Publié le
16/5/2024
Mis à jour le
16/5/2024
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.)
These tutorials might interest you

Our tutorials in the same category

See all our tutorials
Illustration traits
We use the best tools

Your site is developed using the best tools and best practices

Gemeos doesn't just offer you a website, but expertise in the best tools to guarantee you the best possible return on your investment.

Figma

To design your custom website and optimize its conversion rate

Webflow

For pixel-perfect, optimized integration of your website

Client-first

Organizing your project to perfection

Wized

To add advanced features to your project

Make

Automate your workflows and save maximum time