Get Started

Email: After you purchase the extension from our store, you will receive an email containing a link to download the extension.

Store: Alternatively, you can download the extension from the "Downloads" section in our store. If you are a new user, you need to create an account using the same email address you used for the purchase.

Click to download the extension package: AutoOnPageLoadPopup_UNZIP.zip

Unzipping the Package

Use any file unzipper tool or WinRAR to unzip the AutoOnPageLoadPopup_UNZIP.zip package. After unzipping, you will find the installation file named mod_onpageload_popup_X.x.zip directly in the unzipped folder.

• ReadMe.txt: Contains important information about the current version of the extension.

Important Note: Joomla 3.x is no longer supported. The extension is designed for Joomla 4.x, 5.x, and 6.x versions. We recommend upgrading to the latest Joomla version to use the latest features and receive future updates.

Installing the Extension

To install the extension, log in to the backend of your Joomla website.

• For Joomla 4, 5, and 6: Go to System > Install > Extensions. You can either drag and drop or browse for the file to install.

A success message will be displayed once the installation is complete.

To set up the Auto Onpageload Popup module after installation:

Joomla 4, 5, and 6

• Go to Content > Site Modules to find the Auto Onpageload Popup module. Click on it to access its settings.

Setting Up the Module Position

For the popup to work correctly, you must assign it to a module position on your Joomla website. Follow these simple steps:

1. Hide the Title: Set the module title to be hidden.
2. Module Position: Select any available module position from the dropdown list. We recommend using the "debug" position if it's available on your site.
3. Module Status: Make sure the module is set to Published.

How to Trigger the Popup

• OnPage Load: Popup opens automatically when the page finishes loading.
• OnPage Scroll: Popup appears when the user scrolls down the page. You can set the exact scroll amount in the Advanced Settings tab.
• OnPage Exit: Uses exit-intent technology to detect when a visitor is about to leave the page. The popup will appear when the mouse cursor moves toward the top of the browser.
• OnScroll to Bottom: Popup appears when a visitor scrolls all the way to the bottom of the page.
• OnClick: Popup opens when a visitor clicks a specific link or image. You'll need to publish this link in a module position and set Popup Link Parameters to Show.
• Time on Page (Inactivity): Popup appears after the user remains inactive (no mouse movement, scrolling, or typing) for a specified duration. Perfect for re-engagement campaigns.
• Element Visibility: Popup triggers when a specific element on your page becomes visible in the viewport. Uses modern IntersectionObserver API for accurate detection.
• After X Page Views: Popup appears after the visitor has viewed multiple pages during their session. Ideal for building trust before showing conversion requests.
• Copy Text Event: Popup appears when a visitor copies text from your page. Useful for protecting content or offering resources.
• AdBlock Detection: Popup appears when an ad blocker is detected on the visitor's browser. Show relevant messages or offers to users with ad blockers enabled.

Import & Export Configuration

The Import/Export feature is located at the top of the module configuration and allows you to save and reuse module configurations:

• Export Configuration: Click this button to export your complete popup module configuration as a JSON file. This includes all settings from all tabs (Module Settings, Content Settings, Appearance, Referrer Targeting, Google Analytics, and Advanced Settings). Perfect for creating backups, sharing configurations with team members, or reusing successful setups across different modules or websites.
• Import Configuration: Click this button to select and import a previously exported JSON configuration file. All module fields will be automatically populated with the imported settings, saving you time on repetitive configurations. This is ideal for quickly setting up multiple similar popups or migrating configurations between websites.

Note: The Import/Export feature is the first fieldset you'll see when editing the module, making it easy to save or load configurations at any time.

Popup Link Settings

