Navigate to Content Manipulation → Overlays to create and manage popup displays.

Understanding Overlays

Overlays are popup displays that appear on your pages based on user behavior triggers like time on page, scroll depth, exit intent, or inactivity. They’re effective for:

• Capturing attention with special offers
• Displaying important announcements
• Promoting new products or services
• Building email lists
• Highlighting urgent messages

Three Main Components:

1. Manage Overlays: Create and edit overlay content
2. Add/Edit Overlay Placement: Configure when and where overlays display
3. Overlay Placements Dashboard: Manage all overlay placements

Creating Overlay Content

Before you can display overlays, you must create the content that will appear in the popups.

Navigate to the Manage Overlays tab and click Add New Overlay.

Add Title
Enter a title for this overlay. This is for your internal identification—it doesn’t appear in the popup itself.

Examples:

• “Spring Sale 2025 Promotion”
• “New Product Launch Announcement”
• “Email Subscription Offer”

Content Editor
Add the content that will appear in the overlay popup. You can use the WordPress editor to:

• Format text (bold, italic, headings)
• Add images
• Include hyperlinks
• Create lists
• Embed HTML if needed

Content Best Practices:

• Keep message concise and scannable
• Use clear, compelling headlines
• Include a strong call-to-action
• Add images for visual interest
• Ensure links work correctly

Example Content:

🎉 SPRING SALE – 20% OFF ALL SERVICES! 🎉

 

Limited time offer: Get 20% off all dental services this month.

 

✓ Teeth Whitening

✓ Dental Implants  

✓ Cosmetic Dentistry

 

Click here to book your appointment now!

[Book Appointment Button/Link]

 

Publish
Click the Publish button to save your overlay content.

The overlay now appears in the Manage Overlays dashboard where you can:

• Edit: Modify overlay content anytime
• Delete: Remove overlays you no longer need

You can create multiple overlays and reuse them across different placements and subdomains.

Creating Overlay Placements

Overlay content alone doesn’t display on your site—you must create an Overlay Placement that defines when, where, and how the overlay appears.

Navigate to the Add/Edit Overlay Placement tab or click Add New Placement from the dashboard.

Title
Enter a descriptive title for this placement configuration.

Examples:

• “Homepage Exit Intent Popup”
• “Blog Post 10-Second Delay Overlay”
• “Service Pages Scroll-Triggered Offer”

Description
Add internal notes about this placement’s purpose and strategy.

Tags
Assign organizational tags: tag1|tag2|tag3

Status
Set the placement status:

• Inactive: Placement is saved but won’t display overlays (default for new placements)
• Active: Placement is live and displays overlays to visitors

Recommendation: Create and configure placements as “Inactive,” test them, then switch to “Active” when ready for deployment.

Overlay Rotation

Rotation allows you to display multiple overlays randomly from a single placement. This is perfect for A/B testing different messages or showing variety to returning visitors.

Enable Overlay Rotation
Check this box to enable rotation and display the rotation configuration options.

Adding Overlays to Rotation
When rotation is enabled:

1. Select Overlay: Choose an overlay from the dropdown (these are overlays you created in “Manage Overlays”)

2. Set Display Percentage: Enter the percentage of time this overlay should display (e.g., 20 for 20%)

3. Optional Landing URL: Enter a specific URL that overrides links in the overlay content
   • Leave blank to use links within the overlay content itself
   • Enter a URL to force all clicks to go to that destination
4. Add More Overlays: Click the + (plus) button to add additional overlays to the rotation

Rotation Example:

• Overlay A (“Spring Sale”): 20% display frequency, landing URL: https://www.example.com/spring-sale
• Overlay B (“New Product Launch”): 80% display frequency, landing URL: https://www.example.com/new-product

Result: When a visitor triggers the overlay:

• 20% of the time they see “Spring Sale”
• 80% of the time they see “New Product Launch”
• All clicks redirect to respective landing URLs

Disable Rotation
Uncheck “Enable overlay rotation” to use a single overlay without rotation.

When disabled:

