Exit-Intent with JavaScript: A Starter Guide for Developers

Learn how to create an effective exit intent popup with JavaScript or use popup builders to save time and effort.
the cover of exit-intent JavaScript with a running figure exiting and the icon of JS on a blue background

Are you looking to capture the attention of website visitors and drive conversions? One effective tool you can use is an exit-intent popup.

It means you want to provide a last chance for your visitors to engage them and drive them towards a desired action.

a child putting a piece on colorful toys to build a tower from toys

In this article, we'll walk you through the process of creating an exit-intent popup with JavaScript easily.

We hope it helps, but if you think exit-intent popups are difficult to create, we present the alternatives on PopupBuilder.io and even choose one of them for this article.

Let's start if you're ready!

What is an Exit-Intent Popup?

An exit-intent, also known as an exit-intent popup, is a user behavior-based prompt.

It appears when a website visitor appears to be leaving the site, as indicated by their cursor movement toward the exit button.

some JavaScript codes on the screen

The purpose of an exit-intent popup is to provide a final opportunity to engage the visitor and direct them toward a desired action, such as signing up for a newsletter or making a purchase.

The implementation of an exit-intent popup involves writing custom JavaScript code to monitor user behavior and trigger the popup when the conditions are met.

Creating an Exit-Intent Popup with JavaScript

Exit-intent popups can be created with JavaScript by writing custom code that monitors user behavior and triggers the popup when certain conditions are met.

a hand holding a compass with a breaking dawn background

Here's a step-by-step guide to getting you started:

  1. Define the trigger: Start by determining the conditions that will trigger your exit-intent popup. This is typically done by monitoring the movement of the user's cursor and triggering the popup when it moves toward the exit button.
  2. Write the code: Next, write the JavaScript code that will implement the trigger and display the popup. Depending on your preference, this code should be added to your website's header or footer.
  3. Style the popup: Once the code is in place, style the popup to match your website's design. This can be done by applying custom CSS to the popup's HTML elements.
  4. Test and optimize: Finally, test your exit-intent popup to ensure it's functioning as intended and make any necessary optimizations. Repeat this process until you're satisfied with the performance of your popup.

Different Exit-Intent JavaScript Examples

window.addEventListener("beforeunload", function (e) {
  var confirmationMessage = "Are you sure you want to leave?";

  e.returnValue = confirmationMessage;     // Gecko, Trident, Chrome 34+
  return confirmationMessage;              // Gecko, WebKit, Chrome <34

This code listens for the beforeunload event, which is triggered when the user tries to leave the page (e.g., by clicking a link, refreshing the page, closing the tab, etc.).

When the event is triggered, a confirmation message is displayed to the user, asking them if they really want to leave the page.

The message is returned as the event's returnValue property for older browsers and as the function's return value for newer browsers.

const body = document.querySelector('body');
let mouseY;

body.addEventListener('mouseleave', (event) => {
  mouseY = event.clientY;
  if (mouseY < 0) {
    console.log('Exit Intent');
    // add additional code for exit intent here

This code listens for a mouseleave event on the body element, which is triggered when the mouse pointer moves out of the window.

It then captures the y-coordinate of the mouse and checks if it's less than 0, which indicates that the mouse has exited the window from the top.

If this condition is met, it logs "Exit Intent" to the console, and any additional code for exit intent could be added to this block.

const body = document.querySelector('body');
let mouseY;

const handleMouseleave = (event) => {
  mouseY = event.clientY;
  if (mouseY < 0) {
    console.log('Exit Intent');
    // add additional code for exit intent here

body.addEventListener('mouseleave', handleMouseleave);

This code works in a similar manner to the previous example, but it uses a named function handleMouseleave to handle the mouseleave event rather than an anonymous function.

The Advantages of Exit-Intent JavaScript

Exit-Intent JavaScript has many advantages, but most of the well-known advantages are as follows:

Increased Engagement: Exit-intent popups capture user attention and provide a final chance to engage them, increasing the chances of converting them into customers.
Customizable: Exit-intent popups can be customized to match the design and branding of your website, making them more visually appealing and effective.
Versatile: Exit-intent popups can be used to achieve a variety of goals, including increasing conversions, generating leads, and building brand awareness.
Easy to Implement: With JavaScript, creating an exit-intent popup is relatively easy and can be done without much coding knowledge.
a child looking at the stairs at noon

The Disadvantages of Exit-Intent Javascript

We have always touched upon exit-intent's advantages and positive sides, but you must be careful when using it.

Here are some disadvantages of exit-intent JavaScript:

User Experience: If not done correctly, exit-intent popups can be disruptive and negatively affect the user experience.
Technical Knowledge: Creating an exit-intent popup with JavaScript can be challenging and time-consuming for those without coding knowledge.
Overuse: Overusing exit-intent popups can lead to user annoyance and reduced effectiveness over time.
Compatibility: Some users may have JavaScript disabled, making an exit-intent popup not work on their devices.

The Other Choices are Popup Builders

While creating an exit-intent popup with JavaScript is a viable option, it can be time-consuming and challenging for those unfamiliar with coding.

This is where a popup builder like Popupsmart comes in.

With Popupsmart, you can create and customize popups without any coding knowledge, saving you time and effort.

homepage of Popupsmart

Some other benefits of Popupsmart are as follows:

  • Access to a library of pre-designed templates: With Popupsmart, you can choose from a library of pre-designed templates to get started or design your own from scratch.
  • Easy customization: Customize your popups with ease using a visual editor; no coding skills are required.
  • Advanced targeting options: Popupsmart's advanced targeting options allow you to target specific pages, devices, and user segments, giving you greater control over who sees your popups and when.
  • Real-time analytics: Track the performance of your popups in real-time with Popupsmart's analytics dashboard.


Exit-intent popups are a powerful tool for engaging website visitors and driving conversions, but creating them with JavaScript can be challenging.

You have a chance to use smart and no-code tools like Popupsmart. Therefore, use it and take time with other tasks to build a stronger website.

Start your free trial today and see the results for yourself.

FAQs Corner

What is the purpose of an exit-intent popup in JavaScript?

The purpose of an exit-intent popup in JavaScript is to capture the attention of website visitors and drive them towards a desired action, such as filling out a form, making a purchase, or subscribing to a newsletter.

How does an exit-intent popup work in JavaScript?

An exit-intent popup works in JavaScript by using custom code that monitors user behavior and triggers the popup when certain conditions are met, such as when the user moves their cursor toward the exit button. This code is typically added to the website's header or footer.

Is an exit-intent popup beneficial for websites?

An exit-intent popup can be beneficial for websites as it provides a last chance to engage visitors and drive them towards a desired action, such as filling out a form, making a purchase, or subscribing to a newsletter. When used correctly, it can increase conversions, generate leads, and build brand awareness.

Are there any downsides to using an exit-intent popup in JavaScript?

While exit-intent popups can be effective, they can also be seen as intrusive and annoying by some users. It's important to use them sparingly and avoid overwhelming visitors with too many popups or popups that appear too frequently. Additionally, some users may have ad-blockers enabled that prevent exit-intent popups from appearing, reducing their effectiveness.

Is exit-intent JavaScript the only way to create exit-intent popups?

No, exit-intent JavaScript is just one way to create exit-intent popups. Other methods, such as plugins or popup builders, do not require coding knowledge.



Best Popup Builder Directory


Great! You’ve successfully signed up.

Welcome back! You've successfully signed in.

You've successfully subscribed to PopupBuilder.io.

Success! Check your email for magic link to sign-in.

Success! Your billing info has been updated.

Your billing was not updated.