Auto Onpageload Popup

Installation

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 following contents:

• Folder Joomla 4 & 5: The extension is designed for Joomla 4.x and 5.x versions. This folder contains the installation file named mod_onpageload_popup_X.x.zip.

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

Important Note: Joomla 3.x is no longer supported. We recommend upgrading to Joomla 4.x or 5.x 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: Go to System > Install > Extensions. You can either drag and drop or browse for the file to install.

• For Joomla 5: The installation process is the same as for Joomla 4.

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

Basic Settings

To set up the Auto Onpageload Popup module after installation:

Joomla 4 and Joomla 5

• 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.

Module Settings

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.
• Right-Click: Popup appears when a visitor right-clicks anywhere on the page.

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: This can be an image or HTML text that triggers the popup when clicked. Customize it with CSS in the Advanced Settings tab.
• OnClick Text: Add simple text or custom HTML with classes, IDs, and attributes.
• Select an Image: Choose an image from your media library to use as the popup trigger.

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).

Content Settings

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. Iframes - Embed external content using iframes. Learn more about iframes here.

Content Configuration Options

• Message Input Method: Choose between using the built-in editor or selecting existing Joomla articles.
• Module ID: Enter the ID number of any Joomla module you want to display inside the popup.
• Media URL: For embedding videos or other media content. Note that when using this option, the Message Above, Module ID, and Message Below settings will not be applied.

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

Appearance

Popup Box Design

• Height: Set the height in pixels (e.g., 500). The popup is responsive and will automatically adjust if your content requires less space.
• Width: Set the maximum width in pixels (e.g., 800). The popup will automatically resize for different screen sizes.
• 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.
• Content Margin: Set the space around the popup content box.
• Popup Position: Choose where your popup appears on screen (center, top-center, bottom-center, top-left, etc.)
• Motion Effects: Select an animation for how your popup appears and disappears.
• Animation Duration: Control how fast or slow the animation plays (slow, slower, fast, faster).

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.

Advanced Settings

• 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.
• 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.

Referrer Targeting

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.

Google Analytics

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

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 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

Troubleshooting

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.