Popup Settings

Overview

The Popup Settings module provides a comprehensive interface for creating and managing customizable popup modals that appear on public pages. This powerful engagement tool allows you to display announcements, promotions, newsletter signups, or important messages to your website visitors through an attractive, non-intrusive popup modal.

The popup system offers extensive customization options including content, appearance, timing, and behavior settings. You can control when the popup appears (time delay, exit intent, or scroll-based), how often visitors see it, and how it looks with various size, position, and animation options. All settings are managed through a user-friendly admin interface with real-time preview functionality.

Use this module to increase user engagement, promote special offers, collect email signups, display important announcements, or guide visitors to key areas of your website.

Accessing Popup Settings

Navigation path: Dashboard > Appearance > Popup Settings

Required permission: landing-page.view

Key Features

• Enable/Disable Toggle: Quickly turn popup on or off without losing settings
• Content Customization: Edit title, message content, and optional header image
• Button Configuration: Customize button text and optional URL link
• Multiple Trigger Types: Choose when to show popup (time delay, exit intent, scroll percentage)
• Frequency Control: Set how often visitors see the popup (once, daily, always)
• Appearance Options: Configure position, size, animation, and background overlay
• Close Button Control: Option to show or hide the X close button
• Real-time Preview: Test popup appearance and behavior before publishing
• Image Upload: Add optional header images with automatic optimization
• Theme-Aware Design: Automatically adapts to light and dark modes
• Mobile Responsive: Optimized display on all device sizes
• Cookie-Based Tracking: Respects visitor preferences with frequency control
• Keyboard Support: ESC key closes popup for better accessibility

Main Interface

Settings Page Layout

The Popup Settings page is organized into five main sections, each presented in a distinct card:

1. Enable/Disable Toggle (Top card)

   • Master switch to activate or deactivate the popup

2. Content Settings (Orange gradient with edit icon)

   • Popup title, message content, and optional header image

3. Button Settings (Orange gradient with cursor icon)

   • Button text, URL, and close button visibility

4. Behavior Settings (Orange gradient with sliders icon)

   • Trigger type, timing, and frequency options

5. Appearance Settings (Orange gradient with palette icon)

   • Position, size, animation, and background overlay

Each section includes:

• Clear section headers with descriptive icons
• Organized input fields with labels and placeholders
• Helpful descriptions and recommendations
• Preview and save buttons at the top and bottom

Actions Available

• Enable/Disable Popup: Toggle popup visibility on public pages
• Edit Content: Modify title, message, and upload images
• Configure Button: Set button text and optional link URL
• Choose Trigger Type: Select when popup appears (delay, exit intent, scroll)
• Set Frequency: Control how often visitors see the popup
• Customize Appearance: Adjust position, size, animation, and overlay
• Preview Popup: Open preview page to test popup in new tab
• Delete Image: Remove uploaded header image
• Save Settings: Update all modifications at once
• Cancel: Discard changes and return to dashboard

Common Tasks

Task 1: Creating a Basic Welcome Popup

Create a simple welcome message for first-time visitors:

1. Navigate to Dashboard > Appearance > Popup Settings
2. Toggle "Enable Popup" to ON (switch turns gradient orange)
3. In the Content Settings section:
   • Popup Title: Enter "Welcome to Our Website!"
   • Popup Content: Enter your welcome message (e.g., "Thank you for visiting. Explore our features and feel free to contact us.")
4. In the Button Settings section:
   • Button Text: Enter "Get Started"
   • Button URL: Leave empty or enter "/" for homepage
5. In the Behavior Settings section:
   • Trigger Type: Select "Time Delay"
   • Delay: Set to 3 seconds
   • Show Frequency: Select "Once (per browser)"
6. Click "Preview Popup" to test
7. Click "Save Settings"

Result: A welcome popup appears 3 seconds after page load for first-time visitors only.

Task 2: Setting Up an Exit Intent Offer

Create a popup that appears when visitors are about to leave:

1. Go to Dashboard > Appearance > Popup Settings
2. Enable the popup with the toggle switch
3. In Content Settings:
   • Popup Title: "Wait! Don't Miss Out 🎁"
   • Popup Content: "Get 20% off your first order with code FIRST20"
   • Popup Image: Upload a promotional banner (optional)
4. In Button Settings:
   • Button Text: "Claim Discount"
   • Button URL: Enter your shop or products page URL
5. In Behavior Settings:
   • Trigger Type: Select "Exit Intent"
   • Show Frequency: Select "Once (per browser)"
6. In Appearance Settings:
   • Position: "Center"
   • Size: "Large"
   • Animation: "Zoom"
7. Click "Save Settings"

Result: When visitors move their cursor toward the browser top (to close the tab) or pull down on mobile, the offer popup appears.

