Popup Maker - User Guide

Popup Maker - User Guide

For pricing and how to add to your website see at the bottom of the page.

Create Your First Popup

Open the Popup Editor

From the WordPress admin, either: 

1)  Open Popup Maker >> All Popups, and select the Add New Popup button at the top of the admin page, or 

2) Click on the Popup Maker >> Add Popup submenu.

Working in the Popup Editor

Classic Editor

Figure 1. Three locations required to create a new popup in the popup classic editor. 

Block Editor

Figure 2. Three locations required to create a new popup in the popup block editor.

Three (3) actions in the popup editor are required to create and publish a new popup: 

Action 
LocationComments
1)  Enter popup name   Popup Name field The popup name will appear on the All Popups admin page in the Popups table Name column.    
2)  Add a popup triggerPopup Settings box >> Triggers tabChoose a free trigger:  Auto Open / Time Delay or Click Open.

Related article: 'Triggers' option settings
3) Click the  Publish 
button.		Publish box (classic editor) or Publish button (top of editor sidebar)Publish saves a popup to the database.

Publishing a Popup on a Live Server

A popup must be set to  Published to display and view it on the front end. However, the  Targeting tab in the popup editor's  Popup Settings box is initially set to display a popup on every page and post of the site. For users who create popups on a live server, that presents a challenge.  The selection of a trigger becomes important to preview a popup, while not annoying visitors by opening that popup on every post and page.

A popup trigger manages how and when a popup will display. The free version of Popup Maker includes 3 triggers: 
TriggerDescription
Time Delay / Auto OpenDisplays a popup after a preset length of time.
Click OpenDisplays a popup when a visitor clicks a specific element on a web page. 
Form SubmissionProcesses a form placed inside a popup.  Use with Popup Maker subscription forms, and WordPress form plugins that integrate with Popup Maker.
Each of the 3 triggers will work to preview a popup in the browser.  The  Time Delay / Auto Open trigger is the simplest to use. It automatically displays a popup on every page and post until the Targeting option is changed. However, the default display on every page can annoy visitors.

Instead, choose the Click Open trigger.  The trigger will only display a popup when the link or page element is selected. Later on, you will need to edit some settings to properly set up this trigger. 

Once the popup is set to  Published, it can be previewed from the classic editor with the Preview button or opened on the front end with the Popup Maker Admin Toolbar. 

Change Popup Maker's Initial Settings to Customise Your Popup

The New Popup in the Browser

From the WP admin, visit the front of the site. The result is a blank popup!  No content was added. The popup is styled using the Popup Maker initial settings.  Adding and publishing a new popup is meant to be simple.  

Initial Popup Settings 

Notice that there were lots of things you  didn’t have to do to create and publish a new popup.  Those initial settings were  preset for you by Popup Maker when you clicked the Publish button. See the following article to review those initial plugin settings. 
Every new popup uses the same set of initial settings. Some initial settings (like the popup theme) can be changed from the plugin Settings admin page.  The rest of the popup settings (trigger(s), cookies, targeting conditions, etc.) are configured in the popup editor's Popup Settings box. Popup themes are customised using the Popup Theme editor.

Add Your Content

At this point, add your popup content. Just like the WordPress post and page editor, the popup editor accepts the same type of content. This includes: 

  • text
  • links 
  • buttons
  • embedded media (i.e., images, graphics, video, audio)
  • shortcodes

Exit Intent Extention

The Exit Intent plugin extension displays a popup when a cursor moves outside the browser window. 

The Exit Intent extension is great for: 

  • Displaying a message on your eCommerce sites when visitors abandon their shopping cart
  • improving email list signup conversions by displaying a signup form
  • Present an incentive or call-to-action to a departing visitor
Right now, this trigger only works on desktop screens where a mouse or trackpad controls a cursor inside a browser window. Exit intent technology does not work on mobile devices, which rely on screen touch.  We are looking for mobile solutions to introduce them in an upcoming release. 

The trigger offers multiple methods:  
  • Top sensitivity: Monitors the cursor's proximity to the top of the browser window  
  • False positive delay: Monitors the length of time that the cursor remains near or above the top of the browser.   

By default, top sensitivity is set to 10 pixels (px). When a cursor moves to within 10px of the top of the browser window, the trigger fires and displays a popup. The default setting is intended to limit accidental popup displays if the cursor is positioned near the top of a page. 

By default, false positive delay is set to 350 milliseconds (ms). When a cursor moves to within the top sensitivity margin and remains in this area longer than the option setting, a popup will display.  The setting is intended to prevent accidental popup displays if a user quickly moves their cursor from above the browser window back onto the page. 

The Exit Intent Trigger in Action 


Due to security updates in modern web browsers, the custom messaging feature provided by the Exit Prevention trigger is no longer available. That trigger should be ignored, and is no longer usable.

