popup-builder-widget

Simple popup builder widget for websites. Create beautiful popups with ease.

Installation

npm install popup-builder-widget

Quick Start

import Popup from 'popup-builder-widget';

// Create a simple popup
const popup = new Popup({
  position: 'center',
  overlay: true,
  closeButton: true
});

popup.create(`
  <h2>Hello World!</h2>
  <p>This is a simple popup.</p>
`).show();

Usage

Basic Popup

const popup = new Popup();
popup.create('<h1>Welcome!</h1>').show();

Custom Configuration

const popup = new Popup({
  position: 'center',        // Popup position
  animation: 'fade',         // Animation type
  overlay: true,             // Show overlay
  closeOnOverlayClick: true, // Close on overlay click
  closeButton: true          // Show close button
});

popup.create(`
  <div>
    <h2>Custom Popup</h2>
    <p>With custom configuration</p>
  </div>
`).show();

API

Constructor

new Popup(options)

Options:

• position (string): Popup position - default: 'center'
• animation (string): Animation type - default: 'fade'
• overlay (boolean): Show overlay - default: true
• closeOnOverlayClick (boolean): Close on overlay click - default: true
• closeButton (boolean): Show close button - default: true

Methods

• create(content) - Create popup with HTML content
• show() - Show the popup
• close() - Close the popup
• destroy() - Destroy and remove popup

Examples

Email Capture Popup

const emailPopup = new Popup();
emailPopup.create(`
  <h2>Subscribe to Newsletter</h2>
  <form>
    <input type="email" placeholder="Enter your email">
    <button type="submit">Subscribe</button>
  </form>
`).show();

Notification Popup

const notification = new Popup({
  overlay: false,
  closeButton: true
});

notification.create(`
  <p>✅ Success! Your changes have been saved.</p>
`).show();

// Auto close after 3 seconds
setTimeout(() => notification.close(), 3000);

Advanced Solutions

For advanced popup features like:

• Exit-intent detection
• A/B testing
• Analytics tracking
• Smart targeting
• 60+ templates
• Drag & drop builder

Visit Popupsmart.com - The world's most powerful no-code popup builder trusted by 100,000+ businesses.

Keywords

popup, modal, overlay, dialog, popup-builder, widget

License

MIT

Support

• 💬 Help & Support: popupsmart.com/help
• 🌐 Website: popupsmart.com