Display Your Popup

Once you've designed your popup, the next step is to configure when and where it appears on your website. This guide will walk you through setting up domains, page targeting, triggers, and advanced display options.

Prerequisites

Before you can display a popup, you must have added a domain to your account. If you haven't done this yet, follow the steps in our Quick Start Guide to add your first domain.

Configuration Steps

Step 1: Add Domain to Popup

1. Open your popup in the editor
2. Navigate to the Settings tab in the sidebar
3. In the Domain section, select a domain from the dropdown
4. Click the + button to add the domain to your popup
5. The domain will now appear in the list below, indicating it's been assigned to this popup

Step 2: Choose Which Pages to Display On

After adding a domain, you need to decide where on your website the popup should appear:

1. In the Settings tab, find the Page Targeting section
2. Select one of the following options:
   • All Pages: The popup will appear on every page of your website
   • Specific Pages: The popup will only appear on pages matching the paths you specify
3. If you selected Specific Pages, add URL paths (one per line) where you want the popup to appear
   • Use wildcards (*) to match multiple pages (e.g., /blog/* matches all blog posts)
   • Examples:
     • / - Homepage only
     • /pricing - Pricing page only
     • /blog/* - All blog posts
     • /products/* - All product pages

Step 3: Choose a Trigger

Select what action should trigger your popup to appear. See the Trigger Options section below for detailed information about each trigger type.

Trigger Options

In the Settings tab, under Popup Trigger, you can choose from the following trigger types:

Exit Intent

The popup appears when the user attempts to leave the page (e.g., moving their mouse cursor toward the browser's back button or address bar). This is perfect for capturing users who are about to leave your site.

Page Load

The popup appears after the page has finished loading. You can optionally add a delay before the popup appears.

Settings:

• Delay (seconds): Wait a specified number of seconds after page load before showing the popup (optional, default: 0)

Scroll Percentage

The popup appears after the user has scrolled a certain percentage down the page. This ensures users have engaged with your content before seeing the popup.

Settings:

• Scroll Percentage: The percentage of the page the user must scroll before the popup appears (e.g., 50% means halfway down the page)

Element Click

The popup appears when a user clicks on a specific element on your page. You provide a CSS selector, and EasePop automatically attaches a click listener to that element.

Settings:

• CSS Selector: The CSS selector for the element that should trigger the popup (e.g., .cta-button, #signup-link, .product-card)

Example selectors:

• .my-button - Any element with class my-button
• #signup - Element with ID signup
• button[data-trigger] - Any button with a data-trigger attribute
• .product-card:first-child - First product card element

JavaScript API

Trigger the popup programmatically from your own JavaScript code. EasePop makes window.easepop available globally, which you can use to show popups on demand.

Usage:

// Show a specific popup by ID
window.easepop.showPopup('popup-id');

Additional Display Settings

Auto-Close

Configure your popup to automatically close after a specified period of inactivity.

Settings:

• Auto-close after (seconds): The number of seconds of no user interaction before the popup automatically closes
• Set to 0 or leave empty to disable auto-close

Reappear Settings

Control how often the popup can appear to the same user.

Options:

• Multiple times: The popup will appear every time the trigger condition is met.
• Once per session: The popup will only appear once per session, even if the trigger condition is met multiple times
• Once per page visit: The popup will only appear once on one visit of the page

Visitor Targeting

Show your popup only to new visitors or only to returning visitors. This feature uses a small flag stored in the user's localStorage to distinguish visitor types.

Options:

• All Visitors: Show the popup to everyone (default)
• New Visitors Only: Show only to users who haven't visited before
• Returning Visitors Only: Show only to users who have visited previously

GDPR Compliance: If you use visitor targeting (any option other than "All Visitors"), a flag is stored in the user's localStorage. While this flag doesn't contain personally identifiable information, you may be required to mention this in your site's consent notice under GDPR regulations. For more information, see our Compliance & Privacy documentation.

Device Targeting

Control which device types can see your popup.

Options:

• Desktop: Show on desktop computers
• Tablet: Show on tablet devices
• Mobile: Show on mobile phones
• You can select multiple device types (default: all are selected)

Best Practices

1. Start Simple: Begin with a single trigger type and test how it performs before adding complexity
2. Respect User Experience: Avoid overly aggressive triggers that might annoy users
3. Test on Different Devices: Make sure your popup works well on all device types you're targeting
4. Monitor Analytics: Use the Analytics Dashboard to see which triggers perform best
5. Consider GDPR: If using visitor targeting, ensure your privacy policy mentions localStorage usage

Next Steps