Fonctionnel

Comment contrôler l'affichage et la fermeture d'une bannière en utilisant le stockage local du navigateur dans Webflow

outils :
Illustration croce

Sommaire

Introduction

Contrôler l'affichage et la fermeture d'une bannière publicitaire en utilisant le stockage local du navigateur permet d'améliorer l'expérience utilisateur. Cette technique permet d'éviter de réafficher la bannière à chaque visite, améliorant ainsi l'expérience de l'utilisateur en réduisant les interruptions et les distractions.

Voici comment faire :

1. Ajoutez l'ID "banner" à votre bannière

2. Ajoutez la classe "close-btn" à votre élément permettant de fermer votre bannière

3. Cachez votre bannière par défaut

Votre bannière doit être en position Display : None par défaut

Cela permet d'éviter un comportement étrange qui affiche la bannière par défaut et la cache ensuite une fois la page chargée

4. Ajoutez ce code dans le <body> de votre 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. Plus qu'à tester

Ces tutoriels pourraient vous intéresser

Nos tutoriels de la même catégorie

Ajouter un sommaire dans Webflow

Webflow
Finsweet
Fonctionnel

Personnaliser le design des sliders dots dans Webflow

Webflow
Embed
Fonctionnel

Automatiser l’envoi d’un mail aux prospects qui remplissent un formulaire

Webflow
Zapier
Fonctionnel
Voir tous nos tutoriels
Illustration traits
Nous utilisons les meilleurs outils

Votre site est développé avec les meilleurs outils et les meilleurs pratiques

Gemeos ne vous propose pas simplement un site web, mais une expertise sur les meilleurs outils pour vous garantir un retour sur investissement optimal. 

Figma

Pour designer votre site web sur mesure et optimiser son taux de conversion

Webflow

Pour une intégration pixel perfect et optimisée de votre site web

Client-first

Pour une organisation aux petits oignons de votre projet

Wized

Pour ajouter des fonctionnalités avancées à votre projet

Make

Pour automatiser vos fluxs de travail et vous faire gagner un max de temps