FramePops Trigger Installation Guide

Quick Start & Installation

What is the FramePops Trigger System?

The FramePops trigger system is a page-based overlay management system that allows you to display popups and overlays on specific pages. It consists of two main components:

1. PageOverlay - A utility component that manages all overlays on a page

2. Trigger Components - Individual components that create different types of popups (TimedOverlay, ExitIntent, HoverTrigger, ClickTrigger)

Core Functionality

• Page-Based Configuration - Each page can have its own overlay setup

• Priority Management - Handles multiple overlays using a hierarchy system

• Content ID System - Controls how often overlays appear using unique identifiers

• Cookie Management - Prevents overlays from showing too frequently

• Scroll Lock - Prevents page scrolling when overlays are active

Installation Steps

1. Add PageOverlay to your page - Insert the PageOverlay component to your Framer page

2. Position at page level - Place it outside any frames (at the page level)

3. Set Active property to "YES" - Enable the overlay system

4. Add trigger components - Add TimedOverlay, Exit Intent, Hover Trigger, or Click Trigger components anywhere on your page

5. Configure trigger settings - Set up timing, content, styling, and cookie preferences

6. Test in preview mode - Ensure everything works correctly

Prerequisites

PageOverlay and trigger components work together - neither works without the other:

// PageOverlay does not work standalone and must be paired with trigger components
// Trigger components (TimedOverlay, ExitIntent, etc.) do not work without PageOverlay
// Both components are required for the system to function

Important Setup Notes:

• Must be positioned at the top of the page hierarchy

• Each page can have its own overlay configuration

• Different pages can have different popup strategies

Properties

Page-Based Configuration & Use Cases

How Page-Based Configuration Works

The FramePops trigger system is designed to work per page, not site-wide. This allows you to create different popup strategies for different pages:

Homepage Strategy:

• Welcome popup for new visitors

• Newsletter signup for returning users

• Exit intent for engagement

Blog Page Strategy:

• Content-related popups

• Newsletter signup with different messaging

• Related article suggestions

Product Page Strategy:

• Discount offers

• Product recommendations

• Cart abandonment prevention

Setting Up Different Page Configurations

Step 1: Plan Your Strategy

• Identify which pages need popups

• Determine what type of popup works best for each page

• Plan your content and messaging

Step 2: Configure Each Page

• Add PageOverlay to each page that needs popups

• Add appropriate trigger components

• Set unique Content IDs for each page's popups

• Configure cookie settings per page

Step 3: Test Your Setup

• Test each page individually

• Verify popups work as expected

• Check that cookie limits are respected

Content ID System

How Content IDs Work

The Content ID system allows you to control how often each popup appears by giving each popup a unique identifier. This prevents popups from showing repeatedly while allowing different popups to work independently.

The Basic Rule:

• Same Content ID = Same cookie limit (they share the same "show frequency")

• Different Content ID = Different cookie limit (they work independently)

Real-World Examples

Example 1: Multiple Popups with Different IDs

• Homepage TimedOverlay: Content ID "homepage-welcome" → shows once per session

• Blog TimedOverlay: Content ID "blog-newsletter" → shows once per session

• Result: Both can show because they have different Content IDs

Example 2: Multiple Popups with Same ID

• Homepage TimedOverlay: Content ID "newsletter-signup" → shows once per session

• Blog TimedOverlay: Content ID "newsletter-signup" → shows once per session

• Result: Only one will show because they share the same Content ID

Content ID Best Practices

Good Examples:

• homepage-welcome - Welcome popup on homepage

• blog-newsletter - Newsletter signup on blog

• product-discount - Discount offer on product pages

• checkout-upsell - Upsell offer during checkout

Bad Examples:

• popup - Too generic, might conflict

• overlay - Too generic, might conflict

• test - Not descriptive

Cookie System & Show Frequency

Cookie Types Available

Testing Your Setup

// For testing purposes, always set cookie type to "Always Show"
// This ensures your popups work correctly during development
// Once you're satisfied with the functionality, change it to your desired frequency

Testing Steps:

1. Set cookie type to "Always Show"

2. Test your popup functionality

3. Verify triggers work as expected

4. Change to desired frequency for production

Real-World Use Cases

E-commerce Site:

• Homepage: Content ID "homepage-welcome" → Once per Session

• Product Page: Content ID "product-discount" → Once per 7 Days

• Checkout Page: Content ID "checkout-upsell" → Once per Session

Blog/Content Site:

• Homepage: Content ID "homepage-newsletter" → Once per Session

• Blog Post: Content ID "blog-newsletter" → Once per Session

• About Page: Content ID "about-contact" → Once per 30 Days

Priority System

How Priority Works

PageOverlay uses a 4-level priority hierarchy to manage multiple overlays. The priority system is designed for when site visitors intentionally or unintentionally trigger multiple overlays.

Priority Rules

• Higher priority overlays always replace lower priority ones

• Lower priority overlays are blocked when higher priority ones are active