Best for: Reducing bounce rate, last-chance offers, cart abandonment prevention

Task 3: Creating a Scroll-Based Newsletter Signup

Show a newsletter signup after visitors engage with your content:

1. Navigate to Dashboard > Appearance > Popup Settings
2. Enable the popup
3. In Content Settings:
   • Popup Title: "Enjoying This Content?"
   • Popup Content: "Subscribe to our newsletter and get weekly articles delivered to your inbox."
4. In Button Settings:
   • Button Text: "Subscribe Now"
   • Button URL: Enter your newsletter signup page URL
5. In Behavior Settings:
   • Trigger Type: Select "Scroll Percentage"
   • Scroll Percentage: Set to 50%
   • Show Frequency: Select "Daily"
6. Click "Save Settings"

Result: After visitors scroll halfway down the page, the newsletter popup appears once per day.

Best for: Engaged users, content sites, blog posts, long-form pages

Task 4: Adding a Header Image to Popup

Enhance your popup with a visual header image:

1. Go to Dashboard > Appearance > Popup Settings
2. In the Content Settings section, locate "Popup Image (Optional)"
3. Click "Choose File" and select an image from your computer
   • Recommended size: 800x400px
   • Supported formats: JPG, PNG, WebP, GIF
4. The image uploads automatically when you save
5. To preview the image before saving, click "Preview Popup"
6. Click "Save Settings"

To remove an image:

1. Click the red X button in the top-right corner of the image thumbnail
2. Confirm deletion in the popup dialog
3. The page reloads with the image removed

Result: The popup displays your image at the top, above the title and content.

Tips:

• Use high-quality images optimized for web
• Keep file size under 500KB for fast loading
• Use images that complement your message
• Test on mobile devices to ensure proper display

Task 5: Configuring Popup Frequency

Control how often visitors see your popup:

1. Navigate to Dashboard > Appearance > Popup Settings
2. In the Behavior Settings section, find "Show Frequency"
3. Select one of three options:
   • Once (per browser): Shows only once, tracked by cookie for 365 days
   • Daily: Shows once per day, cookie expires after 24 hours
   • Always: Shows on every page load (no cookie tracking)
4. Click "Save Settings"

Result: The popup respects the frequency setting using browser cookies.

When to use each option:

• Once: Welcome messages, first-time offers, important announcements
• Daily: Newsletter signups, daily deals, recurring promotions
• Always: Testing/debugging only (can be intrusive for users)

Note: Visitors can clear cookies to see the popup again, or you can test in incognito/private browsing mode.

Task 6: Customizing Popup Appearance

Adjust the visual presentation of your popup:

1. Go to Dashboard > Appearance > Popup Settings

2. In the Appearance Settings section, configure:

   Position:

   • Center: Middle of screen (default, most common)
   • Top: Top of screen (less intrusive)
   • Bottom: Bottom of screen (mobile-friendly)

   Size:

   • Small: Compact, minimal content
   • Medium: Standard size (default)
   • Large: More content space
   • Extra Large: Maximum width

   Animation:

   • Fade: Smooth opacity transition
   • Slide: Slides in from top
   • Zoom: Scales up from center

   Background Overlay:

   • Toggle ON: Dark semi-transparent background (recommended)
   • Toggle OFF: No background, popup only

3. Click "Preview Popup" to test different combinations

4. Click "Save Settings" when satisfied

Result: The popup displays with your chosen visual style.

Recommendations:

• Use Center + Medium + Fade for general announcements
• Use Top + Small + Slide for non-intrusive notifications
• Use Center + Large + Zoom for important offers
• Always enable Background Overlay for better focus

Task 7: Testing Popup with Preview

Test your popup before publishing to visitors:

1. Navigate to Dashboard > Appearance > Popup Settings
2. Configure your popup settings (content, behavior, appearance)
3. Click the "Preview Popup" button in the top-right corner
4. A new tab opens with a sample page
5. The popup appears based on your trigger settings:
   • Time Delay: Wait for the configured seconds
   • Exit Intent: Move cursor to top of browser
   • Scroll: Scroll down to the configured percentage
6. Test the following:
   • Content displays correctly
   • Image loads properly (if added)
   • Button works and links correctly
   • Close button functions (if enabled)
   • Animation looks smooth
   • Responsive on mobile (resize browser)
7. Close the preview tab and adjust settings if needed
8. Click "Save Settings" when ready to publish

Result: You can safely test popup behavior without affecting live visitors.

Tips:

• Test in both light and dark modes
• Try different browser sizes for responsive testing
• Clear cookies between tests to see frequency behavior
• Test on actual mobile devices for best results

Settings and Options

Enable/Disable Setting

