Back Button Popup Library for Lead Generation – BackPopup.js

BackPopup.js is a lightweight JavaScript library that displays a customizable popup when a user interacts with the browser’s back button.

Its main goal is to give you one last chance to engage a user before they navigate away from your current page. Think last-minute offers, quick feedback surveys, or a gentle nudge towards a resource they might have missed.

Features:

• Triggers on browser back button clicks
• Stores dismissal preferences in localStorage or cookies
• Includes smooth fade-in/pop-in animations
• Offers complete customization of title, message, image, and buttons
• Works with zero dependencies (pure JavaScript)
• Small footprint (only 3KB minified)

See It In Action:

Use

Cases:

• E-commerce Cart Abandonment: Present a discount code or offer free shipping if a user tries to navigate back from the cart or checkout page. I’ve seen this bump conversion rates by a few percentage points on smaller sites.
• Lead Capture on Exit: Offer a valuable download (e.g., ebook, checklist) in exchange for an email address when a user attempts to leave a blog post or landing page.
• Quick Feedback Surveys: Ask a single, crucial question (e.g., “Did you find what you were looking for?”) before the user leaves. This can provide good insights without being too intrusive.
• SaaS Trial Retention: If a user is navigating away from a crucial feature page during a trial, you could pop up a message offering help or highlighting a benefit they might have overlooked.

How to use it:

1. Download the package and import the ‘backpopup.min.js’ script into your document.

<script src="/path/to/backpopup.min.js"></script>

2. You can also install the BackPopup package and import it as an ES module.

# NPM
$ npm install backpopup

import BackPopup from 'backpopup';

3. Initialize BackPopup and customize your popup with the following options:

• title: Main heading text
• message: Primary popup message (supports HTML)
• image: Optional image URL for your popup
• subtext: Additional text displayed under the image
• ctaText: Call-to-action button text
• ctaUrl: URL where users go when clicking the CTA button
• declineText: Text for the dismiss link
• animationDuration: Animation speed in milliseconds (default: 300)
• useCookies: Boolean flag to use cookies instead of localStorage
• cookieExpiryDays: Days until cookie expires (only used with useCookies: true)

document.addEventListener('DOMContentLoaded', function() {
  BackPopup.init({
    title: "Hold On!",
    message: "Leaving so soon? Grab this exclusive 10% off coupon before you go.",
    image: "images/coupon-graphic.png",
    subtext: "Use code: SAVE10NOW",
    ctaText: "Get My Coupon",
    ctaUrl: "/claim-coupon-page",
    declineText: "No, I'll pass",
    animationDuration: 250,
    useCookies: false,
    cookieExpiryDays: 14 
  });
});

4. You don’t want to annoy users by showing the same popup every time they hit back. For development, you can manually clear these:

• localStorage: localStorage.removeItem("backPopupDismissed");
• Cookies: document.cookie = "backPopupDismissed=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"; (Execute this in your browser’s developer console).

How It Works:

BackPopup.js uses the browser’s History API to detect back button clicks. When initialized, it pushes two history states, then listens for the `popstate` event that fires when users click the back button.

The library creates a full-page overlay with your configured content when triggered. It wraps everything in a clean, modern popup with fade-in and scale animations. All styles are injected programmatically, so there’s no need for external CSS.

For persistence, BackPopup tracks dismissals using either localStorage (default) or cookies based on your configuration. This prevents the popup from showing repeatedly to users who have already dismissed it, creating a better user experience.

The animation system uses CSS keyframes for smooth transitions, handling both the background overlay fade and the popup scale effect. I’ve found the default 300ms duration works well, but you can adjust this if you need faster or slower animations.

By pushing two states initially, the library ensures it can intercept the back action while still maintaining proper navigation if users continue backward after seeing the popup.

FAQs

Q: Will BackPopup.js interfere with my single-page application’s (SPA) routing?
A: It could. SPAs (React, Vue, Angular) often heavily use the History API for their own routing. BackPopup.js also manipulates history.state. You’ll need to test this carefully. If your SPA router also listens to onpopstate, there’s potential for conflict or unexpected behavior. One approach might be to conditionally initialize BackPopup.js only on specific non-SPA routes or to ensure its onpopstate handler plays nice with the SPA’s. Sometimes, the order of event listener attachment matters.

Q: How can I style the popup to perfectly match my site’s theme?
A: The library injects its own CSS, which is fairly minimal. The best way is to write your own CSS rules that target the popup’s elements (e.g., #backPopupOverlay, .backPopupContent, .backClaimButton). Use your browser’s developer tools to inspect the elements and see the default styles, then override them in your site’s stylesheet.

Q: What if the user has JavaScript disabled?
A: BackPopup.js, being a JavaScript library, will not function if JavaScript is disabled in the user’s browser. The popup will not appear. This is a standard limitation for any client-side JavaScript functionality.

Q: Is it possible to have multiple, different back popups on different pages?
A: Yes. You would call BackPopup.init() with different configurations on each page where you want a unique popup. The “Don’t Show Again” feature (using localStorage or a cookie with the key backPopupDismissed) is global by default for that domain. If you needed separate dismissal logic per popup type, you’d have to modify the library or implement a more complex dismissal check yourself, perhaps by passing a unique ID to init and using that in the localStorage key. The current library sets a single backPopupDismissed flag.

Q: How does this affect browser history for the user?
A: It adds two dummy states to the browser’s session history. When the user clicks back, they land on the first dummy state, which shows the popup. If they close the popup and navigate, or click the CTA, their history flow continues as expected. If they hit back again while the popup is shown (without interacting with it), the library pushes another state to keep the popup active. This can mean the user has to click “back” an extra time or two to get to their actual previous page if they are just trying to go back without interacting with the popup. This is a trade-off for intercepting the back action.

You Might Also Like:

• 7 Best Exit Intent Popup JavaScript Plugins To Retain Visitors

The post Back Button Popup Library for Lead Generation – BackPopup.js appeared first on CSS Script.