Créer une exit popup

<script>
// Exit Popup Script pour Webflow
// À placer dans les Custom Code Settings de Webflow (avant </body>)

(function() {
    'use strict';
    
    // Configuration
    const config = {
        sensitivity: 20,        // Sensibilité de détection (pixels)
        delay: 1000,           // Délai minimum avant déclenchement (ms)
        cookieExpiry: 1,      // Durée du cookie en minutes
        showOnMobile: false    // Afficher sur mobile
    };
    
    let popupShown = false;
    let mouseLeaveTimer = null;
    let isMouseTracking = false;
    let entryTime = Date.now();
    
    // Vérifier si l'utilisateur est sur mobile
    function isMobile() {
        return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || 
               window.innerWidth <= 768;
    }
    
    // Gestion des cookies
    function setCookie(name, value, minutes) {
        const expires = new Date();
        expires.setTime(expires.getTime() + (minutes * 60 * 1000));
        document.cookie = `${name}=${value};expires=${expires.toUTCString()};path=/`;
    }
    
    function getCookie(name) {
        const nameEQ = name + "=";
        const ca = document.cookie.split(';');
        for(let i = 0; i < ca.length; i++) {
            let c = ca[i];
            while (c.charAt(0) === ' ') c = c.substring(1, c.length);
            if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
        }
        return null;
    }
    
    // Afficher la popup
    function showPopup() {
        if (popupShown) return;
        
        const popup = document.querySelector('.popin_overlay');
        if (!popup) {
            console.warn('Exit Popup: Élément .popin_overlay introuvable');
            return;
        }
        
        popupShown = true;
        popup.style.display = 'flex';
        
        // Animation d'apparition
        setTimeout(() => {
            popup.style.opacity = '1';
        }, 10);
        
        // Définir le cookie pour éviter de re-afficher
        setCookie('exitPopupShown', 'true', config.cookieExpiry);
        
        console.log('Exit Popup: Popup affichée');
    }
    
    // Fermer la popup
    function closePopup() {
        const popup = document.querySelector('.popin_overlay');
        if (!popup) return;
        
        popup.style.opacity = '0';
        setTimeout(() => {
            popup.style.display = 'none';
        }, 300);
        
        console.log('Exit Popup: Popup fermée');
    }
    
    // Détecter la sortie de souris
    function handleMouseLeave(e) {
        if (popupShown) return;
        
        // Vérifier si assez de temps s'est écoulé
        if (Date.now() - entryTime < config.delay) return;
        
        const shouldTrigger = 
            e.clientY <= config.sensitivity ||                    
            e.clientX <= config.sensitivity ||                    
            e.clientX >= (window.innerWidth - config.sensitivity);
        
        if (shouldTrigger) {
            mouseLeaveTimer = setTimeout(() => {
                showPopup();
            }, 100);
        }
    }
    
    // Annuler le déclenchement si la souris revient rapidement
    function handleMouseEnter() {
        if (mouseLeaveTimer) {
            clearTimeout(mouseLeaveTimer);
            mouseLeaveTimer = null;
        }
    }
    
    // Initialiser le script
    function init() {
        if (isMobile() && !config.showOnMobile) {
            console.log('Exit Popup: Désactivé sur mobile');
            return;
        }
        
        if (getCookie('exitPopupShown')) {
            console.log('Exit Popup: Déjà affiché récemment');
            return;
        }
        
        const popup = document.querySelector('.popin_overlay');
        if (!popup) {
            console.warn('Exit Popup: Élément .popin_overlay introuvable');
            return;
        }
        
        popup.style.opacity = '0';
        popup.style.display = 'none';
        popup.style.transition = 'opacity 0.3s ease-in-out';
        
        document.addEventListener('mouseleave', handleMouseLeave);
        document.addEventListener('mouseenter', handleMouseEnter);
        
        const closeElements = document.querySelectorAll('.popin_close-overlay, .popin_close-btn');
        closeElements.forEach(element => {
            element.addEventListener('click', closePopup);
        });
        
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape' && popupShown) {
                closePopup();
            }
        });
        
        popup.addEventListener('click', (e) => {
            if (e.target === popup) {
                closePopup();
            }
        });
        
        isMouseTracking = true;
        console.log('Exit Popup: Initialisé avec succès');
    }
    
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }
    
    window.ExitPopup = {
        show: showPopup,
        close: closePopup,
        reset: () => {
            setCookie('exitPopupShown', '', -1);
            popupShown = false;
            console.log('Exit Popup: Reset effectué');
        }
    };
    
})();
</script>