Je travaille actuellement sur l’amélioration de l’engagement des utilisateurs sur notre site web. Nous avons observé que beaucoup de visiteurs quittent notre site sans effectuer aucune action, comme remplir un formulaire ou effectuer un achat. Dans le but de réduire ce taux de rebond, je suis intéressé par l’implémentation d’un pop-up de confirmation qui s’afficherait lorsque l’utilisateur est sur le point de quitter le site. L’idée serait de leur proposer une dernière offre ou un rappel de ce qu’ils pourraient manquer. Quelqu’un a-t-il déjà mis en place une telle stratégie ? Quels résultats avez-vous observé et quelles sont les meilleures pratiques à suivre pour rendre cette tactique efficace ?
Gabriel29, voici un exemple simple d’un script HTML, CSS pour créer une exit popup avec un formulaire qui renvoie sur un webhook:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Newsletter Popup</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
background-color: #f5f5f5;
margin: 0;
padding: 0;
text-align: center;
}
#exit-popup {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40%;
max-width: 400px;
background-color: white;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 20px;
z-index: 100;
}
#exit-popup h2 {
color: #333;
font-size: 24px;
margin-bottom: 10px;
}
#exit-popup p {
color: #666;
font-size: 16px;
margin-bottom: 20px;
}
#exit-popup input[type=email] {
width: calc(100% - 24px);
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
}
#exit-popup button {
width: 100%;
padding: 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
#exit-popup button:hover {
background-color: #0056b3;
}
#close-popup {
cursor: pointer;
position: absolute;
top: 10px;
right: 20px;
font-size: 24px;
font-weight: bold;
}
</style>
</head>
<body>
<div id="exit-popup">
<div>
<span id="close-popup" style="cursor:pointer; position:absolute; top:10px; right:20px; font-size:24px; font-weight:bold;">×</span>
<h2>Ne partez pas encore !</h2>
<p>Inscrivez-vous à notre newsletter pour rester informé(e) de nos nouveautés et offres spéciales !</p>
<input type="email" id="email" placeholder="Votre email">
<button onclick="subscribeToNewsletter()">S'inscrire</button>
</div>
</div>
<script>
document.getElementById('close-popup').addEventListener('click', function() {
closePopup();
});
document.addEventListener("mouseleave", function(event) {
if(event.clientY <= 0 || event.clientX <= 0 || (event.clientX >= window.innerWidth || event.clientY >= window.innerHeight)) {
document.getElementById("exit-popup").style.display = "block";
}
});
function closePopup() {
document.getElementById("exit-popup").style.display = "none";
}
document.getElementById('email').addEventListener('keypress', function(event) {
if (event.key === "Enter") {
subscribeToNewsletter();
}
});
function subscribeToNewsletter() {
const email = document.getElementById('email').value;
if (email) { // Vérifie que l'email n'est pas vide
fetch('YOUR_WEBHOOK_URL', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
email: email
}),
})
.then(response => response.json())
.then(data => {
console.log('Success:', data);
closePopup(); // Ferme la popup après succès
})
.catch((error) => {
console.error('Error:', error);
});
}
}
document.querySelector('#exit-popup button').addEventListener('click', subscribeToNewsletter);
</script>
</body>
</html>
-
OptinMonster: C’est un populaire outil de génération de leads qui permet de créer des pop-ups de sortie efficaces. Il propose une gamme de modèles et une interface de glisser-déposer facile à utiliser. Prix: à partir de 9$/mois. https://www.optinmonster.com/
-
Sumo: C’est un ensemble d’outils de croissance du trafic qui comprend des pop-ups de sortie. Il propose également des outils d’e-mail marketing et de partage social. Prix: Gratuit avec des options premium à partir de 39$/mois. https://sumo.com/
-
WisePops: C’est un outil de pop-up qui offre des options de personnalisation avancées, y compris la possibilité de cibler les visiteurs en fonction de leur comportement ou de leur localisation. Prix: à partir de 49$/mois. https://wisepops.com/
-
Poptin: C’est un outil facile à utiliser qui permet de créer des pop-ups attrayantes pour recueillir des adresses e-mail et augmenter les conversions. Prix: Gratuit avec des options premium à partir de 19$/mois. https://www.poptin.com/
-
Unbounce: C’est un outil de création de pages de destination qui comprend également des fonctionnalités de pop-up et de bannière sticky. Prix: à partir de 80$/mois. https://unbounce.com/
-
Thrive Leads: C’est un plug-in WordPress qui permet de créer des pop-ups de sortie, des formulaires d’opt-in et d’autres types de formulaires pour recueillir des adresses e-mail. Prix: à partir de 67$ pour une licence à vie. https://thrivethemes.com/leads/
-
Ninja Popups: C’est un autre plug-in WordPress qui offre des fonctionnalités de pop-up de sortie. Il propose des modèles personnalisables et une intégration avec les principaux services d’e-mail marketing. Prix: 26$ pour une licence à vie. https://codecanyon.net/item/ninja-popups-for-wordpress/3476479
-
Hello Bar: C’est un outil de pop-up qui permet de créer des pop-ups de sortie, des bannières de tête, des barres de défilement et plus encore. Prix: Gratuit avec des options premium à partir de 29$/mois. https://www.hellobar.com/
-
OptiMonk: C’est un outil de pop-up de sortie qui permet de cibler les visiteurs en fonction de leur comportement sur le site. Prix: à partir de 29$/mois. https://www.optimonk.com/
-
Sleeknote: C’est un outil de génération de leads qui permet de créer des pop-ups personnalisées pour recueillir des adresses e-mail. Prix: à partir de 62$/mois. https://sleeknote.com/