Enable Popup (popup_enabled)

• Type: Toggle switch
• Required: No
• Default: Disabled (OFF)
• Description: Master control to show or hide popup on public pages
• Values:
  • ON (1): Popup appears on public pages based on trigger settings
  • OFF (0): Popup is completely hidden, settings are preserved
• Note: Disabling preserves all settings for future use

Content Settings

Popup Title (popup_title)

• Type: Text input
• Required: No
• Max Length: 255 characters
• Default: "Welcome!"
• Description: Main heading displayed at the top of the popup
• Example: "Welcome to Our Website!", "Special Offer 🎁", "Stay Updated!"
• Display: Large, bold text with theme-aware colors

Popup Content (popup_content)

• Type: Textarea
• Required: No
• Rows: 4
• Description: Main message or description text
• Example: "Thank you for visiting. Explore our features and feel free to contact us."
• Display: Regular text below the title, supports multiple lines
• Tip: Keep concise (2-3 sentences) for better engagement

Popup Image (popup_image)

• Type: File upload (image)
• Required: No
• Accepted Formats: JPG, PNG, WebP, GIF
• Recommended Size: 800x400px (2:1 aspect ratio)
• Max File Size: Depends on server configuration (typically 2-10MB)
• Description: Optional header image displayed above title
• Display: Full-width image at top of popup, rounded corners
• Storage: Uploaded to public/my-storage/uploads/settings/
• Features:
  • Automatic thumbnail generation
  • Delete button for easy removal
  • Preview before saving
• Note: Leave empty for text-only popup

Button Settings

Button Text (popup_button_text)

• Type: Text input
• Required: No
• Max Length: 255 characters
• Default: "Got it!"
• Description: Text displayed on the call-to-action button
• Example: "Get Started", "Learn More", "Subscribe Now", "Claim Offer"
• Display: Gradient button with hover effects
• Tip: Use action-oriented text (verbs)

Button URL (popup_button_url)