• Same priority overlays can replace each other

• Only one overlay is visible at any time

Real-World Examples

Scenario 1: User Journey

• User visits page → TimedOverlay shows (Priority 1)

• User hovers over button → HoverTrigger shows (Priority 2) - replaces TimedOverlay

• User tries to leave → ExitIntent shows (Priority 4) - replaces HoverTrigger

Scenario 2: Multiple Click Triggers

• User clicks "Newsletter" button → ClickTrigger shows (Priority 3)

• User clicks "Contact" button → ClickTrigger shows (Priority 3) - replaces previous one

• Both are same priority, so the latest one wins

Best Practices for Priority

• Use high priority sparingly - Exit Intent can be intrusive

• Consider user journey - what's most important at each stage

• Test combinations - ensure your trigger mix works well together

• Don't overuse triggers - too many can create a poor user experience

Trigger Components Overview

TimedOverlay (PageloadTrigger)

What it does: Shows a popup after a specified delay when the page loads.

Key Properties:

• Delay (seconds) - How long to wait before showing

• Content ID - Unique identifier for cookie management

• Show Frequency - How often it can appear

• Scroll Lock - Whether to lock page scrolling

Use Cases:

• Welcome messages

• Newsletter signups

• Product announcements

• Discount offers

ExitIntent

What it does: Shows a popup when the user tries to leave the page.

Key Properties:

• Sensitivity (px) - How close to top edge triggers the popup

• Content ID - Unique identifier for cookie management

• Show Frequency - How often it can appear

• Mobile disabled - Automatically disabled on mobile devices

Use Cases:

• Last chance offers

• Newsletter signups

• Feedback requests

• Discount codes

HoverTrigger

What it does: Shows a popup when the user hovers over a trigger element.

Key Properties:

• Trigger Element - The element that triggers the popup

• Popup Content - The content to show in the popup

• Retrigger Settings - Whether it can be triggered multiple times

• Mobile behavior - Uses scroll-based triggering on mobile

Use Cases:

• Product information

• Additional details

• Quick actions

• Interactive content

ClickTrigger

What it does: Shows a popup when the user clicks a trigger element.

Key Properties:

• Trigger Element - The element that triggers the popup

• Popup Content - The content to show in the popup

• Animation effects - How the popup appears

Use Cases:

• Modal dialogs

• Form submissions

• Product details

• Contact forms

Best Practices & Advanced Usage

Page Setup

• One PageOverlay per page that uses trigger components

• Place at page level (outside any frames)

• Configure once and it works for all triggers on that page

Content Strategy

• Use unique Content IDs for different popup purposes

• Don't overuse high priority triggers - they can be intrusive

• Consider user journey - what's most important at each stage

• Test combinations - ensure your trigger mix works well together

Performance

• PageOverlay only works in preview/live mode - not on canvas

• Individual components handle canvas preview with "Show on Canvas" property

• Automatic cleanup when navigating between pages

Testing Strategy

1. Test each overlay individually first

2. Test combinations to ensure priority works correctly

3. Test cookie limits by clearing browser data

4. Test on different devices and browsers

5. Test scroll lock functionality

Troubleshooting

Common Issues

Adding PageOverlay to a Framer page Template

the PageOverlay component needs to inserted directly on the page and won’t work when it’s added to a Framer page template.

Overlay Not Showing:

• Check if PageOverlay is placed at page level (outside frames)

• Verify trigger component is correctly setup

• Check if cookie limits are blocking the overlay

• Ensure Active property of the PageOverlay component is set to "YES"

Multiple Overlays Showing:

• Ensure only one PageOverlay per page

• Check that Content IDs are unique (unless intentionally set otherwise)

Page Freezes When Active is Set to "NO":

• This happens when trigger components are still active but PageOverlay is disabled

• Ensure trigger components are properly configured or temporarily disable them

Overlay Showing on Canvas:

• PageOverlay should never show anything on canvas

• Use individual trigger components' "Show on Canvas" for design preview

Cookie Limits Not Working:

• Ensure Content ID is set and unique

• Check cookie type is selected

• Verify browser allows cookies/localStorage

Scroll Lock Not Working:

• Check for smooth scroll components that might interfere

• Verify scroll lock is enabled in trigger component settings

Debug Tips

• Test in preview mode first, then live

• Clear browser data to reset cookie limits

• use incognito browser for reliable testing

• Use unique Content IDs for different overlays

• Test scroll lock manually before debugging overlay issues

Technical Details

Event System

• Trigger components send universalOverlay events

• PageOverlay listens for events and manages display

• Priority comparison happens before showing overlays

• Cookie checking happens after priority comparison

State Management

• Single overlay state maintained at any time

• Clean transitions between different overlay types

• Automatic cleanup on page navigation

• Proper scroll lock management

Browser Compatibility

• Works in all modern browsers

• Graceful fallbacks for older browsers

• Mobile-optimized behavior

• Touch-friendly interactions