Comment ajouter un formulaire exit pop up dans Webflow ?

outils :

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment ajouter un formulaire exit pop up dans Webflow ?

Pourquoi ajouter un formulaire exit pop up à son site internet ?

Ajouter un formulaire exit pop-up à son site internet peut être bénéfique pour plusieurs raisons :

Réduire le taux de rebond : Un exit pop-up peut capter l'attention des visiteurs qui s'apprêtent à quitter le site, les encourageant à rester plus longtemps ou à explorer davantage.
Augmenter les conversions : En proposant une offre spéciale, une réduction ou une incitation, un exit pop-up peut convertir des visiteurs potentiels en clients.
Collecter des informations : Les formulaires d'emailing dans les exit pop-ups permettent de collecter des informations précieuses sur les visiteurs, comme leurs adresses email, pour des campagnes de marketing ultérieures.
Recueillir des feedbacks : Un exit pop-up peut inclure une enquête rapide pour comprendre pourquoi les visiteurs quittent le site, fournissant des insights pour améliorer l'expérience utilisateur.
Promouvoir des contenus spécifiques : Vous pouvez utiliser des exit pop-ups pour diriger les visiteurs vers des contenus spécifiques, des articles de blog, des livres blancs ou d'autres ressources qui pourraient les intéresser.
Augmenter l'engagement : En offrant des contenus pertinents ou des offres exclusives, un exit pop-up peut encourager les visiteurs à interagir davantage avec votre site.
Réduire l'abandon de panier : Pour les sites de commerce électronique, un exit pop-up peut rappeler aux utilisateurs les articles laissés dans leur panier et offrir des incitations pour compléter leur achat.

En résumé, un exit pop-up bien conçu peut améliorer l'expérience utilisateur, augmenter les conversions et fournir des données précieuses pour les stratégies de marketing.

‍

Comment ça marche ?

Qu'il s'agisse d'un pop up pour récupérer un feedback, pour proposer une offre spéciale ou encore un lead magnet, le processus est le même.

Le fonctionnement est le suivant, il suffit de développer votre pop up (modale) dans Webflow et d'ajouter un petit script JS pour dire de passer votre modale de display : hidden à display : flex lorsque le user sors sa souris de la fenêtre.

‍

1. Développez votre modale Webflow

La bonne pratique est d'avoir un overlay derrière pour optimiser l'UX (cf : screen). Attention, vous devez mettre votre modale en "display : hidden" par défaut.

‍

2. Ajoutez ce script dans <body> de votre page

<script>    
    document.addEventListener('mouseleave', function(event) {
    if (event.clientY <= 0) {
        document.querySelector('.modal-lead-gen-wrapper').style.display = 'flex';
    }
});
</script>

Important : Pensez à bien remplacer "modal-lead-gen-wrapper" dans le code ci-dessus par la classe de votre modale

‍

3. Publiez et testez le résultat

Sandro D.

Mis à jour le

8/10/2024

Growth Marketer, expert Webflow et touche à tout. Je m'occupe des opérations commerciale, veille au bon déroulement des projets et m’occupe des problématiques liées au marketing (SEO, Tracking, Copywriting, etc)