• Select Overlay: Choose one overlay from dropdown
• This overlay displays 100% of the time when triggered

Display Triggers

Display triggers determine when overlays appear based on user behavior. You can combine multiple triggers—any one trigger will cause the overlay to display.

Display After Time on Page
Enter time in seconds. The overlay displays after the visitor has been on the page for this duration.

Examples:

• 0 or leave blank: Display immediately when page loads
• 5: Display after 5 seconds
• 10: Display after 10 seconds
• 30: Display after 30 seconds

Use Cases:

• Immediate (0): Urgent announcements, breaking news
• Short delay (3-5 seconds): General promotions, offers
• Medium delay (10-15 seconds): Engaged visitors, longer sales pitches
• Long delay (30+ seconds): Highly engaged visitors, premium offers

Display After Page Scroll
Enter a percentage (0-100). The overlay displays when the visitor scrolls to that percentage of the page.

Examples:

• 20: Display after scrolling 20% of page
• 50: Display at halfway point
• 75: Display after scrolling 75% of page

Use Cases:

• Early scroll (20-30%): Capture attention while reader is engaged
• Mid-scroll (40-60%): Reader is invested in content
• Late scroll (75-90%): Reader has consumed most content, ready for action

Important Note: Scroll triggers work best on longer articles. On short pages with minimal content, scroll percentages are reached almost immediately.

Display Overlay When User Intends to Exit
Check this box to trigger the overlay when the user moves their mouse toward the browser’s top edge (indicating they’re about to close the tab or navigate away).

How Exit Intent Works:

• System detects rapid mouse movement toward top of screen
• Overlay displays immediately
• Goal: Capture attention before visitor leaves

Use Cases:

• Last-chance offers
• “Wait! Before you go…” messages
• Exit surveys or feedback requests
• Alternative content suggestions

Exit Intent Best Practices:

• Make the offer compelling (discount, free resource, exclusive content)
• Keep message short—users are trying to leave
• Provide clear value proposition quickly
• Include easy close option to avoid frustration

Display After Period of Inactivity
Enter time in seconds. The overlay displays if there’s no mouse movement, scrolling, or keyboard activity for this duration.

Examples:

• 30: Display after 30 seconds of inactivity
• 60: Display after 1 minute of inactivity
• 120: Display after 2 minutes of inactivity

Use Cases:

• Re-engage readers who may have been distracted
• “Are you still there?” messages
• Offer assistance to stuck visitors
• Capture attention from idle visitors

Combining Triggers
You can use multiple triggers simultaneously. The overlay displays when any one trigger condition is met (OR logic, not AND).

Example Combination:

• Time on page: 10 seconds
• Page scroll: 50%
• Exit intent: Enabled
• Inactivity: 60 seconds

Result: Overlay displays if visitor:

• Stays on page for 10 seconds, OR
• Scrolls to 50%, OR
• Moves mouse to exit, OR
• Is inactive for 60 seconds

Whichever happens first triggers the overlay.

Display Settings

Display Duration
Enter how many seconds the overlay should remain visible once it appears.

Options:

• Specific duration: Enter number of seconds (e.g., 10 for 10 seconds)
• Remains until closed: Leave blank or enter 0

Use Cases:

• Auto-close (5-10 seconds): Brief announcements, non-critical messages
• Manual close only (blank): Important messages, offers requiring action

Size
Select the overlay popup size:

• Small: Compact popup for brief messages
• Medium: Standard size for most content
• Large: Extensive content, multiple elements

Choose size based on content amount:

• Small: 1-2 sentences, simple message
• Medium: Paragraph + image or form
• Large: Multiple paragraphs, detailed content, large images

Display Frequency
Control how often visitors see the overlay:

Options:

• All of the Time: Display every time trigger conditions are met (can show multiple times per session)
• Once Per Session: Display maximum once during a visitor’s browsing session
• Once Per Browser: Display maximum once ever (tracked via browser cookie)

Use Cases:

