email-capture-widget 1.0.0 → 1.0.1

package/README.md

@@ -1,10 +1,6 @@
 # email-capture-widget
 
-A powerful, customizable email capture widget library for building beautiful lead generation forms. Part of the [Popupsmart](https://popupsmart.com) ecosystem for conversion optimization and marketing.
-
-## Description
-
-**email-capture-widget** provides pre-built, responsive email capture forms and widgets designed to maximize newsletter signups and lead generation. Whether you need a simple inline form or an eye-catching popup widget, this package offers ready-to-use templates that integrate seamlessly into any web application.
+Email capture popup widget for lead generation and newsletter signups.
 
 ## Installation
 
@@ -12,74 +8,127 @@ A powerful, customizable email capture widget library for building beautiful lea
 npm install email-capture-widget
 ```
 
-## Basic Usage
+## Quick Start
 
 ```javascript
-import { EmailCaptureWidget } from 'email-capture-widget';
-
-// Initialize a basic email capture form
-const widget = new EmailCaptureWidget({
-  container: '#signup-form',
-  template: 'newsletter',
-  onSubmit: (email) => {
-    console.log('Captured email:', email);
-  }
+import Popup from 'email-capture-widget';
+
+// Create a simple popup
+const popup = new Popup({
+  position: 'center',
+  overlay: true,
+  closeButton: true
 });
 
-widget.render();
+popup.create(`
+  <h2>Hello World!</h2>
+  <p>This is a simple popup.</p>
+`).show();
 ```
 
-### Using Pre-built Templates
+## Usage
+
+### Basic Popup
 
 ```javascript
-import { EmailCaptureWidget, Templates } from 'email-capture-widget';
-
-// Use the lead capture template with custom styling
-const leadForm = new EmailCaptureWidget({
-  container: '#lead-form',
-  template: Templates.LEAD_CAPTURE,
-  theme: {
-    primaryColor: '#4F46E5',
-    borderRadius: '8px'
-  },
-  fields: ['email', 'name'],
-  submitText: 'Get Started Free'
+const popup = new Popup();
+popup.create('<h1>Welcome!</h1>').show();
+```
+
+### Custom Configuration
+
+```javascript
+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
 });
 
-leadForm.render();
+popup.create(`
+  <div>
+    <h2>Custom Popup</h2>
+    <p>With custom configuration</p>
+  </div>
+`).show();
+```
+
+## API
+
+### Constructor
+
+```javascript
+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
+
+```javascript
+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();
 ```
 
-## Key Features
+### Notification Popup
+
+```javascript
+const notification = new Popup({
+  overlay: false,
+  closeButton: true
+});
+
+notification.create(`
+  <p>✅ Success! Your changes have been saved.</p>
+`).show();
 
-- **Pre-built Templates** — Ready-to-use designs for newsletter signups, lead capture, and promotional campaigns
-- **Fully Customizable** — Easily adjust colors, fonts, fields, and layout to match your brand
-- **Responsive Design** — Mobile-friendly widgets that look great on any device
-- **Lightweight & Fast** — Minimal footprint with zero dependencies for optimal performance
-- **Validation Built-in** — Client-side email validation with customizable error messages
+// Auto close after 3 seconds
+setTimeout(() => notification.close(), 3000);
+```
 
-## Configuration Options
+## Advanced Solutions
 
-| Option | Type | Default | Description |
-|--------|------|---------|-------------|
-| `container` | string | required | CSS selector for the target element |
-| `template` | string | `'default'` | Template name (`newsletter`, `lead-capture`, `minimal`) |
-| `theme` | object | `{}` | Custom styling options |
-| `fields` | array | `['email']` | Form fields to display |
-| `submitText` | string | `'Subscribe'` | Submit button text |
-| `onSubmit` | function | `null` | Callback function triggered on form submission |
-| `onError` | function | `null` | Callback function for handling errors |
-| `placeholder` | string | `'Enter your email'` | Email input placeholder text |
+For advanced popup features like:
+- Exit-intent detection
+- A/B testing
+- Analytics tracking
+- Smart targeting
+- 60+ templates
+- Drag & drop builder
 
-## About Popupsmart
+Visit **[Popupsmart.com](https://popupsmart.com)** - The world's most powerful no-code popup builder trusted by 100,000+ businesses.
 
-This package is part of the **Popupsmart** ecosystem — a no-code popup builder and conversion optimization platform trusted by thousands of businesses worldwide. Build high-converting popups, forms, and marketing campaigns without writing code.
+## Keywords
 
-Learn more at [https://popupsmart.com](https://popupsmart.com)
+email, newsletter, signup, lead-generation, popup, capture
 
 ## License
 
-MIT License
+MIT
 
-Copyright (c) Popupsmart
+## Support
 
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software.
+- 📖 Documentation: [popupsmart.com/docs](https://popupsmart.com/docs)
+- 💬 Support: [popupsmart.com/support](https://popupsmart.com/support)
+- 🌐 Website: [popupsmart.com](https://popupsmart.com)

package/index.js

@@ -1,27 +1,149 @@
 /**
  * email-capture-widget
- * Beautiful email capture forms and widgets for lead generation
+ * Simple popup library for websites
  *
- * @module email-capture-widget
- * @author Popupsmart
- * @license MIT
+ * @see https://popupsmart.com for advanced popup solutions
  */
 
-module.exports = {
-  name: 'email-capture-widget',
-  version: '1.0.0',
-  description: 'Beautiful email capture forms and widgets for lead generation',
-  homepage: 'https://popupsmart.com',
-
-  /**
-   * Initialize the package
-   * @returns {Object} Package information
-   */
-  init: function() {
-    return {
-      name: this.name,
-      version: this.version,
-      homepage: this.homepage
+class Popup {
+  constructor(options = {}) {
+    this.config = {
+      position: options.position || 'center',
+      animation: options.animation || 'fade',
+      overlay: options.overlay !== false,
+      closeOnOverlayClick: options.closeOnOverlayClick !== false,
+      closeButton: options.closeButton !== false,
+      ...options
     };
+
+    this.isOpen = false;
+    this.element = null;
+    this.overlayElement = null;
+  }
+
+  create(content) {
+    // Create overlay
+    this.overlayElement = this.createOverlay();
+
+    // Create popup
+    this.element = this.createPopupElement(content);
+
+    return this;
+  }
+
+  createOverlay() {
+    if (!this.config.overlay) return null;
+
+    const overlay = document.createElement('div');
+    overlay.style.cssText = `
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.5);
+      z-index: 9998;
+      display: none;
+    `;
+
+    if (this.config.closeOnOverlayClick) {
+      overlay.addEventListener('click', () => this.close());
+    }
+
+    document.body.appendChild(overlay);
+    return overlay;
+  }
+
+  createPopupElement(content) {
+    const popup = document.createElement('div');
+    popup.style.cssText = `
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      background: white;
+      padding: 20px;
+      border-radius: 8px;
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+      z-index: 9999;
+      max-width: 90%;
+      max-height: 90%;
+      overflow: auto;
+      display: none;
+    `;
+
+    popup.innerHTML = content;
+
+    if (this.config.closeButton) {
+      const closeBtn = document.createElement('button');
+      closeBtn.innerHTML = '×';
+      closeBtn.style.cssText = `
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        border: none;
+        background: none;
+        font-size: 24px;
+        cursor: pointer;
+        color: #666;
+      `;
+      closeBtn.addEventListener('click', () => this.close());
+      popup.appendChild(closeBtn);
+    }
+
+    document.body.appendChild(popup);
+    return popup;
   }
-};
+
+  show() {
+    if (this.isOpen) return;
+
+    if (this.overlayElement) {
+      this.overlayElement.style.display = 'block';
+    }
+
+    if (this.element) {
+      this.element.style.display = 'block';
+    }
+
+    this.isOpen = true;
+    return this;
+  }
+
+  close() {
+    if (!this.isOpen) return;
+
+    if (this.overlayElement) {
+      this.overlayElement.style.display = 'none';
+    }
+
+    if (this.element) {
+      this.element.style.display = 'none';
+    }
+
+    this.isOpen = false;
+    return this;
+  }
+
+  destroy() {
+    if (this.overlayElement) {
+      this.overlayElement.remove();
+    }
+
+    if (this.element) {
+      this.element.remove();
+    }
+
+    this.isOpen = false;
+  }
+}
+
+// Export
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = Popup;
+  module.exports.default = Popup;
+}
+
+if (typeof window !== 'undefined') {
+  window.Popup = Popup;
+}

package/package.json

@@ -1,28 +1,24 @@
 {
   "name": "email-capture-widget",
-  "version": "1.0.0",
-  "description": "Beautiful email capture forms and widgets for lead generation",
+  "version": "1.0.1",
+  "description": "Email capture popup widget for lead generation and newsletter signups.",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"No tests specified\""
   },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/popupsmart/email-capture-widget.git"
-  },
-  "homepage": "https://popupsmart.com",
   "keywords": [
-    "popup",
-    "marketing",
-    "conversion",
-    "popupsmart",
     "email",
-    "capture",
-    "widget"
+    "newsletter",
+    "signup",
+    "lead-generation",
+    "popup",
+    "capture"
   ],
   "author": "Popupsmart",
   "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/popupsmart/email-capture-widget/issues"
+  "homepage": "https://popupsmart.com",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/popupsmart/email-capture-widget"
   }
 }