Popup Pro

Our Popup Pro widget is a powerful solution for displaying popups that are triggered by a variety of unique customer actions, such as when a site visitor attempts to leave your site. This widget works with your existing popups to modify and expand the possibilities of customer retention, promotions, and new signups.

Preview: https://demo.wocode.com/popup-pro

Tutorial Video

Setup

WIDGET PLACEMENT AND SIZING

• Drop the widget into your site anywhere you like. Placement of the widget does not impact how or where the popup will appear. We suggest placing it somewhere that will remind you that you have a popup enabled for a page or site, such as at the top of the page or the bottom. The widget placeholder will be seen in the editor and in Preview mode, but will not be seen on the live site.

WIDGET OPTIONS

• Open the widget option panel.
• Linked To Popup: This widget works by connecting to already-existing popups. Use this setting to choose the popup you want to connect the widget to. If you don't have any popups created yet, see the Creating a New Popup section below for instructions on creating a new popup.
• Add Popup Events: This allows you to add and configure events that you can link to the popup. You can use the +Add Event option to add more events, allowing you to link multiple events to the same popup.
• Open Popup On: Use this dropdown to select an event trigger. This list contains all of events that can be used to trigger to the popup.
• Custom CSS Selector: This advanced option allows you to target elements using their CSS class or ID. This is useful when trying to apply the effect to the backgrounds of things where a widget cannot be placed, such as a gallery or slideshow. See the Advanced: Using Custom CSS Selectors section below for more information.
• Show Popup Only Once: This toggle when enabled will only show the popup once per page visit. If disabled, it allows the popup to continue to reappear each time the popup event is triggered.

NOTES ON EVENT TRIGGERS

Here are a few notes on using the event triggers found in the "Open Popup On" dropdown:

• Popups are triggered by the events shown in this list. The list contains a mix of general actions and functions specific to certain widgets.
• The Any External Leading Link Click option will affect all external links including native widgets like WhatsApp, Social Icons, Share Widget etc.
• The Visitor Hovers Cursor Outside of Site (Extreme) option should be used with caution. This is triggered when a site visitor moves their cursor to the browser's address bar, over another tab, basically anywhere off of your site. We suggest enabling the Show Popup Only Once toggle when using this trigger.

CREATING A NEW POPUP

The Popup Pro widget works by connecting to existing popups on your site. If you do not yet have any popups on your site, or would like to create a new one, follow these steps:

• Choose Pages from the menu, and select the Popups tab.
  
• Click the New Popup button to create a new popup. There are many pre-styled examples to get you started. 

ADVANCED: USING CUSTOM CSS SELECTORS

The Apply to setting gives the option for Custom CSS Selectors. This allows you to target most any element on the page, including things that cannot be targeted using the other Apply to options; such as backgrounds of slideshows, galleries, etc.

Using Custom CSS Selectors requires that you identify the class or ID of the element you’re targeting. The best way to do this is to use the Edit HTML/CSS option.

In this example, we will use the class of a gallery as a custom CSS selector.

• Right-click the element you wish to target.
• Select Edit HTML/CSS.
  
• Find the div class and copy it.
  
• Paste the class in the Custom CSS Selector field in the widget.
  
• Note that a period has been added in front of the class name. Class names should begin with a period (.) and IDs should begin with a hashtag (#). This step is required, and is a rule of working with CSS classes and IDs.
• The effect will now be applied to the gallery only.