In the Popup Editor, Add an Exit Intent Trigger 

Once the Exit Intent extension is installed and activated, either open an existing popup or create a new one in which to set an Exit Intent trigger.  Open the Popup Editor, and scroll to the Popup Settings box. Select the Triggers option tab. 

Select the Add New Trigger button to open the trigger selection box. Choose 'Exit Intent' from the drop down menu. 

The trigger selection box also provides the option to add and link a cookie to the trigger. Cookies control the repeat display of popups in the browser. To work, they must be set  and linked to a popup trigger. 

By default, a cookie is not set and linked to the Exit Intent trigger ( checkbox = 'unchecked' ) when the trigger is added. The trigger can be edited later to add and link a cookie.

If you decide to add a cookie while setting the trigger, refer to the following related article on cookie menu options.

Exit Intent Trigger Settings

'General' Option Settings

The Exit Intent trigger provides 2 option settings; top sensitivity, and false positive delay. Each setting can be modified using either the range slider, or by entering a field value (located to the right of the slider). 

Both option setting fields accept any value greater than the initial default maximum. The range slider will automatically reset the maximum, and display the new input value within the adjusted range.

Top Sensitivity --  Default: 10 px (pixels). This defines the distance from the top of the browser window where the visitor's cursor movement is detected. How close do you want the visitor's cursor to get to that border before the popup is opened?

We recommend sticking with the default value of 10px. It can be adjusted for specialized popups or testing.

False Positive Delay -- Default: 350 ms (milliseconds).  This defines the time delay for recognizing cursor movement near or above the top margin of the browser window. If a visitor moves their cursor above the browser, and then quickly moves the cursor back in within the time delay period, the popup will not trigger.  The delay is intended to reduce a 'false positive' trigger event, and display the popup only to visitors who are intent on leaving the page.  

The settings represents a fine line between too much and not enough delay time.  We recommend sticking with the default time delay until you know what works best for you.

Note: If the false positive delay time is set too high, and a visitor closes the browser window before the delay period ends, the popup will not be seen.

If you have not set and linked a cookie to the Exit Intent trigger, we recommend at this point that you add one. This will prevent a popup from repeatedly displaying every time a visitor moves their cursor outside the browser window. 

Visitors who return to the site repeatedly may find the popup display annoying if it displays each time they move their cursor outside the browser window. Select an acceptable expiration time for the cookie. The default value is 1 month. 

Cookies are set from the Popup Settings box >> Triggers option tab. Select the button labeled Add New Cookie to begin the process. See the related article below for guidance on how to set and edit a cookie. Select the Publish or Update button to save any changes to the popup. 

Test the Trigger on the Front-End

Visit the front-end of the site and test the popup.  If a cookie is set and linked to a trigger, it will prevent the redisplay of the popup for the term set in the 'Cookie Time / Settings' field. The cookie can be cleared from the browser using the Popup Admin Toolbar.  See the related article for details on this feature. 


Scroll Extention

This extension provides users with a Scroll trigger to display a popup when visitors reach or pass a specific point on the screen. The trigger can be set to display a popup based either on vertical scroll distance or encounter with either a shortcode or HTML page element. 

Distance option units include: 

  • percent ( % ), 
  • pixels ( px ), or 
  • rem. 

The latter unit ( 'rem' ) is based on the relative font-size set in a site's stylesheet. 

Element settings detect for either an embedded shortcode or CSS selector added to the content of a post, page, or custom post type. The shortcode is registered by Popup Maker and must be added within the post, page, or custom post type editor. 

The CSS Selector method detects HTML attributes embedded in a post or page in the same way as the Extra CSS Selectors method used by the Click Open trigger.  See the related article link below for an introduction on the use of that method.

The Scroll Trigger in Action 

The following video demonstrates the use of a Scroll trigger popup to display a banner-style popup that contains an email signup form.

Learn to create a banner-style, high conversion popup using the Scroll trigger extension.

Setup the Trigger

Add New Trigger

1.  In the Popup Editor, go to the 'Popup Settings' box -> 'Triggers' option tab, and select the 'Add New Trigger' button.  

2.  A popup box labeled 'Choose what type of trigger to add?' will appear. Select the ‘Scroll’ option, then select the 'Add' button.


Cookies control the repeated display of popups in the browser.
To work, they must be set and linked to a popup trigger. 
If you want the scroll trigger popup to always display, then do not set nor link a cookie to the trigger. 
If you want to control the repeat display of the scroll trigger popup, then follow the instructions in this section for the cookie setup.

3.  Select the checkbox labeled 'Would you like to set up a cookie as well?' to set and link the trigger to a cookie. 

4.  The plugin will prompt with a new option menu labeled  'When should your popup be created?'.  The plugin default option is set to 'On Popup Close', with four (4) additional option settings available. 