• All of the Time: Critical announcements, time-sensitive alerts
• Once Per Session: Promotions, offers, general announcements
• Once Per Browser: One-time onboarding, welcome messages, major announcements

Recommendation: Use “Once Per Session” for most campaigns to avoid annoying returning visitors.

Background Color
Select the overlay background color using the color picker.

Considerations:

• Match your brand colors
• Ensure good contrast with text
• Consider emotional impact of colors
• Test readability on different devices

Close Options

Close When User Clicks Outside the Overlay
Check this box to allow users to close the overlay by clicking anywhere outside the popup box.

When enabled:

• Clicking outside overlay closes it
• Provides intuitive closing method
• Improves user experience

When disabled:

• Users must use the close button
• Forces more focused attention on overlay
• Can be frustrating if overused

Recommendation: Enable this option for better user experience unless you need to force interaction with overlay content.

Hide Close Icon
Check this box to remove the X (close) button from the overlay.

When enabled (close icon hidden):

• Visitors must click outside overlay to close (if that option is enabled)
• Or interact with overlay content (click links)
• Forces engagement with content

Warning: Hiding the close icon and disabling outside-click closing can trap users, creating a negative experience. Always provide an easy way to close overlays.

Use Cases for Hidden Close Icon:

• Very brief messages (3-5 seconds) with auto-close
• Exit intent offers where all options are actionable buttons
• Critical announcements where you want guaranteed attention

Location Targeting

Location targeting determines where on your site the overlay displays.

Location Dropdown Options:

1. Whole Site
   Display overlay across your entire WordPress installation (main domain + all subdomains).

Use Cases:

• Site-wide announcements
• Universal promotions
• Important notifications affecting all visitors

2. Root Domain Only
   Display overlay only on the main domain, not on any subdomains.

Use Cases:

• Main site-specific promotions
• Homepage announcements
• Primary brand messaging

3. All Subdomains
   Display overlay on all subdomains but NOT on the main domain.

Use Cases:

• PBN-wide announcements
• Subdomain-specific campaigns
• Network offers

4. Selected Subdomains
   Manually choose specific subdomains where the overlay should display.

When selected:

• Subdomain selection box appears on the right
• Use Ctrl+Click (Windows) or Cmd+Click (Mac) to select multiple
• Only selected subdomains show the overlay

Use Cases:

• Niche-specific promotions (e.g., only dental subdomains)
• Client-specific campaigns
• Testing overlays on select subdomains first

5. Selected Posts
   Target specific individual articles/pages.

When selected:

• Subdomain selection box appears
• Posts selection box appears
• Choose subdomains, then select specific posts

Use Cases:

• High-value page promotions
• Post-specific offers
• Conversion-optimized pages
• A/B testing on specific articles

Overlay Links

When overlay rotation is disabled (using a single overlay), configure the destination URL for clicks.

Link URL Entry
Enter one or more URLs where overlay clicks should direct visitors.

Format: One URL per line

URL Distribution Options:

Option 1: Single URL
Enter one URL—all clicks go to this destination.

Example:

https://www.example.com/special-offer

 

Option 2: Multiple URLs with Equal Distribution
Enter multiple URLs without percentages—clicks are distributed equally.

Example:

https://www.example.com/offer-page-1

https://www.example.com/offer-page-2

https://www.example.com/offer-page-3

 

Result: Each URL receives approximately 33.3% of clicks (equal distribution).

Option 3: Multiple URLs with Percentage Distribution
Enter URLs with percentage numbers to control distribution.

Format: percentage% URL

Example:

30% https://www.example.com/offer-page-1

20% https://www.example.com/offer-page-2

50% https://www.example.com/offer-page-3

 

Result:

• Offer Page 1: 30% of clicks
• Offer Page 2: 20% of clicks
• Offer Page 3: 50% of clicks

Use Cases for Multiple URLs:

• A/B testing different landing pages
• Distributing traffic across multiple offers
• Testing conversion rates of various destinations

Important Note: If overlay rotation is enabled, landing URLs are set within each individual overlay configuration, not here.