• Popup Link: Choose to show or hide the popup trigger link. This link can be placed inside a module or article using loadposition. Note that it cannot be linked to a menu item or another module.
• OnClick Element/Link: Choose between an image or HTML text that triggers the popup when clicked. Select "Image" to use a media file, or "HTML Text" to use custom HTML.
• OnClick Text: Add simple text or custom HTML with classes, IDs, and attributes. This appears when "HTML Text" is selected for the OnClick Element.
• Select an Image: Choose an image from your media library to use as the popup trigger. This appears when "Image" is selected for the OnClick Element.
• Sticky Element Position: Set the position of the text/image trigger element. Options include Module Position, Right Top, Right Bottom, Left Top, Left Bottom, Vertical Right Centered, or Vertical Left Centered.
• Sticky Element Background Color: Set the background color for the sticky trigger element.
• Sticky Element Text Color: Set the text color for the sticky trigger element.

Timing Options

• Test Mode: When set to ON, cookies/sessions aren't stored, allowing you to test your popup repeatedly without clearing browser cookies. Once you've finalized your settings, set this to OFF for normal operation.
• Auto Popup Open Timer: Delay the popup's appearance by a specific time. For example, to open the popup after 10 seconds, set this to 10000 milliseconds. For immediate display, select Default.
• Auto Close Timer: Automatically close the popup after a set time. To close after 5 seconds, select Enable and set the value to 5000 milliseconds.

Cookie Settings

• Hide Popup Link: Choose whether to hide the trigger link after the cookie/session is set. If not hidden, the link will remain visible but inactive.
• After close stay hidden for: Set how long the popup remains hidden after being closed - Session, Seconds, Minutes, Hours, or Days.
• Cookie Duration: Enter a number value for the duration. For example, enter 15 for 15 minutes, 30 for 30 days, or 2 for 2 hours (depending on the unit selected above).
• Set Cookie or Session On: Choose when to set the cookie - either when the close button is clicked (On Closing Button) or automatically when the page loads (On page Load).

What Can You Put Inside Your Popup?

1. HTML or Plain Text - You can add any text content using either the Joomla editor or by selecting existing Joomla articles.
2. Images - Include a single image from your media library, or combine images with text using the editor.
3. Modules - Display any Joomla module inside your popup (like contact forms, login forms, etc.)
4. Media URLs - Embed external content using media URLs (YouTube, Vimeo, Google Maps, etc.)
5. Standalone Image - Display a single image as the popup content with optional link functionality.

Content Configuration Options

• Message Input Method: Choose between four options:
  • Editor: Use the built-in Joomla editor to create HTML content with Message Above and Message Below fields.
  • Select Joomla Articles: Select existing Joomla articles to display in the popup (Message Above Article and Message Below Article).
  • Media URL: Embed videos or maps using URLs. When using this option, Message Above, Module ID, and Message Below settings are not applied.
  • Image: Display a single image as the popup content with optional link and target settings.
• Module ID: Enter the ID number of any Joomla module you want to display inside the popup (available when using Editor or Article input methods).
• Message Above: Content to display above the module (when using Editor input method).
• Message Below: Content to display below the module (when using Editor input method).
• Message Above Article: Select a Joomla article to display above the module (when using Article input method).
• Message Below Article: Select a Joomla article to display below the module (when using Article input method).
• Media URL: Enter the URL for embedding videos or maps (e.g., YouTube, Vimeo, Google Maps).
• Popup Image: Select an image from your media library to display as the popup content (when using Image input method).
• Image Link: Set an optional URL that the popup image will link to (when using Image input method).
• Image Link Target: Choose whether the image link opens in the same tab or a new tab (when using Image input method).

Supported Media Types

The Media URL field supports various platforms including:

1. YouTube
   Example formats:
   http://www.youtube.com/watch?v=opj24KnzrWo
   http://www.youtube.com/embed/opj24KnzrWo
   http://youtu.be/opj24KnzrWo
2. Vimeo
   Example formats:
   http://vimeo.com/40648169
   http://player.vimeo.com/video/45074303
3. Metacafe
   Example format:
   http://www.metacafe.com/watch/7635964/
4. Dailymotion
   Example format:
   http://www.dailymotion.com/video/xoytqh_example-video_people
