Comment afficher un message pour les visiteurs récurrents dans Webflow ?
Apprenez à afficher un message personnalisé pour les visiteurs récurrents dans Webflow avec localStorage.
Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment afficher un message de bienvenue personnalisé pour les visiteurs récurrents sur votre site Webflow avec localStorage.
Exemple
| Variable localStorage | Valeur | Usage |
|---|---|---|
| visit-count | Nombre de visites | Distinguer 1ère visite / récurrent |
| last-visit | Date ISO | Calculer le temps depuis la dernière visite |
| Banner | ID returning-banner | Notification de bienvenue retour |
1. Créez les éléments dans Webflow
Créez un Div avec l'ID returning-banner en position Fixed, bottom ou top de page, en display: none par défaut. Ajoutez des Divs first-visit-msg et returning-msg pour les messages conditionnels. Ajoutez un Text Block visit-count-display pour afficher le nombre de visites.
2. Ajoutez le script dans Footer code
(function() {
var visits = parseInt(localStorage.getItem('visit-count') || '0') + 1;
localStorage.setItem('visit-count', visits);
localStorage.setItem('last-visit', new Date().toISOString());
var banner = document.getElementById('returning-banner');
var firstMsg = document.getElementById('first-visit-msg');
var returningMsg = document.getElementById('returning-msg');
var visitCountEl = document.getElementById('visit-count-display');
if (visitCountEl) visitCountEl.textContent = visits;
if (visits === 1) {
// Première visite
if (firstMsg) firstMsg.style.display = 'block';
if (returningMsg) returningMsg.style.display = 'none';
} else {
// Visiteur récurrent
if (returningMsg) returningMsg.style.display = 'block';
if (firstMsg) firstMsg.style.display = 'none';
if (banner) {
banner.style.display = 'flex';
// Masquer après 5 secondes
setTimeout(function() {
banner.style.opacity = '0';
banner.style.transition = 'opacity 0.5s';
setTimeout(function() { banner.style.display = 'none'; }, 500);
}, 5000);
}
}
})();3. Personnalisation avancée selon le nombre de visites
var visits = parseInt(localStorage.getItem('visit-count') || '0');
if (visits >= 3) {
// Visiteur très engagé : afficher une offre
document.getElementById('engaged-offer')?.style.display = 'block';
} else if (visits === 2) {
// Deuxième visite : afficher un témoignage
document.getElementById('social-proof')?.style.display = 'block';
}Conclusion
Reconnaître les visiteurs récurrents crée un sentiment de connexion et améliore la conversion. Cas d'usage :
- Message de bienvenue retour personnalisé
- Offre spéciale débloquée à la 3ème visite
- CTA différent pour les prospects chauds (2+ visites)
👋 Vous êtes de retour ! Visite n°?×
Première visite 👋
Bienvenue ! Découvrez comment Gemeos peut vous aider.
Vous revenez ! 🎉
C'est votre visite n°?. Prêt à passer à l'étape suivante ?
Chargement...
bon à savoir
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
