Popmatic – Block Editor Popups, Modals and Lightboxes

چۈشەندۈرۈش

Popmatic is a WordPress popup plugin that works the way the block editor already works. Instead of a separate popup builder with its own screens and its own styling engine, Popmatic adds a Popup block. You design the popup with the blocks you already use, then control how and when it appears from the block sidebar.

That means no page builder, no shortcodes, and no custom JavaScript. If you can build a page in WordPress, you can build a popup.

What you can build

• Promotional popups – discounts, coupons, seasonal sales, Black Friday campaigns.
• Newsletter popups – drop any form block inside the popup and collect signups.
• Announcement popups – product updates, shipping notices, maintenance windows.
• Event popups – webinar invites, launch announcements, registration prompts.
• Modal popups – open extra content from a button or link without leaving the page.
• Conversion-focused popups – last-chance offers, upgrade prompts, social proof.

Why Popmatic is different

• It is a real block. The popup lives in your post, page or template, not in a separate database table. It moves with your content, versions with your revisions, and exports with your theme.
• You already know the design tools. Colors, typography, spacing, borders, shadows and background images all come from the core block controls, so the popup inherits your theme’s styles by default.
• It stays out of the way. The free plugin renders the same markup for every visitor and decides when to open the popup in the browser, which keeps it compatible with page caching.
• It is accessible by default. The popup is a labelled dialog, keyboard focus is trapped while it is open and restored when it closes, and animations respect the visitor’s «reduce motion» setting.

Free features

Everything below is in the free plugin.

Build the popup

• Two blocks: Popup (the wrapper that holds every setting) and Popup Content (the area you fill with any blocks).
• Put any blocks inside – headings, images, buttons, columns, videos, and form blocks from other plugins.
• Ready-made popup patterns for sales, seasonal campaigns, announcements, engagement and events. Pick one from the pattern picker and it becomes editable blocks.
• Insert a popup into a post, a page, or a site template in the Site Editor so it can run across the whole site.

Popup triggers

• On page load, with an optional delay of up to 300 seconds.
• On click of any button, link or element you choose.
• On hover over any element you choose.

Design and positioning

• Nine on-screen positions: any combination of top, center and bottom with left, center and right.
• Adjustable popup width, in any CSS unit.
• Seven entrance animations – fade, slide up, slide down, slide left, slide right, zoom in and zoom out – or none at all.
• Background overlay that can be turned off, or given any color and transparency level.
• Optional background scroll lock while the popup is open.
• Full close-button styling: icon and background colors with hover states, border, border radius, size and position offset.

Close behavior

• Close button, click outside the popup, and the Escape key – enable any combination.
• One close method is always kept enabled, so a popup can never trap a visitor.
• Close button can sit inside or outside the popup panel.

Display rules

• Disable for Returning Visitors shows the popup only once per visitor. The record is kept in that visitor’s own browser, so nothing is stored on your server and no personal data is collected.

Responsive and accessible

• The popup never grows wider than 95% of the screen or taller than 95% of the viewport, and scrolls inside itself if the content is longer – so a popup designed on a desktop still fits a phone.
• Marked up as a dialog (role="dialog", aria-modal), with a labelled close button.
• Keyboard focus is moved into the popup when it opens, cycles inside it while it is open, and returns to where the visitor was when it closes.
• Animations are switched off automatically for visitors who have asked their system to reduce motion.

Popmatic Pro

Popmatic Pro is a separate plugin that installs alongside the free one and unlocks the settings marked «(Pro)» in the popup sidebar. Nothing you have already built changes – the same block gains more control.

Advanced popup triggers

• Exit intent popup – opens when a visitor is about to leave. On desktop this is the mouse leaving the page; on mobile it responds to a fast scroll back to the top or the browser’s back button. Best for last-chance offers and abandoned-cart style prompts.
• Scroll trigger – opens once the visitor has scrolled a set percentage of the page. Useful when you want the popup to reach engaged readers rather than everyone who lands on the page.

More close options

• Auto-close timer – closes the popup on its own after 1 to 120 seconds. Good for announcements you want seen but not dismissed manually.
• Extra close class – turn any element inside the popup into a close button by giving it a CSS class. Lets a «No thanks» link or a CTA button close the popup, and links still navigate before it closes.

Popup frequency control

• Show the popup again after a set interval instead of only once: 1 to 23 hours, or 1 to 365 days. The countdown starts the moment the popup is shown, so a visitor who returns on day 4 of a 3-day interval sees it again.

Audience targeting

• Show the popup to all visitors, logged-in users only, logged-out users only, or specific user roles picked from the roles that exist on your site.
• Enforced on the server, so the popup markup is never sent to visitors who should not see it.

Scheduling

• Set a start and end date and time for the popup. It appears and disappears on its own, in your site’s timezone, with no need to remember to publish or unpublish anything. Ideal for sales, seasonal campaigns and time-boxed announcements.

Per-page exclusions

• When the popup is placed in a site template, exclude specific pages from it – for example, keep a promotional popup off your checkout, contact or thank-you pages. Excluded page IDs are evaluated on the server and never appear in your public HTML.

Premium pattern library

• Unlocks the Pro popup patterns in the same pattern picker, alongside the free ones.

License, updates and support

• A Settings → Popmatic page for activating your license, with license status, activations used, expiry date and package shown at a glance.
• Automatic plugin updates for Popmatic Pro once the license is active.
• Direct links to documentation and support from inside your dashboard.

See what Popmatic Pro adds and view pricing

Free vs Popmatic Pro at a glance

