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
| Déclencheur | Dispositif | Condition |
|---|---|---|
| Souris vers le haut | Desktop | e.clientY <= 0 |
| Scroll vers le haut rapide | Mobile | Delta > 50px vers le haut |
| sessionStorage | Tous | Affiché 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();
});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
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.















