Download

Auto Onpageload Popup

Version: 9.9

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 3 & 4: This extension is compatible with both Joomla 3.x and Joomla 4.x versions. In this folder, you will find the installation file named mod_onpageload_popup_X.x.zip.

  • Folder Joomla 5: The extension is also designed for seamless integration with Joomla 5.x. This folder contains the installation file named mod_onpageload_popup_X.x.zip.

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

Installing the Extension

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

  • For Joomla 3: Navigate to Extensions > Extension Manager, then click on the "Upload Package File" tab. Click "Browse" to select the appropriate installation file, then click "Upload and Install."

  • 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 ensure the successful configuration of the Auto Onpageload Popup module after its installation across different Joomla versions, follow these instructions tailored to each version's navigation structure:

Joomla 3

  • Navigate to Extensions > Module Manager. Here, you will find the Auto Onpageload Popup module listed. Click on it to begin configuration.

Joomla 4 and Joomla 5

  • Proceed to Content > Site Modules to locate the Auto Onpageload Popup module. Select it to access its settings.

Setting Up the Module Position

For the Auto Onpageload Popup module to function correctly, assigning it to a module position within your Joomla website is crucial. Please adhere to the following steps:

  1. Hide the Title: Set the title of the module to be hidden.
  2. Module Position: From the Position dropdown list, choose any available module position. It is recommended to place the module in the "debug" position if it exists on your site.
  3. Module Status: Ensure the module is set to Published.

Module Settings

  • Trigger
    • OnPage Load :The popup will open automatically when page is loaded.
    • OnPage Scroll : The popup will open when the page is scrolled. The Scroll Amount can be defined in the Advanced Settings of the module parameters. It will open once when the page is scrolled down.
    • OnPage Exit : It used Exit Page intent technology. When user tries to move the cursor towards the close button of the browser the popup will open automatically.
    • OnScroll to Bottom : When user completely scrolls down to the bottom of the page the popup will open once.
    • OnClick : The popup will open on clicking the link or image. You can set the link or image for the popup and publish it in a module position. Set Popup Link Parameters to Show.
  • Popup Link : You can show or hide the popup link which appears in the module position. The popup can only be linked to a text or image inside a module or article using loadposition. It can't be linked to a Menu item or other module.
  • OnClick Element/Link : The onclick element can be an image or any HTML text. You can add your own HTML and stylize it by adding css to the extra CSS parameters in the advanced settings.
  • OnClick Text : You can add simple text or add any HTML with class, id and different attributes.
  • Select an Image : Option to select an image from the media gallery and link it to the popup.
  • Test Mode : If the test mode is set to ON cookies/session doesn't get stored in the browser. Once you have completed all the settings you can set it to OFF. The feature is provided to complete all the settings properly before the cookie or session is set for the browser and you don't have to clear your browser cookie to complete the correct settings again and again. If you want the popup to open again and again for every single visit then you can set it to ON, the cookie or session won't get stored.
  • Auto Popup Open Timer: Using this feauture you can delay the popup to open on the page after few seconds. Suppose you want it popup to open after 10 seconds then set the Popup opens automatically after parameter to 10000 (10 second = 10000 ms). If you want the popup to open immediately then select Default instead of Assign Value
  • Auto Close Timer: After the popup has been opened if you want to close the popup automatically after say 5 seconds then you can set choose Enable and set the Popup Automatically closes after parameter to 5000 (5 seconds = 5000ms) .If you don't want to close the popup automatically then set it to Disable

Cookie

  • Hide Popup Link : You can hide the popup link once the cookie/ session is set. If you don't wish to hide it then the link will be inactive.
  • After close stay hidden for  : You can set this to Session, Seconds, Minutes, Hours or Day depending upon your requirements.
  • Cookie Duration : This accepts numeric value for example you want cookie to expire in 15 mins, so you can just set 15 in this field. For 30 days you can set 30 and similarly for 2 hours you can set it to 2.
  • Set Cookie or Session On : Cookie/Session can be set either on clicking the close(X) button (On Closing Button) or just on a single page load (On page Load)without client interaction.

Content Settings

Inside the popup you can add :

  1. HTML or Plain Text - For HTML or plain text you can use both the methods.Editor or Joomla Articles.
  2. Image - If  you want to popup a single image then you can select the image. If you want to use image with some text then you can use the editor to add image and text into the popup.
  3. Module : You can select a module to appear inside the popup
  4. Iframe : To add iframe inside refer : http://www.w3schools.com/tags/tag_iframe.asp
  • Message Input Method : You can use Editor or Joomla Articles.
  • Module ID : Enter the module ID of another module which you would like to show inside the popup.
  • Media URL : When a media URL is entered parameters like Message Above, Module ID and Message Below will not work.