A/B Testing

Enable A/B testing to automatically track which overlays perform best.

Enable A/B Testing
Check this box to activate A/B testing for this placement.

How A/B Testing Works:

• System tracks impressions (how many times each overlay displays)
• Tracks clicks (how many times each overlay is clicked)
• Calculates click-through rate (CTR) for each overlay
• Data visible in placement dashboard

Use Cases:

• Test different messaging approaches
• Compare offers and promotions
• Optimize headline effectiveness
• Identify best-performing designs

Testing Methodology:

1. Create 2-3 overlays with different content/approaches
2. Enable rotation with equal percentages
3. Enable A/B testing
4. Let campaign run for sufficient traffic (minimum 100-200 impressions each)
5. Analyze results
6. Keep winner, create new challenger, repeat

Best Practices:

• Test one variable at a time (headline, offer, design)
• Allow sufficient sample size before drawing conclusions
• Run tests for complete weeks to account for traffic patterns
• Document results for future campaigns

Saving Overlay Placements

After configuring all settings:

1. Review all configuration options
2. Verify location targeting is correct
3. Confirm triggers are appropriate
4. Check overlay content is finalized
5. Click Submit to create the placement

Initial Status Recommendation: Save new placements as “Inactive,” preview them if possible, then change status to “Active” when ready for live deployment.

What Happens Next:

• Placement is saved to database
• If Active, overlays begin displaying immediately based on triggers
• Placement appears in Overlay Placements dashboard
• You can edit or delete anytime

Overlay Placements Dashboard

Navigate to the Overlay Placements tab to view all your overlay configurations.

Dashboard Columns:

• Title: Placement name
• Tags: Organizational labels
• Overlay Type: Internal or External
• Overlay/URL: Overlay name and landing URL
• Status: Active or Inactive
• Display Condition: Triggers configured (time, scroll, exit, inactivity)
• Size: Small, Medium, or Large
• Location: Where overlay displays
• Created At: Creation date
• A/B Tests: Whether A/B testing is enabled
• Edit/Delete: Management options

Filtering Options:

• Filter by tags
• Show entries per page (10, 25, 50, 100)
• Search by title or keyword

Managing Placements:

• Edit: Modify any setting, change status, update triggers
• Delete: Remove placement entirely (overlay content remains in Manage Overlays)

Status Toggle: Quickly activate or deactivate placements by editing and changing status dropdown.

Overlay Best Practices

Don’t Overuse Overlays
Too many popups create negative user experience and can harm SEO (Google penalizes intrusive interstitials on mobile).

Recommendations:

• Maximum 1 overlay per page
• Use “Once Per Session” display frequency
• Provide easy close options
• Ensure mobile-friendly design

Timing Strategy
Choose trigger timing based on content and goals:

• Immediate (0 seconds): Only for critical announcements
• 3-5 seconds: Standard promotions
• 10-15 seconds: Engaged visitor offers
• Exit intent: Last-chance offers
• Scroll-based: Content-specific triggers

Message Relevance
Match overlay content to page context:

• Good: Dental appointment booking overlay on dental implant article
• Bad: Unrelated product promotion on blog post

Value Proposition
Every overlay should offer clear value:

• Special discount
• Free resource
• Exclusive content
• Helpful information
• Time-limited offer

Mobile Optimization
Test overlays thoroughly on mobile devices:

• Ensure readable text size
• Check button clickability
• Verify close option is accessible
• Confirm no layout breaking
• Test on multiple screen sizes

A/B Testing Discipline
When running A/B tests:

• Change only one variable per test
• Allow sufficient traffic before conclusions
• Document results
• Continuously optimize based on data

Frequency Caps
Respect visitor experience with frequency settings:

• Never: All of the Time + immediate trigger (very intrusive)
• Rarely: Once Per Browser for one-time messages
• Usually: Once Per Session for standard campaigns

Clear Call-to-Action
Every overlay should have an obvious next step:

• Click button to claim offer
• Enter email to subscribe
• Call phone number
• Visit specific landing page