Exit popup

001<script>
002// Exit Popup Script pour Webflow
003// À placer dans les Custom Code Settings de Webflow (avant </body>)
004
005(function() {
006    'use strict';
007    
008    // Configuration
009    const config = {
010        sensitivity: 20,        // Sensibilité de détection (pixels)
011        delay: 1000,           // Délai minimum avant déclenchement (ms)
012        cookieExpiry: 1,      // Durée du cookie en minutes
013        showOnMobile: false    // Afficher sur mobile
014    };
015    
016    let popupShown = false;
017    let mouseLeaveTimer = null;
018    let isMouseTracking = false;
019    let entryTime = Date.now();
020    
021    // Vérifier si l'utilisateur est sur mobile
022    function isMobile() {
023        return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || 
024               window.innerWidth <= 768;
025    }
026    
027    // Gestion des cookies
028    function setCookie(name, value, minutes) {
029        const expires = new Date();
030        expires.setTime(expires.getTime() + (minutes * 60 * 1000));
031        document.cookie = `${name}=${value};expires=${expires.toUTCString()};path=/`;
032    }
033    
034    function getCookie(name) {
035        const nameEQ = name + "=";
036        const ca = document.cookie.split(';');
037        for(let i = 0; i < ca.length; i++) {
038            let c = ca[i];
039            while (c.charAt(0) === ' ') c = c.substring(1, c.length);
040            if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
041        }
042        return null;
043    }
044    
045    // Afficher la popup
046    function showPopup() {
047        if (popupShown) return;
048        
049        const popup = document.querySelector('.popin_overlay');
050        if (!popup) {
051            console.warn('Exit Popup: Élément .popin_overlay introuvable');
052            return;
053        }
054        
055        popupShown = true;
056        popup.style.display = 'flex';
057        
058        // Animation d'apparition
059        setTimeout(() => {
060            popup.style.opacity = '1';
061        }, 10);
062        
063        // Définir le cookie pour éviter de re-afficher
064        setCookie('exitPopupShown', 'true', config.cookieExpiry);
065        
066        console.log('Exit Popup: Popup affichée');
067    }
068    
069    // Fermer la popup
070    function closePopup() {
071        const popup = document.querySelector('.popin_overlay');
072        if (!popup) return;
073        
074        popup.style.opacity = '0';
075        setTimeout(() => {
076            popup.style.display = 'none';
077        }, 300);
078        
079        console.log('Exit Popup: Popup fermée');
080    }
081    
082    // Détecter la sortie de souris
083    function handleMouseLeave(e) {
084        if (popupShown) return;
085        
086        // Vérifier si assez de temps s'est écoulé
087        if (Date.now() - entryTime < config.delay) return;
088        
089        const shouldTrigger = 
090            e.clientY <= config.sensitivity ||                    
091            e.clientX <= config.sensitivity ||                    
092            e.clientX >= (window.innerWidth - config.sensitivity);
093        
094        if (shouldTrigger) {
095            mouseLeaveTimer = setTimeout(() => {
096                showPopup();
097            }, 100);
098        }
099    }
100    
101    // Annuler le déclenchement si la souris revient rapidement
102    function handleMouseEnter() {
103        if (mouseLeaveTimer) {
104            clearTimeout(mouseLeaveTimer);
105            mouseLeaveTimer = null;
106        }
107    }
108    
109    // Initialiser le script
110    function init() {
111        if (isMobile() && !config.showOnMobile) {
112            console.log('Exit Popup: Désactivé sur mobile');
113            return;
114        }
115        
116        if (getCookie('exitPopupShown')) {
117            console.log('Exit Popup: Déjà affiché récemment');
118            return;
119        }
120        
121        const popup = document.querySelector('.popin_overlay');
122        if (!popup) {
123            console.warn('Exit Popup: Élément .popin_overlay introuvable');
124            return;
125        }
126        
127        popup.style.opacity = '0';
128        popup.style.display = 'none';
129        popup.style.transition = 'opacity 0.3s ease-in-out';
130        
131        document.addEventListener('mouseleave', handleMouseLeave);
132        document.addEventListener('mouseenter', handleMouseEnter);
133        
134        const closeElements = document.querySelectorAll('.popin_close-overlay, .popin_close-btn');
135        closeElements.forEach(element => {
136            element.addEventListener('click', closePopup);
137        });
138        
139        document.addEventListener('keydown', (e) => {
140            if (e.key === 'Escape' && popupShown) {
141                closePopup();
142            }
143        });
144        
145        popup.addEventListener('click', (e) => {
146            if (e.target === popup) {
147                closePopup();
148            }
149        });
150        
151        isMouseTracking = true;
152        console.log('Exit Popup: Initialisé avec succès');
153    }
154    
155    if (document.readyState === 'loading') {
156        document.addEventListener('DOMContentLoaded', init);
157    } else {
158        init();
159    }
160    
161    window.ExitPopup = {
162        show: showPopup,
163        close: closePopup,
164        reset: () => {
165            setCookie('exitPopupShown', '', -1);
166            popupShown = false;
167            console.log('Exit Popup: Reset effectué');
168        }
169    };
170    
171})();
172</script>