5. Instagram
   Example format:
   http://instagram.com/p/IejkuUGxQn/
6. Google Maps
   Example format:
   http://maps.google.com/maps?q=Eiffel+Tower,+Avenue+Gustave+Eiffel,+Paris,+France&t=h&z=17

Popup Box Design

• Popup Position: Choose where your popup appears on screen (center, top-center, bottom-center, top-left, top-right, bottom-left, bottom-right).
• Width: Set the popup width in pixels or percentage (e.g., 80% or 500px).
• Height: Set the popup height in pixels or percentage (e.g., 70% or 400px).
• Minimum Width: Set the minimum width in pixels to ensure the popup doesn't become too narrow.
• Minimum Height: Set the minimum height in pixels to ensure the popup doesn't become too small.
• Maximum Width: Set the maximum width in pixels or percentage to constrain the popup size.
• Maximum Height: Set the maximum height in pixels or percentage to constrain the popup size.
• Responsive Sizing: Enable or disable responsive sizing. When enabled, the popup will automatically adjust based on screen size breakpoints.
• Mobile Breakpoint: Set the screen width (in pixels) considered as mobile devices (default: 768px). Only applies when Responsive Sizing is enabled.
• Tablet Breakpoint: Set the screen width (in pixels) considered as tablet devices (default: 1024px). Only applies when Responsive Sizing is enabled.
• Background Color: Choose the background color of your popup using the color picker.
• Text Color: Select the color for text displayed inside your popup.
• Content Padding: Set the space between your content and the popup border. Can be a single value (e.g., 10px) or multiple values for different sides (e.g., 10px 20px 5px 15px for top, right, bottom, left).
• Content Margin: Set the space around the popup content box. Can be a single value (e.g., 20px) or multiple values for different sides.
• Motion Effects: Select an animation for how your popup appears and disappears. Choose from Fading, Zooming, Bouncing, Sliding, Attention Seekers, Light Speed, or Special effects.
• Animation Duration: Control how fast or slow the animation plays (normal, slow, slower, fast, faster). Only applies when an animation is selected.

Border Settings

• Style: Choose a border style (solid, dashed, dotted, etc.).
• Color: Select the border color and opacity.
• Radius: Set rounded corners by specifying a border radius (e.g., 4 for slightly rounded, 20 for very rounded).
• Width: Specify how thick the border should be.

Background Overlay

The overlay is the semi-transparent layer that appears behind your popup.

• Enable Overlay: Turn the overlay on or off completely.
• Image: Choose from 10 predefined patterns, or select "none" to use a solid color instead.
• Color: Set the background color and opacity of the overlay. For a transparent overlay, set opacity to 0.
• Close on Click: Enable this to let users close the popup by clicking anywhere on the overlay. Disable it to force users to use the close button.

Close Button

• Button: Show or hide the close button.
• Button Style: Choose from 10 predefined styles, or select "custom" to use your own styling.
• Button Position: Select where the close button should appear (top-right, top-left, etc.).
• Color: Set the color of your custom close button.
• Size: Specify how large the custom close button should be.

• License Key: Add your license key to enable automatic updates. You can find your key in the Downloads Section of our store.
• Content Prepare: Enable this to allow content plugins to work inside the popup.
• Trigger Scroll Amount: Set how far down the page (in pixels) a user must scroll before the popup appears. Only applies when using the "OnPage Scroll" trigger.
• Trigger Scroll Amount: Set how far down the page (in pixels) a user must scroll before the popup appears. Only applies when using the "OnPage Scroll" trigger.
• Inactivity Time: Set the duration (in seconds) that a user must remain inactive before triggering the popup. Minimum: 1 second. Only applies when using the "Time on Page (Inactivity)" trigger.
• Visibility Element: Enter a CSS selector for the element that should become visible to trigger the popup. Only applies when using the "Element Visibility" trigger.
• Page Views Required: Set the number of page views required before the popup appears. Only applies when using the "After X Page Views" trigger.
• Disable for Mobile Devices: Set to Yes to prevent the popup from appearing on smartphones and tablets.
• Disable after Login: Set to Yes to hide the popup for logged-in users. This is useful when showing a login form in your popup.
• Scroll Webpage: Set to Yes to allow users to scroll the main page while the popup is open. Set to No to lock the page until the popup is closed.
• Minify JS and CSS: Enable this to load compressed versions of JavaScript and CSS files, improving page load times.
• Add Extra CSS: Add custom CSS code to modify the appearance of your popup beyond the standard options.

