IndieTech Popup Builder

Descrizione

Popup by IndieTech is a feature-rich WordPress popup plugin that makes it easy to create and display engaging popups on your website. Built with the Gutenberg editor, you can create rich, interactive popup content using familiar WordPress blocks.

Key Features

• Gutenberg Editor Support: Create rich popup content using the WordPress block editor. All settings are in the document sidebar (Trigger, Behavior, Design, Location).
• Advanced Triggering Options:
  • Immediate display on page load
  • Time delay (show after X seconds, 0-30)
  • Scroll percentage (show when user scrolls X% of the page)
  • Exit intent (when cursor leaves the viewport from the top)
• Smart Targeting (Location):
  • Include rules (multi-select): All pages, Homepage, CPT single (by post type), Specific page/post IDs, URL prefixes (one per line)
  • Exclude rules: Exclude by post/page IDs or URL prefixes
  • Exclusions are applied first; popup shows if any include rule matches and no exclude rule matches
• Cookie Management: Control how often users see popups
  • Cookie duration in days (0 = show every time, up to 365)
  • Choose when cookie is set: On Close or On Seen
• Customizable Styling (Design):
  • Position: 9-position matrix (top/center/bottom x left/center/right)
  • Max width (200-1200px)
  • Overlay opacity (0-1)
  • Close button: Do not show, Show inside, or Show outside
• Behavior Options:
  • Close when clicking outside (overlay)
  • Disable page scroll when popup is open
• Private popups: Publish as Private to show only to logged-in users
• Close link in content: Use href=”#popup:close” in popup content to close the modal
• List view: Custom columns for Status and Trigger (Immediate, Delay, Scroll %, Exit Intent)
• Mobile Responsive: Fully responsive design that works on all devices
• Accessible: Built with Micromodal for accessible modals (focus trap, ARIA, keyboard)
• Lightweight: Optimized code; assets only load when there are active popups; transient cache for performance

How It Works

1. Create a new popup by going to Popups > Add New
2. Use the Gutenberg editor to add your content (text, images, forms, buttons, etc.)
3. In the document sidebar, configure Trigger, Behavior, Design, and Location
4. Publish (or set to Private for logged-in users only). Your popup will appear based on your targeting and trigger settings

Use Cases

• Lead generation forms
• Newsletter signups
• Promotional offers and announcements
• Important messages and alerts
• Exit intent offers
• Welcome messages
• Cookie consent notices
• Product launches and updates

Source Code & Build Process

This plugin uses JavaScript build tools to compile and minify assets. The uncompiled source code is included in the src/ directory of the plugin package.

Source files

• src/js/frontend.js — Main popup manager (triggers, cookies, GA4 tracking)
• src/js/admin.js — Admin stylesheet import
• src/css/frontend.scss — Frontend styles (compiled to assets/css/frontend.css)
• src/css/admin.scss — Admin styles (compiled to assets/css/admin.css)
• src/sidebar/index.js — Gutenberg block editor sidebar entry point
• src/sidebar/PopupSidebar.js — React component for the document sidebar panels

Build tools

• Vite — bundles and minifies src/js/ and src/css/ into assets/js/ and assets/css/
• @wordpress/scripts — compiles the Gutenberg sidebar (src/sidebar/) into assets/sidebar/
• Sass — CSS preprocessor
• Autoprefixer — vendor-prefix CSS
• Micromodal — accessible modal library (version ^0.4.10, bundled via npm)

Building from source

npm install
npm run build:all