BackPopup.js

BackPopup.js is a lightweight JavaScript library that shows a customizable popup when users press the browser's back button — great for last-chance offers, surveys, or exit-intent lead capture.

🚀 Features

• 🔁 Triggers on browser back button
• 🧠 “Don’t Show Again” using localStorage or cookies
• ⚡ Smooth fade-in and pop-in animation
• 🎯 Fully customizable: title, message, image, CTA, decline button
• 📦 Zero dependencies, pure JavaScript

📦 Installation

Option 1: Direct <script> Include

<script src="backpopup.js"></script>

Or use the minified version:

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

Option 2: Install via npm

npm install backpopup

Then use it in your JavaScript:

import BackPopup from 'backpopup';

BackPopup.init({
  title: "WAIT!",
  message: "Don't leave yet — there’s an exclusive offer waiting!",
  ctaText: "Claim Offer",
  ctaUrl: "https://example.com",
  declineText: "No thanks"
});

🛠️ Usage

<script>
BackPopup.init({
  title: "WAIT!",
  message: "Don't leave yet — there’s an exclusive offer waiting!",
  image: "offer.jpg", // optional
  subtext: "Complete a quick survey and claim your reward.",
  ctaText: "Yes, I want it!",
  ctaUrl: "offer.php",
  declineText: "No thanks",
  animationDuration: 300, // optional
  useCookies: true,       // enable cookie mode instead of localStorage
  cookieExpiryDays: 7     // valid only if useCookies is true
});
</script>

⚙️ Options

| Option | Type | Description | | ------------------- | ------- | --------------------------------------------------------------- | | title | string | Main heading of the popup | | message | string | Message below the title | | image | string | (Optional) Image URL | | subtext | string | Message under the image | | ctaText | string | Text on the call-to-action button | | ctaUrl | string | URL for the CTA button | | declineText | string | Text for the dismiss link | | animationDuration | number | Animation speed in milliseconds (default: 300) | | useCookies | boolean | If true, uses cookies instead of localStorage | | cookieExpiryDays | number | Cookie expiry in days (only used when useCookies is true) |

🧠 “Don't Show Again” Behavior

Once the user clicks "No thanks", the popup won't appear again due to:

• localStorage flag (backPopupDismissed) if useCookies: false (default)
• A cookie (backPopupDismissed) if useCookies: true

🔄 Reset manually (for development):

For localStorage mode:

localStorage.removeItem("backPopupDismissed");

For cookie mode:

document.cookie = "backPopupDismissed=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

💡 Tips

• Combine with UTM parameters or cookies for targeted campaigns
• Customize appearance using your own CSS overrides
• Works well for landing pages, checkout exits, and surveys

📝 License

MIT License

🙋 Support

Found a bug or want a new feature? Open an issue or contact the maintainer.