Surface Kit’s Popup Notices are designed to capture attention without the typical “plugin bloat” that slows down WordPress sites. They are the perfect “surface” for announcements, lead generation, or time-sensitive alerts.
1. Overview of Popup Surfaces #
Unlike traditional popups, Surface Kit’s notices are built to be high-performance and SEO-friendly.
- Lightweight Delivery: Part of the same 50KB unified core used by your floating buttons and AI chat.
- Exit-Intent Ready: Built-in intelligence to detect when a user is about to leave.
- Responsive by Design: Automatically adjusts for mobile, tablet, and desktop views.
2. Activation and Content Setup #
Step 1: Enable the Module #
Navigate to Surface Kit → Dashboard.
- Find the Popup Notices section and toggle it to Active.
Step 2: Content Configuration #
Customize the message your visitors will see:
- Heading: Create a punchy, bold title (e.g., “Limited Time Offer!”).
- Body Text: Use our minimalist editor to add descriptions, coupon codes, or announcement details.
- CTA Button: Add a primary action button (e.g., “Get the Deal”) and link it to your target URL.
3. Visual Customization (No-Code Editor) #
Match the popup to your site’s premium aesthetic using the Visual Builder:
- Positioning: Center-screen (Modal), Bottom-Right (Toast), or Full-Width (Top Bar).
- Styling: * Overlay Blur: Apply a subtle glassmorphism/blur effect to the background to keep focus on the popup.
- Corner Radius: Choose between sharp professional edges or modern rounded corners.
- Branding: Set custom background gradients or use your signature Surface Kit teal.
4. Smart Triggers & Logic #
Popups are most effective when they aren’t annoying. Use these smart triggers to optimize engagement:
| Trigger Type | How it Works | Best Use Case |
| Time Delay | Appears after the user has been on the page for X seconds. | General announcements. |
| Scroll Depth | Fires once the user reaches a certain percentage of the page. | Newsletter signups. |
| Exit-Intent | Triggers when the cursor moves toward the browser’s close button. | Last-minute discount codes. |
| Click-Trigger | Only appears when a specific link or button is clicked. | Terms of Service or detailed info. |
5. Advanced Visibility (Pro) #
With Surface Kit Pro, you can gain granular control over who sees your notices:
- Specific Pages: Only show a “Discount” popup on Product pages, not the Homepage.
- Device Targeting: Disable large popups for mobile users to ensure a better UX.
- Frequency Cap: Ensure a user only sees the popup once per session (or once ever) to prevent fatigue.
6. Performance Impact #
Because Surface Kit uses a Unified Logic System, your popups do not trigger additional CSS or JS requests. This ensures your Core Web Vitals (specifically LCP and CLS) remain green even with active marketing notices.
Design Tip: To maintain the “Smarter Engagement” look, use a high-contrast button color against a minimalist white or dark-mode background. This makes the “Surface” feel native to your theme.
