Comment ajouter un formulaire exit pop up dans Webflow ?
Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment ajouter un formulaire exit pop up dans Webflow.
| Cas d'usage | Objectif |
|---|---|
| Lead magnet | Capturer un email en échange d'une ressource |
| Réduction / offre | Convertir un visiteur hésitant |
| Feedback | Comprendre pourquoi le visiteur quitte |
| Contenu recommandé | Réduire le taux de rebond |
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
3. Publiez et testez le résultat
bon à savoir
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
