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 it adds a new Pop Over menu item to your dashboard.
First thing, click on Pop overs > Settings to select your preferred loading method.
- Page Footer – The pop over is included as part of the page html.
- External Load – The pop over is loaded separately from the page, this is the best option if you are running a caching system.
- Custom Load – The pop over is loaded 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.
Creating a Pop Over
Click on Pop overs > Create New to open up the Pop Over Editor.
Creating a new pop over can be as simple as giving your pop up a title and entering your content for the popup window. Or you could use your favorite graphics software to create an awesome image ad, and use that in your popover.
Now you just need to set conditions for when you want the popup to display by simply dragging and dropping which conditions you want to set for this particular pop up.
- You’ve got lots of conditions to choose from, but choose wisely.
- 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.
Drag and drop Conditions to the Active Conditions area.
Next you can tweak your appearance preferences for for your popup using the Appearance Settings panel below your conditions. Let’s take that in 2 parts.
1. Set Popover size, position & margins.
3. Select your preferred display style.
1. The Pop Over Size, Position & Margins settings enable you to precisely size and position your popover on your site’s pages.
3. Set your Background Color & Font Color for your popover.
4. The Use Style setting allows to to choose how your popover should display on your pages.
- Default will place it on your pages according to your position settings above, and it will scroll with the page.
- Default Fixed will also place it according to your above settings, but the popover will stay put even when users scroll down the page.
- Dark Background Fixed will position the popover according to your above settings, and keep it there when users scroll. It will also overlay a full-screen semi-transparent grayed out area over your page preventing any interaction with the page until the popover is closed.
Now let’s take a look at the 2nd part of the Appearance Settings section.
1. Remove “Never see this message again”.
2. Make “Close” button permanent.
3. Set the expiry time.
4. Set the appearance delay.
For the first 2 settings here, it’s important to note that every popover has a “Never see this message again” link in the bottom-right corner which appears when the mouse pointer is hovered over the popover. If that link is clicked, the popover will not show again during that same visit to your site.
- 1. Check Remove the “Never see this message again” link to disable that feature. This means that, even if your users close the popover, it will appear again every time the display conditions are met.
- 2. Check Regular close button acts as “Never see this message again” link to remove the message, but give the functionality to the close button; the “X” in the top-right corner.
3. Set the Expiry time for your popover. This is handy if you are running time-sensitive promotions, and don’t want the popover to display anymore once the campaign is finished.
4. Show Pop Over allows you to show the popover immediately, or delay its appearance for up to 120 seconds.
Click Add and Activate to finish creating your pop over. Presto! You’re ready to use your new Pop Up!
Here’s our pop up in action!
Editing a Pop Over
Editing a pop over is as simple as:
Click on Pop Overs > Pop Overs. Then hover your mouse over the title of the popover you want to edit to bring up the action menus.
Now just click Edit to open your pop over in Edit mode and make the necessary changes.
This plugin contains several optional addons that you can enable to give the plugin more functionality .
1. Activate the Anonymous loading method addon to enable an additional loading method you can then select under Pop Overs > Settings.
2. Activate the Use Local Geo Database addon if you are having difficulty with the default method (see below for instructions).
3. Activate the Advanced URL rules addon to add 2 new conditions you can use for your popovers. These new rules enable you to use regex to control the popover appearance.
4. Activate the Maximum width rule addon to add a new condition to display your popover only on devices with a viewport or screen greater than the width you specify. Very handy to prevent large popovers from displaying on small mobile screens.
5. Activate the Show on exit rule addon to add a new condition that makes your popover appear only when visitors scroll their mouse away from the page.
6. Activate the Show on click rule addon to add a new condition that makes your popover appear only when a visitor clicks an element on your site that you define.
7. Activate the Post Types rules addon to add 2 new conditions enabling you to fine-tune the post types where your popover should display or not.
8. Activate the XProfile Fields rule addon to add 2 new conditions that enable you to show or hide a popover according to BuddyPress X-Profile fields.
9. Activate the Test Head Footer addon to test for the existence and functionality of wp_head and wp_footer in your active theme.
- These two functions are key elements in many plugins, including this one, and need to be in place for proper operation.
- You can use this add on as a troubleshooter if your Pop Up is not displaying, or as a check before you even get started to ensure everything is in the correct place.
Using a Local Geo-Database
To enable the “Use Local Geo Database” addon (if you are having difficulty with the default method), 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 Use Local Geo Database add-on.
IMPORTANT: Always make a backup of your database before performing operations like this, just to be safe.
If you want to network activate this plugin and use it so popups are global then pop open your wp-config.php and add the following:
If you don’t define this contant but still network activate the plugin, then the control of popovers will be on a per site basis.
The url that we are using to return the country – it should only return the country code for the passed IP address:
If there is a problem with the API, then you can set a default country to use for popover showing. Set this to false if you’d rather have the popover not show in such circumstances