Compatibility WordPress 4.1.1 Multisite 4.1.1 BuddyPress 2.2.1
"I'm always amazed when I receive the email updates showing the new plugin WPMU DEV has developed or amped up."
"It is amazingly fast, easy to install and very flexible."
"From start to finish, PopUp implementation took minutes."
PopUp Pro brings a proven solution for effective advertising to your site.
Introduce your clients, users or visitors to an exclusive offer or an opportunity to stay connected – at just the right place and time.
The Perfect Ad Display in Seconds
Perfect for building eye-popping advertisements that are sure to capture any audience.
Our refined templates work for any situation and can be quickly tweaked to meet your needs.
Timing is Everything
We know when you display a pop-up can be just as important as the content itself. That is why we included options for triggering pop-ups with precision based on time, location on the page, if the mouse leaves the browser, and even on CSS selectors and clicks.
Share your content using smart display and be sure your advertisements are having the highest possible impact.
PopUp Flexibility and Control
Do you want to offer an introductory rate to new subscribers or a special promotion for loyal users?
PopUp Pro has options for displaying offers based on user type, location, referral and how many times the pop-up should display.
PopUp Pro is the perfect tool for advertising in the right place, at the right time, to the right audience. Use PopUp Pro for your next marketing campaign – and spend less time building and more time creating.
For help with installing plugins please see our Plugin installation guide
Login to your admin panel for WordPress or Multisite and activate the plugin:
- On regular WordPress installs – visit Plugins and Activate the plugin.
- For WordPress Multisite installs – Activate it site-by-site (say if you wanted to make it a Pro Sites premium plugin), or visit Network Admin -> Plugins and Network Activate the plugin.
Once activated, you’ll see a new menu item in your dashboard: PopUp
Adding a PopUp
Click on PopUp > Add New to open up the PopUp Editor.
Here you will see a number of sub-sections for creating PopUps.
Let’s start by giving the popup a name, this will help to keep organized if you have lots of popups.
Here you provide the contents of the popup.
- Heading – you can optionally add a heading and subheading, nothing will display if these are both left blank.
- Subheading – optional, as with the heading.
- PopUp Feature Image – optionally, you can add a feature image as well. When using a feature image, you’ll see a few more options for customizing the appearance or for hiding it on mobile devices.
- PopUp Content – use the power of the visual editor to add practically any content you want.
- Call To Action Button Label – another optional element, you can easily add a button to link to a call to action URL.
- Call To Action Button Link – the URL to link to when the button is pressed.
How these elements display will depend on the settings you provide below as well your theme or any custom CSS you may have added.
This section will provide a number of settings for customizing the popup’s look and feel.
You can always use custom CSS to full customize the appearance of the popup as well. We’ll gladly assist with that through the support forums!
Select a Style from the following:
Tick the ‘No rounded corners‘ option to turn off rounded corners.
Tick the ‘Use custom colors‘ option to specify custom colors. Doing so will allow you to select colors using a color dialog.
Tick the ‘Use custom size‘ option to specify a custom width and height, otherwise, the popup will be responsive (it will adapt in width based on the browser and viewing device).
The ‘Allow page to be scrolled‘ option will allow users to still scroll the page when the popup is displayed.
Customize how you want the popup to behave using settings in this section.
- Enter a value for ‘Appear after x seconds’ and the popup will display after that number of seconds has passed.
- Enter a percentage value and select either percentage or px for the ‘Appear after x%/px of the page has been scrolled‘ setting and the popup will display once that portion of the page has been scrolled.
- Specify a CSS element for the ‘Appear after user scrolled until CSS selector’ option and the popup will be displayed until the user scrolls up to that element. It will then close automatically.
- Easily add a “Never see this message again” link. Users can click the link and never see the popup again.
- Tick the ‘Close button acts as “Never see this message again” link‘ in order to have the popup’s close button act as that link.
- By default, popups will be closed when the user clicks anywhere in the background outside of the popup. The ‘Click on the background does not close PopUp‘ option turns that off.
- Specify a CSS element in the ‘Appear after user scrolled until CSS selector‘ field in order to show the popup after the user scrolls to the specified element on the page.
- The ‘Appear when the mouse leaves the browser window‘ option lets you show the popup only when the mouse leaves the window on desktop computers. This provides a great sort of exit-intent functionality.
- Specify a CSS elements in the ‘Appear when user clicks on a CSS selector‘ to show the popup when the specified element is clicked.
This section will show a list of options you can use to display popups based on certain conditions. The conditions available here will depend on the conditions you select from the settings page at PopUp > Settings.
To activate a condition, simply select it from the Available Conditions list. You’ll then be able to interact with any additional settings it provides in the opposite pane.
The available conditions are based on the conditions you select at PopUp > Settings > Available Conditions.
The following tips can be helpful when specifying your conditions:
- Try not to use too many or you may set a condition that cancels itself, causing the pop up to not display when you want it to.
- When adding URLs to conditions, be sure to include the http:// part at the beginning, and a trailing slash (/) at the end.
Preview and Save
While editing a PopUp, you’ll always see options for previewing, saving and activating it.
- Click the Preview PopUp button to see a quick preview right in your admin area.
- Use the Status switch to Activate or Deactivate the popup. If it is Inactive, it will not be displayed in your site’s front-end.
- Click the ‘Move to Trash‘ link if you wish to delete it.
- Click the Save button to save any changes.
Here’s an example of how the popup can look:
Editing a PopUp
You can easily edit PopUps by going to PopUp > PopUps.
You’ll see a list of them along with various details and options.
The Conditions column shows you all the conditions in use for the popup.
The Order column shows you the order, helpful for display purposes since you can have multiple popups in one page. The order will designate which is displayed first. The order can be changed by hovering over a popup and dragging the bar icon.
The Active column lets you know if the popup is Active or Inactive.
Hover your mouse over the title of a PopUp and you’ll see a number of options to interact with that specific PopUp:
- Bar icon – click and drag this icon to change the order of the popup in the list.
- Edit – go to the edit page for this popup.
- Activate/Deactivate – Turn the popup on/off.
- Preview – easily preview the popup right from here.
- Trash – delete the popup.
On larger viewing devices such as desktops, you’ll see a Bulk Actions drop-down with the following options:
- Move to Trash
- Toggle activation
Simply select any items you’d like to use those bulk actions on, select the bulk action you want and click the Apply button.
Add another popup by clicking the Add New button.
Let’s check out the settings at PopUp > Settings.
You’ll see a number of sub-sections here, we’ll go through each.
PopUp Loading Method
In this section, you’ll be able to select the method used to load popups as well as the method used for country lookups.
From the Load PopUp Using drop-down, you’ll be able to select from the following:
- Page Footer: Include PopUp as part of your site’s HTML (no AJAX call).
- WordPress AJAX: Load PopUp separately from the page via a WordPress AJAX call. This is the best option if you use caching.
- Custom AJAX: Load PopUp separately from the page via a custom front-end AJAX call.
If you have difficulty getting your popup to display, try changing the loading method here.
And from the Country Lookup drop-down, you can select from the following:
- Host IP – Uses the hostip.info web service.
- Telize – Uses the telize.com web service.
- Free Geo IP – Uses the freegeoip.net web service.
- Local IP Lookup Table – Uses a local lookup table. Please refer to the “Using a Local Geo-Database” below for details on using this option.
Click the Test my Location button to test your location using the selected service. You’ll see a message displayed showing your IP and location details.
In this section, you will see a list of all the shortcodes the plugin detects, using the Shortcode API.
Some plugins or themes might provide shortcodes that only work with certain loading methods, some may be designed to work only under certain conditions and may not work. This list explains which shortcodes can be used with each loading method and which shortcodes will not work.
In this section, you will find a list of all the conditions available for showing popups.
The conditions you select here will activate certain rules and possibly other settings with the PopUp editing screen. The conditions currently available, along with the rules that are activated when using them, are as follows:
Adds advanced URL matching with regex support.
Simple and fast URL matching.
Conditions that check browser details.
New Behavior Options: Show PopUp when the mouse leaves the browser window or when the user clicks somewhere.
Conditions based on the user’s Membership details.
Test for PopUp specific values.
Adds post category related rules.
Adds post type-related rules.
Examine how the visitor arrived on the current page.
Conditions based on the user role of the current user.
Adds a condition that can limit PopUps to certain screen sizes.
Conditions based on the current user.
Conditions based on the location of the visitor.
BuddyPress: Examine values in the users extended profile.
Save All Changes
When you’re done adjusting the settings, be sure you click the Save All Changes button!
Using a Local Geo-Database
To use the Local IP Lookup Table option in the settings (PopUp > Settings > Country Lookup), you must first add the required table to your database.
Go to https://github.com/shrkey/countrylookupfromip and download the zip file by clicking the “Download Zip” button in the sidebar. Then unzip that file on your computer. Inside the folder, you will find a file called countrylookupip.sql.
Import countrylookupip.sql to your database. In phpmyadmin, be sure you are in the root of your database. Click the “Import” tab, then the “Browse” button and browse to the countrylookupip.sql file you just unzipped. Leave all other settings as they are, and click the “Go” button at the bottom.
Once the new table has been added to your database, you can enable the Local IP Lookup Table option.
IMPORTANT: Always make a backup of your database before performing operations like this, just to be safe.
We hope you enjoy using PopUp Pro! If you have trouble with any aspect of configuration, code or general usage, or if you have a cool feature suggestion to make, please head on over to the community forums where support staff and other helpful members are waiting to lend a hand.
PopUp Pro Feature Set
Feature rich for precision display.
- Easy, intuitive interface
- Network-wide pop-ups
- Site specific pop-ups
- URL specific pop-ups
- Built-in templates
- Embed images
- Call-to-action buttons
- Responsive or fixed
- Hide pop-ups on mobile devices
- Conditions control who sees a pop-up
- Trigger based on time
- Trigger for location
- Control with CSS markers
- Trigger with clicks
- Allow visitors to hide pop-ups forever
- Display to specific geographic locations