CRO / Conversion

4 min

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

Chargement...

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';
}

bon à savoir

localStorage est persistant entre les sessions mais lié au navigateur et à l'appareil. Un visiteur qui revient sur mobile après avoir visité sur desktop comptera comme une première visite. Pour un tracking cross-device fiable, il faut un système d'authentification ou un cookie côté serveur. Pour la majorité des cas d'usage UX, localStorage est suffisant.

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...

Comment afficher un message pour les visiteurs récurrents dans Webflow ?

Exemple

1. Créez les éléments dans Webflow

2. Ajoutez le script dans Footer code

3. Personnalisation avancée selon le nombre de visites

Conclusion

Heading

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum

tutoriels similaires