Installing
Once you've completed your purchase, you'll have two ways to download the plugin:
- Email: Check your inbox for an email from Wow-Estore. This email will contain a download link for the plugin.
- Account Dashboard: Alternatively, you can download the plugin directly from your Wow-Estore.com account. Here's how:
- Log in to Wow-Estore.com: Use the login credentials you received in your email.
- Access Your Account Dashboard: Look for a section labeled "Account".
- Find the Downloads Section: Within your account dashboard, locate a section titled "Downloads,".
- Download the Plugin: You should see a list of your purchased products, including the plugin. Locate the specific plugin and click the download link associated with it.
Note: In some cases, this file may unzip as you download it, and instead appear as a regular folder. However, the folder must be zipped to use the WordPress plugin uploader. For more details on how to zip and unzip files, be sure to check out these guides for Windows and Mac operating systems.
Once you’ve downloaded your zip file, go ahead and navigate to the site where you’d like to install PRO plugin. Then, inside the admin dashboard, go to Plugins > Add New (1) and click the Upload Plugin (2) button.
From here, you’ll see the option to upload the plugin. Click on the Choose File button and select the Pro plugin zip file you just downloaded. After your file is uploaded, click on the Install Now button
This will begin the installation process for you. Once the plugin is installed, click on the Activate Plugin button to activate Pro plugin on your site.
After activating the plugin, be sure to activate your PRO plugin license key to receive automatic updates and plugin support.
- Go to the page 'Wow-Plugins' in dashboard
- Select the plugin
- Enter your license key, that you recived in email
- Click the button 'Activate plugin';
Congratulations! You've successfully installed and activated the PRO plugin. Now, you can start exploring its features and take your WordPress site to the next level.
Content
Live Preview
Once you've finished adding content to your popup, take advantage of the Popup Preview button. This handy feature allows you to see exactly how your popup will look and behave to your visitors before making it live on your website.
Adding Content to Popups
Popup Box Pro allows you to incorporate a wide variety of content into your popups, making them highly customizable and engaging. You have the flexibility to use either the classic editor or the text editor.
Shortcode Integration
The plugin supports shortcodes from other plugins. You need just insert the shortcode into the popup content.
Built-in Shortcodes
Popup Box Pro provides a set of pre-defined shortcodes for common popup elements:
videoBox
: Embed a video from YouTube or Vimeo directly into your popup.buttonBox
: Create a button with a custom link or a close button for the popup.iframeBox
: Insert any iframe content, such as a PDF file or a map, within the popup.
Dynamic Content with Variables
For generating dynamic content that changes with each opening popup, Popup Box Pro supports the following syntax:
{{Variable1 | Variable2 | ... | Variable N}}
- Replace Variable1, Variable2, etc., with your desired values.
- Each time the popup opens, a random variable from the list separated by pipes (|) will be displayed.
Example
Let's create a popup that displays a random name and city combination in popup content:
{{David|John|Paul|Mark|James|Andrew|Scott|Steven|Robert}} from cities}} {{New York | Washington | Berlin | Kyiv | Vilnius | Paris | Tallinn }} just buy the product!
With this content, every time the popup opens, your users will see a notification with a randomly chosen name and city.
Style
Customize the appearance and behavior of your Popup Box Pro popups to perfectly match your website's design and user experience. This section guides you through the various styling options available.
Popup
Properties
- Z-index: This property controls the stacking order of your popup. Higher z-index values ensure the popup appears on top of other elements on your page.
- Popup Animation: Select an animation effect that defines how your popup appears and disappears.
- Block Page: Choose whether you want to prevent users from scrolling the background page while the popup is visible.
Dimensions and Positioning:
- Width & Height: Set the desired width and height for your popup.
- Position: Specify the exact location of your popup on the screen using:
- Top: Adjusts the popup's vertical position from the top of the page.
- Bottom: Adjusts the popup's vertical position from the bottom of the page.
- Left: Adjusts the popup's horizontal position from the left side of the page.
- Right: Adjusts the popup's horizontal position from the right side of the page.
Visual Design
- Radius: Define the curvature of the popup's corners for a smoother aesthetic.
- Padding: Add space between the popup's content and its border.
- Shadow: Apply a shadow effect to your popup and choose a custom shadow color.
- Background Color: Select a solid background color for your popup.
- Background Image: Optionally, set a background image for your popup.
Overlay
- Overlay: Show or hide a background overlay behind the popup. This can help draw attention to the popup.
- Overlay Animation: Choose an animation effect for the popup's overlay.
Content
Control the visual presentation of your popup's text using these options:
- Font Family: Choose the typeface that best complements your website's design and content.
- Font Size: Set the desired size for the main text within your popup.
- Padding: Specify the amount of space between the popup's content and its border. This creates visual breathing room.
- Border Style: Select a border style (e.g., solid, dashed, dotted) to further define the content area.
- Border Thickness: Control the width of the border around the popup's content.
- Border Radius: Define the curvature of the content area's corners for a softer appearance.
- Border Color: Choose a color for the border surrounding the popup's content.
Close Button
Configure the appearance and behavior of your popup's close button to match your design preferences and ensure a clear closing mechanism for users.
- Enable Close Button: Choose whether to include a close button for your popup.
- Close Button Type: Select the style you want for the close button:
- Text: Displays a text label (e.g., "Close").
- Icon: Uses an icon to represent the close action ("X").
- Box: Creates a button with "X" and background
- Size: Set the preferred size for the close button.
- Text (For Text Type Only): If you chose the "Text" type, enter the text you want to display on the button (e.g., "Close").
- Location: Specify where the close button should appear within the popup:
- Top Left
- Top Right
- Bottom Left
- Bottom Right
- Placement: Determine whether the close button should be positioned:
- Inside: Placed within the border of the popup content.
- Outside: Placed outside the border of the popup content.
- Color: Select a color for the close button.
- Background: Choose a background color for the close button (applicable to "Box" and potentially "Text" types).
Mobile Devices
Set the popup width for mobile devices if you need
- Enable on Mobile: Choose whether to display your popup on smaller screens (phones and tablets). You can also set a specific screen size breakpoint to define "mobile."
- Width: Set a custom width for your popup on mobile devices to ensure optimal viewing and user experience.
Settings
Triggers
Control exactly when and how your Popup Box Pro popups appear on your website using these trigger options:
Trigger Types:
- Auto: Opens the popup automatically when the page loads. You can optionally set a delay in seconds to control display timing.
- Click: Triggers the popup when a user clicks on a specific element:
- Class: Use a class name within an anchor tag
<a>
or a span element<span>
to target a button or element (e.g.,<span class="ds-open-popup-11">Open Popup</span>
). - URL: Opens the popup when a user clicks a link with a specific URL fragment (e.g.,
<a href="#ds-open-popup-11">Open Popup</a>
).
- Class: Use a class name within an anchor tag
- Hover: Makes the popup appear when a user hovers over an element:
- Class: Target an element using its class name (e.g.,
<span class="ds-open-popup-11">Open Popup</span>
). - URL: Trigger the popup when a user hovers over a link with a specific URL fragment (e.g.,
<a href="#ds-open-popup-11">Open Popup</a>
).
- Class: Target an element using its class name (e.g.,
- Scrolled: Opens the popup when the user scrolls down the page a certain percentage (set using the Scroll Distance option).
- Right Click: Displays the popup when a user right-clicks on the page.
- Selected Text: Triggers the popup when a user selects text on the page.
- Exit: Shows the popup as the user attempts to leave the website (useful for exit-intent campaigns).
- Loop: Opens the popup multiple times with random intervals between each display. You can configure the initial delay, final delay, and the total number of popups to be shown using the Start Delay, End Delay, and Counter
options.
Show Once:
Enable this option to set a option that prevents the popup from showing again to the same user for a specified period (in days).
Closing Popup
Determine how users can close your popups and what actions occur after closure with these settings:
Closing Triggers:
- Overlay Click: Choose whether clicking the popup's background overlay should close the popup.
- Esc Key: Enable or disable the ability to close the popup using the Esc key on the keyboard.
- Auto-Close: Optionally set a delay in seconds to automatically close the popup after it appears.
Post-Closure Actions:
- Redirect on Close: Enable this option to redirect users to a different URL after they close the popup.
- Redirect Target: Select how the redirected URL opens:
- Same Tab: Opens the target URL in the same browser tab.
- New Tab: Opens the target URL in a new browser tab.
Video support
Popup Box Pro seamlessly integrates with videos, offering user-friendly playback controls:
- Video support - Check this option to enable video playback within your popups.
- Video Autoplay - Enable this feature to have videos automatically play when the popup opens. This can be a great way to grab user attention immediately.
- Stop on close - Choose whether the video should automatically stop playing when the user closes the popup. This helps prevent unnecessary audio and resource usage.
Google Event Tracking
Gain valuable insights into user engagement with your popups by integrating Google Analytics event tracking. This allows you to monitor how often popups are opened and closed, helping you optimize their effectiveness.
To track popup interactions, configure the following event tracking parameters:
- Category: Define a broad category for your popup events (e.g., "Popup Box).
- Action: Specify the specific action being tracked. Use descriptive names like "Popup Opened" or "Popup Closed" for clarity.
- Label (Optional): If applicable, use this field to provide additional details about the popup, such as its ID or title.
- Value (Optional): Assign a numerical value to quantify the interaction (e.g., set a value of 1 for each popup open). However, keep in mind that Google Analytics might not display values in all reports.
Targeting & Rules
This section empowers you to control exactly where and when your popup appears on your WordPress website. Utilize a combination of these targeting options to deliver a tailored user experience.
Display Rules
- Everywhere: The item will be visible across all your website's pages.
- All Posts: The item displays exclusively on post pages.
- Selected Posts: Target specific posts by entering their unique IDs. Separate multiple IDs with commas.
- Post Has Category: The item appears on posts belonging to the chosen category. Enter the category ID.
- Post Has Tag: The item displays on posts with the selected tag. Enter the tag ID.
- Page Type: Select the page types where the item will be displayed. Options include Homepage, Posts Page, Search Pages, and 404 Pages.
- All Archives: The item appears on all archive pages.
- All Categories: The item displays solely on category pages.
- All Tags: The item displays solely on tag pages.
- All Dates: The item appears exclusively on date archive pages.
- All Authors: The item displays on all author pages.
- Category, Tag, Author: Target the item to specific taxonomies by entering their IDs.
Responsive Visibility
- Remove on Mobile: Completely remove the item from mobile devices.
- Remove on Desktop: Completely remove the item from desktop devices.
Other Rules
Enable for Specific Language
This option allows you to restrict the popup visibility to specific languages on your multilingual website. If enabled, you'll be able to choose the languages where the item should appear. Also you can set the custom locale, in some cases, it is necessary to set a language that is not in the languages list.
Trigger Popups Based on URL and Referrer
Activate by URL:
Show the popup only if the user visits a specific URL containing a designated parameter. For example, the popup will appear if the URL is example.com?popup=active.
Activate by Referrer URL:
Target users who arrive at your website from a specific referring domain. This is useful for campaigns where you want to display popups only to visitors coming from a particular source, such as a partner website (e.g., only show the popup if the referrer URL is producthunt.com).
Target Your Audience with Geotargeting
Show relevant popups to visitors based on their location! With geotargeting, you can:
- Focus on Specific Countries: Target popups to visitors from countries that matter most to your business.
- Easy Country Selection: Simply enter the two-letter country codes (e.g., US, UK, CA) of the countries you want to target.
- Multiple Country Targeting: Separate multiple country codes with commas for broader reach.
- Find Country Codes: Need help? A full list of two-letter country codes can be found on Wikipedia.
Permissions
- Select User Roles: Choose the user roles (e.g., Administrator, Editor, Author) who can see the item on the page.
Schedule
- Set Schedule: Define a schedule for the popup visibility. Specify the days of the week, time of day, and specific dates for display.
Hide Based on Browser
- Select Browsers: Choose specific browsers (Opera, Chrome, Edge, Safari, Firefox, Internet Explorer, etc.) where you want to hide the popup.
Other Options
Fine-tune your item: Manage visibility, testing, organization, and data transfer with these additional options.
- Status: Deactivate: Deactivate the menu from appearing on the frontend of your website.
- Test Mode: Enable this option to display the item only for administrators, allowing you to test its functionality on your live site without affecting visitors.
- Tag: Assign tags to your items for easier searching and organization within the list of elements.
- Link: Insert the link to the page with the Item
List of Items
- Bulk Actions: Perform actions on multiple menus at once. Options include Activate, Deactivate, and Enable/Disable Test Mode.
- Duplicate Item: Quickly create a copy of an existing menu for faster editing.
- Export: Export selected menus to a JSON file. This allows you to save backups or transfer menus to other websites using the plugin.
Import/Export
- Export: Export all your items to a single JSON file for backup purposes or transferring them to other websites.
- Import: Import items from a JSON file. This allows you to import previously exported items or item from other websites using the plugin.
- Update Item if Item Already Exists: When importing items from a JSON file, enable this option to update existing items on your site with the imported data.