CRO / Conversion4 min lecture
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


