Fonctionnel

Comment ajouter un formulaire exit pop up dans Webflow ?

outils :
Illustration croce

Sommaire

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 :

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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.
  7. 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.

Exit pop up développé pour La Solive

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

Photo de l'auteur
Sandro D.
Publié le
27/5/2024
Mis à jour le
27/5/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)
Ces tutoriels pourraient vous intéresser

Nos tutoriels de la même catégorie

Voir tous nos tutoriels
Illustration traits
Nous utilisons les meilleurs outils

développés avec les meilleurs outils et les meilleurs pratiques

Gemeos ne vous propose pas simplement un site web, mais une expertise sur les meilleurs outils pour vous garantir un retour sur investissement optimal. 

Figma

Pour le design de votre site web

Webflow

Pour l’intégration de votre site web

Client-first

Pour organiser vos projets

Wized

Pour ajouter des fonctionnalité à vos projets

Make

Pour l’automatisation de vos flux de travail