How to implement exit-intent pop-ups for lead capture



Image not found!!

Exit-intent pop-ups are a type of pop-up that appears when a user is about to leave a website. These pop-ups are triggered by the user's mouse movement, typically when it moves towards the top of the browser window, suggesting an intention to leave the page. Implementing exit-intent pop-ups for lead capture involves using a combination of JavaScript and HTML. Here's a simple example using JavaScript:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Website</title>
    <!-- Include your stylesheets and other scripts here -->
    <style>
        /* Add your CSS styles for the popup */
        #exitPopup {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 20px;
            background-color: #fff;
            border: 1px solid #ccc;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            z-index: 9999;
        }
    </style>
</head>
<body>
    <!-- Your website content goes here -->

    <!-- Exit-intent popup -->
    <div id="exitPopup">
        <p>Don't leave just yet! Subscribe to our newsletter for exclusive updates.</p>
        <!-- Add your lead capture form here -->
        <form>
            <!-- Your form fields go here -->
            <input type="email" name="email" placeholder="Enter your email">
            <button type="submit">Subscribe</button>
        </form>
    </div>

    <!-- Include jQuery (you can download and host it locally) -->
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

    <script>
        // Exit-intent popup script
        var exitPopupShown = false;

        $(document).mouseleave(function(e) {
            if (!exitPopupShown && e.clientY < 10) {
                // Show the exit-intent popup
                $('#exitPopup').fadeIn();
                exitPopupShown = true;
            }
        });

        // Close the popup when the user interacts with it
        $('#exitPopup').on('click', function() {
            $(this).fadeOut();
        });
    </script>
</body>

</html>In this example:
  • The exit-intent popup is hidden by default (display: none; in the CSS).
  • The $(document).mouseleave function is used to detect when the user is about to leave the page.
  • If the mouse leaves the document and its Y coordinate is less than 10 pixels (indicating it's near the top), the exit-intent popup is displayed using $('#exitPopup').fadeIn().
  • The popup includes a simple form for lead capture.
  • The popup is closed if the user clicks on it.

Note: This example uses jQuery for simplicity, but you can achieve the same functionality using plain JavaScript or other libraries if you prefer. Also, ensure that your use of pop-ups complies with relevant privacy and anti-spam regulations.



Category List