• Popup builder and blocks – Free: full block-based builder, Popup and Popup Content blocks. Pro: identical, nothing is taken away.
• Popup patterns – Free: the free pattern library. Pro: adds the premium patterns.
• Open triggers – Free: page load with delay, click, hover. Pro: adds scroll depth and exit intent.
• Position, size and animation – Free: all nine positions, custom width, seven animations. Pro: identical.
• Overlay and close-button styling – Free: full control. Pro: identical.
• Close options – Free: close button, click outside, Escape key. Pro: adds an auto-close timer and extra close elements.
• Display frequency – Free: once per visitor. Pro: adds repeat intervals in hours or days.
• Audience targeting – Free: everyone. Pro: logged-in, logged-out, or specific user roles.
• Scheduling – Free: not available. Pro: start and end date and time.
• Page exclusions – Free: not available. Pro: exclude chosen pages from a template-level popup.
• Updates and support – Free: WordPress.org updates and the support forum. Pro: automatic updates and direct support.

Who Popmatic Pro is for

• Shops and marketers running dated campaigns who want a sale popup that switches itself on and off, and an exit intent popup to catch leaving visitors.
• Membership and community sites that need to show one message to logged-out visitors and a different one to members, or nothing at all to admins.
• Content publishers who want the popup to appear only after someone has actually read part of the page, rather than the moment they arrive.
• Agencies and freelancers managing client sites who need site-wide popups with sensible exceptions, without editing templates for every campaign.

How it works

1. Edit any post, page or template and insert the Popup block.
2. Choose a ready-made pattern, or select Start blank and build the popup yourself.
3. Click Edit Popup to open the popup in the editor and fill the Popup Content area with any blocks.
4. Open the block sidebar and set the open trigger, position, width, animation and overlay.
5. Set your close options and, if you need them, your display rules.
6. Publish. The popup is live on the front end.

While you are editing blocks inside the popup, a Popup Settings button in the block toolbar takes you straight back to the popup’s own settings.

Settings reference

Every setting lives in the block sidebar when the Popup block is selected.

General Settings

• Popup is enabled – the master switch. When it is off, the popup is not rendered at all, so you can retire a campaign without deleting the block you spent time on.
• Open Trigger – how the popup opens: On Load, On Click, On Hover, and in Pro, On Scroll and On Exit Intent.
• Trigger Delay – for the On Load trigger only. Waits a number of seconds (0–300) before opening, so the popup does not land on top of a page the visitor has not seen yet. A short delay usually converts better than an instant one.
• Anchor Trigger Class – for the On Click and On Hover triggers. Enter a CSS class name without the dot, then add the same class to your button or link using its Advanced → Additional CSS class(es) field. Any number of elements can share the class and all of them will open the popup.
• Scroll Distance (Pro) – for the On Scroll trigger. The percentage of the page (0–100) the visitor must scroll before the popup opens.
• Popup Content Width – the width of the popup panel, in any CSS unit. Defaults to 700px. It is automatically capped so it always fits smaller screens.
• Popup Position – where the popup sits: top left, top center, top right, center left, center, center right, bottom left, bottom center or bottom right. Corner positions feel less interruptive; center reads as more important.
• Animation – the entrance effect: fade, slide up, slide down, slide left, slide right, zoom in, zoom out, or none.
• Background Overlay – dims the page behind the popup. Turn it off for a corner notification that should not block the page.
• Disable Body Scroll – stops the page behind the popup from scrolling while it is open, so a visitor cannot scroll the popup off-screen without answering it.

Close Settings

• Show Close Button – shows the close icon in the popup corner.
• Close Button Position – inside the popup panel, or outside it against the overlay. Available when both the close button and the overlay are on.
• Close On Click Outside – closes the popup when the visitor clicks the overlay. Feels natural and reduces frustration.
• Close On Press Esc Key – closes the popup on the Escape key. Expected behavior for keyboard users.
• Close Popup Automatically and Auto close time (Pro) – closes the popup after 1 to 120 seconds without any visitor action.
• Extra Close Class (Pro) – a CSS class (without the dot) for any element inside the popup that should also close it, such as a «Maybe later» link or a CTA button.

One close method always stays switched on. When only one is left, its toggle is locked and the sidebar explains why – this prevents a popup a visitor cannot get out of.

Visibility Settings

• Show Popup For (Pro) – All, Logged In Users, Logged Out Users, or Specific User Roles. Choosing Specific User Roles reveals a picker listing every role on your site.
• Disable for Returning Visitors – once the popup has been shown, it stays hidden for that visitor. On its own this means «show it once, ever».
• Display Interval Type and Display Interval (Pro) – shown when the setting above is on. Choose Hours (1–23) or Days (1–365) and the popup can appear again after that gap. Leave the interval unset to keep the one-time behavior.
• Show Popup on Schedule (Pro) – set a start and end date and time. Outside that window the popup is not rendered.
• Exclude Pages (Pro) – pick pages the popup should never appear on. This applies to popups added in the Site Editor at template level, where the popup would otherwise run everywhere.

Styles tab

• Overlay Color – any color from your theme palette or a custom one, with transparency, so the overlay can be a light wash or a heavy dim.
• Close Button Styles – icon color and hover color, background color and hover color, border hover color, width and height in pixels, position offset from the top, right, bottom and left, border, and border radius.

Popup Content block

The inner content area uses the standard block design controls: background color, gradient and background image; text, link, heading and button colors; typography including font family, size, weight, style, line height, letter spacing, text transform and decoration; padding and margin; border and border radius; and box shadow.