Auto Onpageload Popup- Joomla Documentation

Installation

Downloading the Extension

Email : After purchasing the extension from our store, you will receive an email with the link to download the extension.

Store : You can also download the extension from the Downloads section of our store. If you are new to our store, then you have to first create an account using the same email address which you have used while purchasing the extension.

Click to download the extension package - AutoOnPageLoadPopup_UNZIP.zip

Unzip the Package

UNZIP the package AutoOnPageLoadPopup_UNZIP.zip using any file unzipper or winrar.
Upon unzipping the package you will find the following.
- J3 folder - Install the mod_onpageload_popup.zip file from this folder if you are using Joomla 3.x.x.
- J4 folder - Install the mod_onpageload_popup.zip file from this folder if you are using Joomla 4.x.x.
- ReadMe.txt file - This file has information about the current version of the extension.

Install the Extension

Now to install the file login to the backend of your Joomla website.
- For J3 - Go to Extensions > Extension Manager and click on the Upload Package File Tab. Click on browse to choose the correct installation file and click on "Upload and Install"
- For J4 - Go to System > Install > Extensions . Drag and drop or browse for file to install.
The success message will appear after installation is completed.

Basic Settings

After successful installation

For J3 - Go to Extensions > Module Manager
For J4 - Go to Content > Site Modules.
You will find Auto Onpageload Popup listed. Clicked on it to configure.

Setting a Module Position

For our module to work, it is mandatory to set it to any of the module position of your Joomla website.

Set the Title of the Module to Hide
Select any module position from the Position dropdown list. We recommended to publish the module in "debug" position if available.
Select the status 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 :

HTML or Plain Text - For HTML or plain text you can use both the methods.Editor or Joomla Articles.
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.
Module : You can select a module to appear inside the popup
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 :

Youtube
http://www.youtube.com/watch?v=opj24KnzrWo
http://www.youtube.com/embed/opj24KnzrWo
http://youtu.be/opj24KnzrWo
Vimeo
http://vimeo.com/40648169
http://vimeo.com/channels/staffpicks/38843628
http://vimeo.com/groups/surrealism/videos/36516384
http://player.vimeo.com/video/45074303
Metacafe
http://www.metacafe.com/watch/7635964/dr_seuss_the_lorax_movie_trailer/
http://www.metacafe.com/watch/7635964/
Dailymotion
http://www.dailymotion.com/video/xoytqh_dr-seuss-the-lorax-premiere_people
Twitvid
http://twitvid.com/QY7MD
Twitpic
http://twitpic.com/7p93st
Instagram
http://instagr.am/p/IejkuUGxQn/
http://instagram.com/p/IejkuUGxQn/
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.
Include jQuery Files : Incase of any jQuery related issues it is recommended to load the JS in body instead of head.
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

If the popup doesn't load then in the Advanced tabs first try to set the Include Js file to Body instead of head and see if it starts working.
Check properly that you have activated the module in an existing template position.
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 jquery.ifancybox.js and jquery.ifancybox.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.