popup-builder-widget 1.0.0 → 1.0.1

package/README.md

@@ -1,9 +1,6 @@
-```markdown
-# Popup Builder Widget
+# popup-builder-widget
 
-A customizable popup builder widget for creating engaging, conversion-optimized popups on websites. Built with exit-intent detection and A/B testing capabilities to maximize your conversion rates.
-
-Part of the [Popupsmart](https://popupsmart.com) ecosystem - a leading popup builder and marketing conversion platform.
+Simple popup builder widget for websites. Create beautiful popups with ease.
 
 ## Installation
 
@@ -14,97 +11,124 @@ npm install popup-builder-widget
 ## Quick Start
 
 ```javascript
-import { PopupBuilder } from 'popup-builder-widget';
+import Popup from 'popup-builder-widget';
 
-// Initialize a basic popup
-const popup = new PopupBuilder({
-  title: 'Subscribe to Our Newsletter',
-  content: 'Get exclusive deals and updates delivered to your inbox.',
-  trigger: 'exit-intent'
+// Create a simple popup
+const popup = new Popup({
+  position: 'center',
+  overlay: true,
+  closeButton: true
 });
 
-popup.show();
+popup.create(`
+  <h2>Hello World!</h2>
+  <p>This is a simple popup.</p>
+`).show();
 ```
 
-## Features
+## Usage
 
-- **Exit-Intent Detection** - Automatically display popups when users attempt to leave your page, capturing potential lost conversions
-- **A/B Testing** - Built-in split testing capabilities to optimize popup performance and identify winning variations
-- **Customizable Templates** - Fully customizable popup designs with flexible styling options to match your brand
-- **Smart Targeting** - Display popups based on user behavior, page URLs, device type, and custom conditions
-- **Analytics Integration** - Track impressions, conversions, and engagement metrics out of the box
+### Basic Popup
 
-## Usage Examples
+```javascript
+const popup = new Popup();
+popup.create('<h1>Welcome!</h1>').show();
+```
 
-### Exit-Intent Popup
+### Custom Configuration
 
 ```javascript
-import { PopupBuilder } from 'popup-builder-widget';
-
-const exitPopup = new PopupBuilder({
-  title: 'Wait! Before You Go...',
-  content: 'Get 15% off your first order!',
-  trigger: 'exit-intent',
-  theme: 'modern',
-  onSubmit: (data) => {
-    console.log('Lead captured:', data);
-  }
+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
 });
 
-exitPopup.init();
+popup.create(`
+  <div>
+    <h2>Custom Popup</h2>
+    <p>With custom configuration</p>
+  </div>
+`).show();
 ```
 
-### A/B Testing Configuration
+## API
+
+### Constructor
 
 ```javascript
-import { PopupBuilder, ABTest } from 'popup-builder-widget';
-
-const test = new ABTest({
-  variants: [
-    { id: 'A', title: 'Sign Up Now', buttonColor: '#007bff' },
-    { id: 'B', title: 'Join Free Today', buttonColor: '#28a745' }
-  ],
-  trafficSplit: 50,
-  onConversion: (variant) => {
-    console.log(`Variant ${variant.id} converted`);
-  }
-});
+new Popup(options)
+```
 
-const popup = new PopupBuilder({
-  abTest: test,
-  trigger: 'scroll-50'
-});
+**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
 
-popup.init();
+### 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();
 ```
 
-## Configuration Options
+### Notification Popup
+
+```javascript
+const notification = new Popup({
+  overlay: false,
+  closeButton: true
+});
+
+notification.create(`
+  <p>✅ Success! Your changes have been saved.</p>
+`).show();
 
-| Option | Type | Default | Description |
-|--------|------|---------|-------------|
-| `title` | string | `''` | Popup heading text |
-| `content` | string | `''` | Main popup content or HTML |
-| `trigger` | string | `'load'` | Trigger type: `'load'`, `'exit-intent'`, `'scroll-{percent}'`, `'delay-{ms}'` |
-| `theme` | string | `'default'` | Popup theme: `'default'`, `'modern'`, `'minimal'` |
-| `position` | string | `'center'` | Display position: `'center'`, `'top'`, `'bottom'`, `'bottom-right'` |
-| `overlay` | boolean | `true` | Show background overlay |
-| `closeOnOverlay` | boolean | `true` | Close popup when clicking overlay |
-| `onSubmit` | function | `null` | Callback function when form is submitted |
-| `onClose` | function | `null` | Callback function when popup is closed |
+// Auto close after 3 seconds
+setTimeout(() => notification.close(), 3000);
+```
 
-## Documentation
+## Advanced Solutions
 
-For comprehensive documentation, tutorials, and advanced use cases, visit the [Popupsmart Documentation](https://popupsmart.com).
+For advanced popup features like:
+- Exit-intent detection
+- A/B testing
+- Analytics tracking
+- Smart targeting
+- 60+ templates
+- Drag & drop builder
 
-## Support
+Visit **[Popupsmart.com](https://popupsmart.com)** - The world's most powerful no-code popup builder trusted by 100,000+ businesses.
 
-If you encounter any issues or have questions, please visit [Popupsmart](https://popupsmart.com) for support resources.
+## Keywords
+
+popup, modal, overlay, dialog, popup-builder, widget
 
 ## License
 
-MIT License - see [LICENSE](LICENSE) for details.
+MIT
 
----
+## Support
 
-Built with ❤️ by [Popupsmart](https://popupsmart.com)
-```
+- 📖 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 @@
 /**
  * popup-builder-widget
- * A customizable popup builder widget for creating engaging popups on websites
+ * Simple popup library for websites
  *
- * @module popup-builder-widget
- * @author Popupsmart
- * @license MIT
+ * @see https://popupsmart.com for advanced popup solutions
  */
 
-module.exports = {
-  name: 'popup-builder-widget',
-  version: '1.0.0',
-  description: 'A customizable popup builder widget for creating engaging popups on websites',
-  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": "popup-builder-widget",
-  "version": "1.0.0",
-  "description": "A customizable popup builder widget for creating engaging popups on websites",
+  "version": "1.0.1",
+  "description": "Simple popup builder widget for websites. Create beautiful popups with ease.",
   "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/popup-builder-widget.git"
-  },
-  "homepage": "https://popupsmart.com",
   "keywords": [
     "popup",
-    "marketing",
-    "conversion",
-    "popupsmart",
-    "popup",
-    "builder",
+    "modal",
+    "overlay",
+    "dialog",
+    "popup-builder",
     "widget"
   ],
   "author": "Popupsmart",
   "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/popupsmart/popup-builder-widget/issues"
+  "homepage": "https://popupsmart.com",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/popupsmart/popup-builder-widget"
   }
 }