Either accept the plugin default, or select a different option. Click the button labeled 'Add' to proceed to the next step. 

Confirm Cookie Setting in the Scroll Trigger Settings box

5. The option field labeled 'Cookie Name' should contain a cookie ID formatted as 'pum-{integer}'. In the screenshot shown above, the plugin assigns the cookie an ID of 'pum-450'. 
6. Accept the cookie ID by selecting the 'Add' button in the lower right corner. 

7.  In the 'Popup Settings' box, the ‘Scroll’ trigger and ‘On Popup Close’ cookie are now linked by the cookie ID set in the Scroll Trigger Settings box.

Scroll Trigger Settings box

The Scroll trigger and a cookie are now linked. But the remaining trigger options are not yet set. Let's edit the trigger and review the available option settings. 

On the Triggers option tab of the Popup Settings box, select the pencil icon in the Actions column.  This will open the Scroll Trigger Settings box where the remaining options settings will be reviewed. 

‘General’ option settings tab

Distance

The Distance option sets the Scroll trigger to display a popup when a visitor vertically scrolls a preset distance down a page. 

Plugin default value: 75% 

Distance (units): pixels (px)  |  percent ( % )  |  rem  // default units: percent ( % )

Enter the desired value in the input field. On focus, the input field displays a set of up/down arrows that increment the entered value by +/- 1.  Focus and click the units menu to view the options and choose between them. 

Element

The Element option sets a Scroll trigger to display a popup when a visitor scrolls to or beyond a targeted page element. The element can either target a Popup Maker shortcode, or a CSS or jQuery selector.  CSS selectors can target any class or id attribute added to an HTML element or tag.  The targeted shortcode or selector must be added to the content of a post or page.  

Unlike other Popup Maker shortcodes, the Scroll Trigger Point shortcode ( tag: [pum_scroll_trigger] ) must be added into the content editor of a page, page, or custom post type registered with WordPress.  The shortcode is not available in the Popup Editor.

When Should the Popup Trigger?

The Element option provides users with 4 different options to display a scroll trigger popup. Each option is demonstrated in the next section.

What Type of Element Do You Want to Use as a Trigger Point?

Users can select from 2 options; Shortcode, or CSS Selector.

Shortcode

See the following related article to set the Scroll Trigger Point shortcode in the editor of a post, page, or custom post type.

CSS Selector

Each Element option is demonstrated below in 4 separate videos ( run time: 4 - 10 seconds each ).  The Popup Maker icon was added to some dummy page content on a test site.  An HTML class of popup-maker-icon was added to the icon's <img> tag ( <img class="popup-maker-icon" src="icon-file.png"> ).  A Scroll trigger was set to an 'Element' option targeting the  .popup-maker-icon CSS selector. 

Close When Scrolling Back Up (Checkbox)

Default: unchecked.  By default, the popup will remain open in the browser when a visitor scrolls back up the page. To close the popup on an upward vertical scroll past the popup trigger point, set the checkbox to ‘checked’.

The next video demonstrates a Scroll popup configured with the following settings:

  • Type of scroll trigger: Element;
  • Popup triggers when: Element completely scrolled off screen;
  • Type of element used at trigger point: CSS Selector; 
  • Close when scrolling back up: Yes; and 
  • Disable Overlay: checked (enabled). 

To disable the popup overlay (background) layer, go to: ' Popup Settings' box >> 'Display' tab >> 'Advanced' category >> 'Disable Overlay' checkbox. 

See the previous section 'Link the Trigger to a Cookie'.

Overview and pricing of this feature. Click here

Troubleshooting this feature? Click here


    • Related Articles

    • Pop Ups (Basic) - User Guide

      For pricing and how to add to your website see at the bottom of the page. This article guides new users to quickly create a popup using the fewest steps possible.  Popups are created and edited in the popup editor. As a new user, you need to know a ...

    • Popup Maker - Troubleshooting Guide

      Can't see any Troubleshooting Guides on this page? This means we don't have any, please raise a ticket here if you have an issue and help us build out our guides! Overview and pricing of this feature. Click here Looking for the user guide for this ...

    • AutomateWoo - User Guide

      For pricing and how to add to your website see at the bottom of the page. AutomateWoo is a marketing automation plugin which integrates directly with your WooCommerce store. Using automated marketing campaigns and a unique set of tools, AutomateWoo ...

    • Basic Wordpress - User Guide

      Permalinks Overview Permalink is short for “permanent link.” Permalinks are permanent URL structures used to help organise the content of your website (pages, posts, products, etc.) so it can be efficiently navigated, shared, and referenced by users ...

    • Gravity Forms User Registration - User Guide

      For pricing and how to add to your website see at the bottom of the page. Create Your Form The first step in integrating the User Registration Add-On is going to be creating the form you would like to use. This can include existing forms. The only ...