• Type: URL input
• Required: No
• Format: Valid URL (http:// or https://)
• Description: Optional link destination when button is clicked
• Example: "https://example.com/shop", "/newsletter", "/contact"
• Behavior:
  • If provided: Opens URL and closes popup
  • If empty: Just closes popup
• Note: Can use relative URLs (e.g., "/about") or absolute URLs

Show Close (X) Button (popup_show_close_button)

• Type: Toggle switch
• Required: No
• Default: Enabled (ON)
• Description: Display X button in top-right corner for closing popup
• Values:
  • ON (1): X button visible, users can close popup
  • OFF (0): No X button, users must click main button or press ESC
• Accessibility: ESC key always closes popup regardless of this setting
• Recommendation: Keep enabled for better user experience

Behavior Settings

Trigger Type (popup_trigger_type)

• Type: Dropdown select

• Required: Yes

• Default: "Time Delay"

• Description: Determines when the popup appears

• Options:

  Time Delay (delay):

  • Shows after specified number of seconds from page load
  • Best for: Welcome messages, general announcements
  • Additional setting: Delay (seconds)

  Exit Intent (exit_intent):

  • Shows when user moves cursor toward browser top (desktop) or pulls down (mobile)
  • Best for: Retention, last-chance offers, reducing bounce rate
  • No additional settings needed
  • Info box displays explanation when selected

  Scroll Percentage (scroll):

  • Shows after user scrolls specified percentage of page
  • Best for: Engaged users, content sites, long pages
  • Additional setting: Scroll Percentage (0-100%)

Delay (seconds) (popup_delay)

• Type: Number input
• Required: Only for Time Delay trigger
• Min: 0
• Max: 60
• Default: 2
• Description: Number of seconds to wait before showing popup
• Display: Only visible when Trigger Type is "Time Delay"
• Recommendations:
  • 2-3 seconds: Quick announcements
  • 5-7 seconds: Newsletter signups
  • 10-15 seconds: Special offers
• Note: 0 seconds shows immediately (not recommended)

Scroll Percentage (popup_scroll_percentage)

• Type: Number input
• Required: Only for Scroll trigger
• Min: 0
• Max: 100
• Default: 50
• Description: Percentage of page scrolled before showing popup
• Display: Only visible when Trigger Type is "Scroll Percentage"
• Recommendations:
  • 25%: Early engagement
  • 50%: Halfway through content (default)
  • 75%: Near end of page
  • 90%: Almost finished reading
• Note: Won't trigger on short pages where scrolling isn't needed

Show Frequency (popup_frequency)

• Type: Dropdown select

• Required: Yes

• Default: "Once (per browser)"

• Description: How often visitors see the popup

• Options:

  Once (once):

  • Shows one time per browser
  • Cookie expires: 365 days
  • Best for: Welcome messages, first-time offers

  Daily (daily):

  • Shows once per day
  • Cookie expires: 24 hours
  • Best for: Daily deals, recurring promotions

  Always (always):

  • Shows on every page load
  • No cookie tracking
  • Best for: Testing only (can be intrusive)

• Cookie Name: popup_shown

• Note: Users can clear cookies to reset frequency

Appearance Settings

Position (popup_position)

• Type: Dropdown select
• Required: Yes
• Default: "Center"
• Description: Vertical position of popup on screen
• Options:
  • Center (center): Middle of screen, most common
  • Top (top): Top of screen, less intrusive
  • Bottom (bottom): Bottom of screen, mobile-friendly
• Recommendation: Use Center for important messages, Top/Bottom for notifications

Size (popup_size)

• Type: Dropdown select
• Required: Yes
• Default: "Medium"
• Description: Width of the popup modal
• Options:
  • Small (sm): ~400px max width, compact
  • Medium (md): ~500px max width, standard
  • Large (lg): ~600px max width, more content
  • Extra Large (xl): ~700px max width, maximum space
• Note: All sizes are responsive and adapt to mobile screens

Animation (popup_animation)

• Type: Dropdown select
• Required: Yes
• Default: "Fade"
• Description: Entry animation when popup appears
• Options:
  • Fade (fade): Smooth opacity transition, subtle
  • Slide (slide): Slides down from top, noticeable
  • Zoom (zoom): Scales up from center, dramatic
• Performance: All animations use CSS transitions (hardware accelerated)
• Recommendation: Use Fade for professional look, Zoom for attention-grabbing

Background Overlay (popup_background_overlay)

• Type: Toggle switch
• Required: No
• Default: Enabled (ON)
• Description: Show dark semi-transparent background behind popup
• Values:
  • ON (1): Dark overlay covers page content
  • OFF (0): Popup appears without background
• Opacity: 50% black overlay when enabled
• Recommendation: Keep enabled for better focus and readability

Permissions

The Popup Settings module uses the following permission:

• landing-page.view: Can view and edit popup settings

Note: This permission is shared with Landing Page, About Us Page, and Contact Us Page modules. Users with this permission can access all special page customization interfaces.

Preview Functionality

The preview feature allows you to test your popup before publishing:

Preview Page Features

• Sample Content: Displays placeholder text to simulate a real page
• Live Popup: Shows your configured popup with actual settings
• Trigger Testing: Test all trigger types (delay, exit intent, scroll)
• Responsive Testing: Resize browser to test mobile display
• Theme Testing: Toggle dark mode to test theme compatibility
• Action Buttons:
  • Close Preview: Closes the preview tab
  • Reload Preview: Refreshes to test popup again

Testing Different Triggers

Time Delay:

1. Open preview
2. Wait for configured seconds
3. Popup appears automatically

Exit Intent:

1. Open preview
2. Move cursor quickly to top of browser window
3. Popup appears when cursor reaches top 50px

Scroll Percentage:

1. Open preview
2. Scroll down the page slowly
3. Popup appears when reaching configured percentage

Preview Tips

• Clear cookies between tests to reset frequency
• Test in incognito mode for fresh session
• Try different browser sizes for responsive testing
• Test on actual mobile devices for best accuracy
• Check both light and dark modes
• Verify button links work correctly
• Test close button and ESC key functionality

Tips and Best Practices

• Keep It Simple: Short title (3-5 words) and concise message (2-3 sentences)
• Clear Call-to-Action: Use action-oriented button text ("Get Started", not "Click Here")
• Appropriate Timing: 2-5 second delay is optimal for time-based triggers
• Respect Users: Use "Once" or "Daily" frequency, avoid "Always"
• Mobile First: Test on mobile devices, popups should be easily dismissible
• Exit Intent for Offers: Use exit intent trigger for discounts and special offers
• Scroll for Engagement: Use scroll trigger for newsletter signups on content pages
• Optimize Images: Compress images to under 200KB for fast loading
• Test Thoroughly: Always preview before publishing to live site
• Monitor Performance: Track conversion rates and adjust messaging
• A/B Testing: Try different messages, triggers, and timings
• Accessibility: Ensure popup is keyboard accessible (ESC to close)
• Clear Value: Communicate clear benefit in your message
• Professional Design: Use high-quality images and proper grammar
• Avoid Overuse: Don't show multiple popups on same page
• Update Regularly: Keep content fresh and relevant
• Seasonal Content: Update for holidays, events, or promotions
• Privacy Compliance: Add privacy policy link if collecting data
• Loading Speed: Popup loads asynchronously, doesn't block page load
• Cookie Consent: Popup respects cookie consent settings