The Media URL field supports the following :

  1. Youtube
    http://www.youtube.com/watch?v=opj24KnzrWo
    http://www.youtube.com/embed/opj24KnzrWo
    http://youtu.be/opj24KnzrWo
  2. Vimeo
    http://vimeo.com/40648169
    http://vimeo.com/channels/staffpicks/38843628
    http://vimeo.com/groups/surrealism/videos/36516384
    http://player.vimeo.com/video/45074303
  3. Metacafe
    http://www.metacafe.com/watch/7635964/dr_seuss_the_lorax_movie_trailer/
    http://www.metacafe.com/watch/7635964/
  4. Dailymotion
    http://www.dailymotion.com/video/xoytqh_dr-seuss-the-lorax-premiere_people
  5. Twitvid
    http://twitvid.com/QY7MD
  6. Twitpic
    http://twitpic.com/7p93st
  7. Instagram
    http://instagr.am/p/IejkuUGxQn/
    http://instagram.com/p/IejkuUGxQn/
  8. Google maps
    http://maps.google.com/maps?q=Eiffel+Tower,+Avenue+Gustave+Eiffel,+Paris,+France&t=h&z=17
    http://maps.google.com/?ll=48.857995,2.294297&spn=0.007666,0.021136&t=m&z=16
    http://maps.google.com/?ll=48.859463,2.292626&spn=0.000965,0.002642&t=m&z=19&layer=c&cbll=48.859524,2.292532&panoid=YJ0lq28OOy3VT2IqIuVY0g&cbp=12,151.58,,0,-15.56

Appearance

Popup Box

  • Height : Set the height of popup box in pixels. For example if you want to set the height as 500px, then mention 500. The extension is responsive, if you don't have contents which will need 500px height, then it will automatically resize to smaller.
  • Width : Set the width of the popup box in pixels. This will be the maximum width of the popup. It will automatically resize according to screen size. Set 800 if you want maximum width of the popup box as 800px.
  • Background Color: Option to choose the background color of the popup using color picker.
  • Text Color: Choose the color of the text inside the popup.
  • Content Padding : Padding around the popup content box.
  • Content Margin: Margin around the popup content box.
  • Motion Effects : Select a animation effect for the popup.
  • Animation Duration : Option to control the speed of animation to slow, slower, fast or faster.

Border

  • Style : Select the border style of the box from the list.
  • Color : Set the color of the border with opacity.
  • Radius : Set border radius of the box. Example : 4
  • Width : Set the width of the border.

Background Overlay

  • Image : Choose a pattern from a list of 10 predefined pattern styles. Set to none if you want to set a background color instead of patterns.
  • Color : Select the background color of the overlay using the color picker. If you don't want any background color then set Opacity to 0 by selecting.
  • Close on Click : Set to disable if you want to stop the popup to close on clicking on the overlay.

Close Button

  • Button : Option to show or hide the popup close button.
  • Button Style: Choose close button style from the list of 10 predefined styles. Set it to custom if you want to set your own style.
  • Button Position: Select the position where you would like the button to appear.
  • Color: Set the color of the button using the color picker.
  • Size : Set the size of the custom close button.

Advanced Settings

  • License Key : The extension version 9.1 and higher has an option to add the license key which allows you to directly update the extension to the latest version without manually downloading from our site every time their is a new update. The license key can be downloaded from the Downloads Section of our store.
  • Content Prepare: Set to yes to enable content plugins to work inside the module.
  • Trigger Scroll Amount : Add the height after which the popup will open upon scrolling the webpage.
  • Disable for Mobile Devices : Set to Yes if you want to set the popup disabled for mobile devices
  • Disable after Login : Set to Yes if you want to disable the popup after Joomla login. This feature can be used to popup joomla login module and the close upon successful login.
  • Scroll Webpage : Set to Yes if you want the webpage to scroll when the popup is open.
  • Minify JS and CSS : Set to enable if you want to load the minified version of the CSS and JS file.
  • Add Extra CSS : You can add extra css directly by adding into this field.

How to

How to get the license key for the extension?

  • Go to the Download Section of our store.
  • If you already have an account then login or else you create an account if you are new to our store..
  • Create an account using the same email address which you have used while purchasing the extension. (This isn't your Paypal email address but the address which you have provided in our store while purchasing)
  • Once you login to the Download section you can find the License Key for the extension.

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

Go to Appearance tab in the module parameters and change Popup Content Padding and Popup Content Margin. Set it to 0 if you dont want padding or margin around the popup.

How to add own button style and background?

If you want to add your own button image and background then you have to replace one of the images with your images at modules/mod_onpageload_popup/tmpl/images/. Suppose you replaced the file close_button_1.png with your image then in the module parameter choose button style to Style 1 so that you can see the image you replaced. Same is for background patterns.

How to add a close button inside the popup?

If you want to have a close button link inside the popup then you can add the following inside the HTML input textarea in the Popup Content Settings tab. You can also add it inside the article using article manager but some of the editors may strip the following code as it contains javascript. The class closePopup can be used tol close the popup box defined to any HTML element.

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

How to disable popup for mobile devices?

To disable the popup for mobile devices go to Advanced tab and set Disable for mobile devices to "Yes"

Troubleshooting

  • Check properly that you have activated the module in an existing template position. Some templates don't have debug position. You can try other existing positions.
  • If you are using firefox or google chrome the right click on your webpage and click on view page source. In the source code see if file like aolp.js and aolp.css are loading. If the files aren't loading then it will make sure that module isn't activated on the page.
  • If the joomla cache is activated try to clear it once after you make the changes to the module parameter settings.