How to create an exit intent popup

Exit intent popup

An exit-intent popup is a type of popup that appears when a user is about to leave your website or page. It is a great way to capture the attention of your website visitors and keep them engaged. Here are the steps to create an exit-intent popup:

How to create it without any plugin?

Creating an exit-intent popup without a plugin can be done using HTML, CSS, and JavaScript. Here are the steps to create one:

1. Create the HTML markup: Start by creating the HTML markup for your popup. This will typically include a container div with a class name, a close button, and the content you want to display in your popup.

<div class="exit-intent-popup">
<div class="popup-content">
<h2>Don't leave yet!</h2>
<p>Enter your email to get our latest updates and special offers.</p>
<form>
<input type="email" name="email" placeholder="Enter your email">
<button type="submit">Subscribe</button>
</form>
</div>
<button class="close-button">&times;</button>
</div>


2. Style the popup with CSS: Use CSS to style your popup container and the content inside it. You can use properties such as width, height, background color, font size, and padding to customize the look of your popup.

.exit-intent-popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
background-color: #fff;
padding: 20px;
width: 400px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

.popup-content {
text-align: center;
padding-bottom: 20px;
}

.close-button {
position: absolute;
top: 10px;
right: 10px;
font-size: 30px;
cursor: pointer;
}

3. Add the JavaScript code: To create the exit-intent behavior, you need to add JavaScript code that detects when the user is about to leave the page. You can do this by listening to the mouseleave event on the document object and checking the mouse position against the viewport.

document.addEventListener("mouseleave", function(event) {
if (event.clientY <= 0) {
// show the popup
document.querySelector(".exit-intent-popup").style.display = "block";
}
});

document.querySelector(".close-button").addEventListener("click", function() {
// hide the popup when the close button is clicked
document.querySelector(".exit-intent-popup").style.display = "none";
});

This code listens for the mouseleave event on the document object and checks whether the mouse is above the top of the viewport. If it is, it shows the popup by setting its display property to “block”. The close button also has a click event listener that hides the popup when clicked.

4. Add the code to your website: Finally, copy the HTML, CSS, and JavaScript code and paste it into the relevant files on your website. You can also customize the code further to match your website’s design and content.

With these steps, you can create an exit-intent popup without using a plugin. However, keep in mind that plugins can offer additional features and customization options, so consider using one if you need more advanced functionality.