What is Referrer Targeting?

Referrer targeting allows you to show or hide your popup based on where your visitors are coming from. For example, you can:

• Show a special offer only to visitors coming from Google
• Display different popups for visitors from social media versus search engines
• Hide your popup for visitors coming from specific websites
• Control whether direct visitors (those who type your URL directly) see your popup

Configuration Options

• Referrer Targeting: Set to Yes to enable this feature.
• Referrer Mode: Choose one of two options:
  • Show Only For Listed Referrers: Popup will appear ONLY for visitors coming from the sites you list
  • Hide For Listed Referrers: Popup will appear for everyone EXCEPT visitors from the sites you list
• Referrer Sources: Enter the domain names that you want to target, one per line. For example:

  google.com
  facebook.com
  twitter.com

• Wildcard Matching: Use asterisks (*) as wildcards to match multiple domains. For example:
  • *.google.com - Matches any Google subdomain (www.google.com, images.google.com, etc.)
  • *facebook* - Matches any URL containing "facebook"
• Include Direct Visits: Control whether your popup appears for direct visitors (people who typed your URL directly or used a bookmark).
  • Set to Yes to show your popup to direct visitors
  • Set to No to hide your popup from direct visitors

Testing Your Referrer Targeting

To test if your referrer settings are working correctly:

1. Open an incognito/private browsing window (to avoid cookie interference)
2. Visit a website you've added to your referrer list
3. From that site, click a link to your website
4. Check if the popup behavior matches your expectations

If you're having trouble, you can use browser developer tools to verify what referrer information is being sent. In Chrome, right-click → Inspect → Network tab → refresh the page → look for the "Referer" header in the request details.

Track Popup Performance with Google Analytics

The Google Analytics integration lets you track how visitors interact with your popups. This helps you understand which popups are effective and which might need improvement.

What You Can Track

• Views: How many times your popup was displayed
• Closes: How many times visitors closed your popup
• Clicks: How many times visitors clicked links inside your popup
• Conversions: How many times visitors completed a desired action (like submitting a form)

Configuration Options

• Enable Google Analytics: Set to Yes to activate tracking.
• Google Analytics Tracking ID: Enter your GA tracking code (starts with UA- or G-) if you want to use a specific property. Leave empty to use your site's existing Google Analytics.
• GA Event Category: The category name that will appear in your Google Analytics reports (default: "Popup").
• Track Views: Set to Yes to record each time your popup is displayed.
• Track Closes: Set to Yes to record each time your popup is closed.
• Track Link Clicks: Set to Yes to record clicks on links inside your popup.
• Conversion Element Selector: Enter a CSS selector that identifies conversion elements. For example:
  • #submitButton - Tracks clicks on an element with ID "submitButton"
  • .signup-button - Tracks clicks on elements with class "signup-button"
  • form.contact input[type=submit] - Tracks form submissions
• Conversion Event Name: The name that will appear in Google Analytics for conversion events (default: "Conversion").

Heatmap Integration

If you use heatmap tools to visualize user interactions, you can make them work properly with your popups:

• Heatmap Compatibility: Set to Yes to enable special code that helps heatmap tools track interactions inside popups.
• Heatmap Provider: Select your heatmap service for optimal compatibility:
  • Generic: Works with most heatmap tools
  • Hotjar: Optimized for Hotjar
  • Crazy Egg: Optimized for Crazy Egg
  • Mouseflow: Optimized for Mouseflow

