How To Install The Pageload Trigger Component

The Pageload Trigger automatically displays popups to visitors after they have been on your page for a set time. This guide covers installation, configuration, and troubleshooting for this powerful conversion tool.

Quick Start

Make sure the PageOverlay component is active on the page - Insert PageOverlay at page level (outside frames) and set Active to "YES"
Insert Pageload Trigger at page level - Add the component at page level (outside frames)
Set your timing - Configure delay (0-30 seconds) for when popup should appear
Add popup content - Place your popup content in the Popup Content slot
Configure frequency - Choose how often to show the popup (Always Show, Once per Session, etc.)
Test in preview mode - Wait for the specified delay to see your popup in action

Prerequisites

The Pageload Trigger requires PageOverlay to function properly:

// PageOverlay must be installed and active for Pageload Trigger to work
// PageOverlay must be positioned at page level (outside any frames)
// Both components work together - neither works without the other

Important Setup Notes:

Both PageOverlay and Pageload Trigger must be positioned at page level (outside frames)
Component works on all devices including mobile

Properties

Property	Description
Show on Canvas	Display the overlay on Framer canvas for customization
Popup Content	Slot for your popup content frame
Overlay Color	Background color of the overlay
Blur Amount	Amount of background blur effect (0-40px)
Delay (s)	Time delay before popup appears (0-30 seconds)
Scroll Lock	Lock page scrolling when overlay is active
Close Btn Position	Position of close button (inside/outside popup)
Close Btn Inset	Distance of close button from popup edge
Close Btn Size	Size of the close button (20-80px)
Close Btn BG	Background color of close button
Close Btn Icon	Color of close button icon
Animation	Animation effect when popup appears (zoom, fade, slide)
Content ID	Unique identifier for cookie management
Show Frequency	How often to show popup (session, browser, time-based, always)

Use Cases & Examples

Ecommerce Stores:

Show special offers after 5 seconds of browsing
Display discount codes when visitors spend time on product pages
Capture email signups with welcome popups

Landing Pages:

Present lead magnets after visitors read content (10-15 second delay)
Show testimonials or social proof after initial engagement
Display exit offers before visitors leave

Service Businesses:

Offer free consultations after visitors explore your services
Show case studies or portfolio highlights
Capture contact information with timed forms

Recommended Timing:

3-5 seconds: Quick attention grabbers, urgent offers
8-12 seconds: Balanced approach, let visitors browse first
15-20 seconds: For content-heavy pages, after engagement

Troubleshooting

Issue: Popup does not appear after delay

Ensure PageOverlay component is installed at page level and Active property is set to "YES". Check that popup content is added to the Popup Content slot. For testing purposes, set Show Frequency to "Always Show".

Issue: Popup appears too frequently or not at all

Check the Show Frequency setting. Use "Always Show" for testing, then switch to "Once per Session" or time-based options for production. Verify Content ID is unique for each page.

Issue: PageOverlay not working

Ensure PageOverlay is added directly to the page (not in a Framer template) and positioned at page level outside any frames.

Issue: Scroll lock not working

Ensure Scroll Lock is enabled in properties. Note that scroll lock may not work properly with Smooth Scroll components.

Issue: Close button not visible

Check Close Btn Size and Close Btn BG color settings. Ensure the button color contrasts with your popup background.

Issue: Mobile display issues

The component works on mobile, but ensure your popup content is mobile-responsive. Test on actual devices, not just Framer mobile preview.

Issue: Cookie management not working

Verify Content ID is set and unique for each page. Check that Show Frequency is not set to "Always Show" if you want cookie-based control.

Component Doc

Quick start tutorial