Ajouter

Lorem ipsum

Lorem ipsum

A
A
A
CRO / Conversion

3 vues

4 min

Comment créer une exit intent popup dans Webflow ?

Apprenez à créer une exit intent popup dans Webflow : détection de la souris, mobile scroll et fréquence d'affichage.

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment afficher une popup exit intent dans Webflow : elle apparaît quand le visiteur est sur le point de quitter la page.

Exemple

Déplacez votre souris hors de la page vers le haut pour déclencher

En attente du signal de départ...
⚡ Offre limitée

Attendez avant de partir !

Téléchargez notre checklist gratuite : 20 points pour auditer votre site Webflow en 30 minutes.

DéclencheurDispositifCondition
Souris vers le hautDesktope.clientY <= 0
Scroll vers le haut rapideMobileDelta > 50px vers le haut
sessionStorageTousAffiché une seule fois par session

1. Créez la popup dans Webflow

Créez un Div avec l'ID exit-popup en position Fixed, couvrant toute la page (top/left/right/bottom: 0), background rgba(0,0,0,0.5), display flex, align-items et justify-content center. À l'intérieur, ajoutez votre modal avec votre offre. Mettez l'overlay en display: none par défaut. Ajoutez la classe exit-popup-close sur le bouton de fermeture.

2. Ajoutez le script dans Footer code

(function() {
var shown = sessionStorage.getItem('exit-shown');
if (shown) return;

var overlay = document.getElementById('exit-popup');
if (!overlay) return;

function show() {
if (sessionStorage.getItem('exit-shown')) return;
overlay.style.display = 'flex';
sessionStorage.setItem('exit-shown', '1');
}

function close() {
overlay.style.display = 'none';
}

// Desktop : souris qui quitte vers le haut
document.addEventListener('mouseleave', function(e) {
if (e.clientY <= 0) show();
});

// Mobile : scroll vers le haut rapide (intention de partir)
var lastScroll = window.scrollY;
window.addEventListener('scroll', function() {
var delta = lastScroll - window.scrollY;
if (delta > 50 && window.scrollY < 200) show();
lastScroll = window.scrollY;
});

// Fermeture
overlay.addEventListener('click', function(e) {
if (e.target === overlay) close();
});
document.querySelectorAll('.exit-popup-close').forEach(function(btn) {
btn.addEventListener('click', close);
});
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') close();
});
})();

3. Personnalisez le déclenchement

Pour déclencher uniquement après X secondes sur la page, ajoutez un délai minimum avant d'activer les listeners :

// Activer l'exit intent seulement après 30 secondes
var ready = false;
setTimeout(function() { ready = true; }, 30000);
document.addEventListener('mouseleave', function(e) {
if (ready && e.clientY <= 0) show();
});

bon à savoir

sessionStorage.setItem('exit-shown', '1') empêche la popup de s'afficher plusieurs fois dans la même session de navigation. Si vous voulez qu'elle réapparaisse à chaque visite (pas seulement à chaque session), remplacez sessionStorage par une simple variable : var shown = false. Pour une fréquence d'affichage intermédiaire, utilisez localStorage avec une date d'expiration.

Conclusion

L'exit intent est l'un des outils de récupération de leads les plus efficaces. Cas d'usage :

  • Offre de dernière chance sur une page pricing
  • Téléchargement d'un guide gratuit avant de partir
  • Inscription newsletter avec incentive

Déplacez votre souris vers le haut de la page pour déclencher la popup

👀En attente du signal de départ...

Attendez !

Avant de partir, téléchargez notre guide gratuit sur l'optimisation Webflow.

Télécharger le guideNon merci, je pars

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 dolor sit amet consectetur.

Lorem ipsum dolor sit amet consectetur. Aliquam orci sagittis dignissim sapien praesent donec.

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.

Publié le

Ces tutoriels pourraient vous intéresser

tutoriels similaires

SEO / GEO

5 min lecture

5 vues

Comment faire une redirection sur Webflow ? (2026) ?

Mis à jour le 19.12.2025 par Sandro DA SILVA

SEO / GEO

5 min lecture

5 vues

Ajouter des données structurées à votre site Webflow ?

Mis à jour le 21.08.2025 par Sandro DA SILVA

No-code

5 min lecture

5 vues

Comment obfusquer un lien dans Webflow ?

Mis à jour le 23.04.2025 par Sandro DA SILVA

Let’s f*****G GO !!

Prêt à faire décoller
votre activité  ?

Alexandre

Max

Enora

Bryan

Cannelle

Tiphaine

Vous allez :heart: notre collaboration...