Viewing Your Analytics Data

After implementing Google Analytics tracking, you can view the data in your Google Analytics dashboard:

1. Log in to your Google Analytics account
2. Navigate to Behavior → Events (in Universal Analytics) or Events (in GA4)
3. Look for events with the category name you specified (default: "Popup")
4. You'll see separate listings for views, closes, clicks, and conversions

How to get the license key for the extension?

1. Go to the Download Section of our store.
2. Log in with your account (or create one using the same email you used when purchasing).
3. Find your license key in the downloads section.

How to change or remove padding and margin around the popup?

Go to the Appearance tab and adjust the Content Padding and Content Margin settings. Set these to 0 if you want no space around your content.

How to add your own button style and background?

Replace one of the existing image files in the modules/mod_onpageload_popup/tmpl/images/ directory with your custom image. For example, replace close_button_1.png with your image, then select Style 1 in the module settings.

How to add a close button inside the popup?

Add this HTML code to your popup content:

<a href="#" class="closePopup">Close Button Text</a>

Any element with the class "closePopup" will function as a close button.

How to use Import/Export feature?

1. Configure your popup module with all desired settings
2. In the Import/Export panel, click "Export Configuration" to download your settings as a JSON file
3. To reuse the configuration, click "Import Configuration" and select the previously exported JSON file
4. The imported settings will automatically populate all module fields, saving you time on repetitive configurations

How to disable popup for mobile devices?

Go to Advanced Settings tab and set Disable for mobile devices to "Yes".

How to create a popup that appears only once per visitor?

1. Go to the Module Settings tab
2. Under Cookie Settings, set "After close stay hidden for" to "Days"
3. Set "Cookie Duration" to the number of days you want (e.g., 30 for one month)
4. Set "Set Cookie or Session On" to your preference (typically "On Closing Button")

How to show different popups to different traffic sources?

1. Create multiple instances of the module, each with different content
2. For each instance, go to the Referrer Targeting tab
3. Enable Referrer Targeting and configure the appropriate referrer sources
4. For example, one popup for Google traffic, another for Facebook, etc.

How to measure popup effectiveness?

1. Go to the Google Analytics tab
2. Enable Google Analytics tracking
3. Configure which events to track
4. Use the Conversion Element Selector to track specific actions
5. Review the data in your Google Analytics dashboard to see which popups perform best

Common Issues and Solutions

Popup Doesn't Appear

• Verify that the module is published and assigned to an active module position.
• Check if the popup is disabled for mobile devices while you're testing on a mobile device.
• Clear your browser cookies and Joomla cache.
• Look at your browser's console (right-click → Inspect → Console) for any JavaScript errors.
• Check the page source code to confirm that aolp.js and aolp.css files are loaded.

Cookie Issues

• If the popup shows every time despite cookie settings, check if Test Mode is enabled.
• If the popup never shows again after the first view, check your cookie duration settings.
• Try using a different browser or incognito/private mode to test cookie behavior.

Referrer Targeting Problems

• Referrer information might not be passed between websites using HTTPS (secure) connections. This is a browser security feature.
• Use browser developer tools to check what referrer is actually being sent (Network tab → Referer header).
• Make sure your referrer domains are entered correctly without "http://" or "www." prefixes.

Google Analytics Tracking Issues

• Verify your Google Analytics tracking ID is correct.
• Ad blockers might prevent Google Analytics from loading - test in incognito mode.
• Check your browser console for tracking events to confirm they're being sent.
• Remember that Google Analytics data can take 24-48 hours to appear in reports.

General Troubleshooting Steps

1. Clear Joomla cache after changing module settings.
2. Disable other JavaScript extensions temporarily to check for conflicts.
3. Try a different browser to isolate browser-specific issues.
4. Ensure your Joomla version and template are fully compatible with the module.

If you're still experiencing issues after trying these solutions, please contact our support team with details about your setup and the problem you're encountering.