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:
  1. Log in to Wow-Estore.com: Use the login credentials you received in your email.
  2. Access Your Account Dashboard: Look for a section labeled "Account".
  3. Find the Downloads Section: Within your account dashboard, locate a section titled "Downloads,".
  4. 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.

1. Go to the page 'Wow-Plugins' in dashboard
2. Select the plugin
3. Enter your license key, that you recived in email
4. 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 modal window, take advantage of the ‚Modal Preview‘ button. This handy feature allows you to see exactly how your modal window will look and behave to your visitors before making it live on your website.

Adding Content to Modal Window

Modal Window 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 modal window content.

Built-in Shortcodes

Modal Window Pro provides a set of pre-defined shortcodes for common modal elements:

• videoBox: Embed a video from YouTube or Vimeo directly into your modal.
• buttonBox: Create a button with a custom link or a close button for the modal.
• iframeBox: Insert any iframe content, such as a PDF file or a map, within the modal.
• wow-icon: Insert the Font Awesome Icon into the content.
• w-row - create row.
• w-column - create a column and has the attributes:
  • width - this value can be from 1 to 12. Value 12 = 100% width for column.
  • align - this value can be: left, center, right.
• {form} - For insert form into modal window content use this tag.

Style

General

Properties

• Z-index: This property controls the stacking order of your modal. Higher z-index values ensure the modal appears on top of other elements on your page.
• Block Page: Choose whether you want to prevent users from scrolling the background page while the modal is visible.
• Width & Height: Set the desired width and height for your modal.

Visual Design

• Radius: Define the curvature of the modal's corners for a smoother aesthetic.
• Shadow: Apply a shadow effect to your modal and choose a custom shadow color.
• Background Color: Select a solid background color for your modal.
• Background Image: Optionally, set a background image for your modal.
• Overlay: Show or hide a background overlay behind the modal. This can help draw attention to the modal.
• 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 modal.
• Padding: Specify the amount of space between the modal's content and its border.
• 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 modal'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 modal's content.
• Scrollbar Thickness: Adjust the thickness of the scrollbar within the modal window to match your design preferences and improve user interaction.
• Scrollbar Color: Customize the color of the scrollbar to align with your site's aesthetic and ensure it stands out or blends in as needed.
• Scrollbar Background: Set the background color of the scrollbar track, enhancing the visual appeal and coherence with your overall design.

Location

Determine the placement of your modal windows on the screen with customizable options for top, center, bottom, left, right, and custom positions, ensuring optimal visibility and user engagement.

• Top: Adjust the modal's vertical position from the top of the page.
• Bottom: Adjust the modal's vertical position from the bottom of the page.
• Left: Adjust the modal's horizontal position from the left side of the page.
• Right: Adjust the modal's horizontal position from the right side of the page.

Title

Customize the appearance of your modal window title, including font, size, color, alignment, background, and padding, to perfectly match your website’s design and enhance visual appeal.

• Used title as Modal Title - Automatically use the title of the linked content as the title for the modal window, streamlining the creation process and ensuring consistency across your site.

Close Button

Customize the appearance and behavior of the close button for your modal windows, including its design, size, color, and position to enhance user control and experience.

Mobile Rule

Set the modal width for mobile devices if you need

• Mobile screen: Choose whether to display your modal 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 modal on mobile devices to ensure optimal viewing and user experience.

Settings

Triggers

Control exactly when and how your Modal Window appears on your website using these trigger options:

Trigger Types:

• Auto: Opens the modal automatically when the page loads. You can optionally set a delay in seconds to control display timing.
• Click: Triggers the modal when a user clicks on a specific element:
  • Class: Use a class name within an anchor tag or a span element to target a button or element (e.g., Open modal).
  • URL: Opens the modal when a user clicks a link with a specific URL fragment (e.g., Open modal).
• Hover: Makes the modal appear when a user hovers over an element:
  • Class: Target an element using its class name (e.g., <span class="wow-modal-id-1">Open modal</span>).
  • URL: Trigger the modal when a user hovers over a link with a specific URL fragment (e.g., <a href="#wow-modal-id-1">Open modal</a>).
• Scrolled: Opens the modal when the user scrolls down the page a certain percentage (set using the Scroll Distance option).
• Right Click: Displays the modal when a user right-clicks on the page.
• Selected Text: Triggers the modal when a user selects text on the page.
• Exit: Shows the modal as the user attempts to leave the website (useful for exit-intent campaigns).

Show Once:

Enable this option to set an option that prevents the modal from showing again to the same user for a specified period (in days).

Timing: Configure when cookies should be set to control the display frequency and behavior of modal windows.

• Options:
  • After Open: Set cookies when the modal window opens.
  • After Close: Set cookies when the modal window closes.

Custom Selectors

Add custom selectors to open the modal window, providing greater flexibility and control over modal interactions.

Animation

Enhance the visual appeal of your modal windows with a variety of animation effects and transitions, allowing you to create engaging and dynamic user experiences. Customize the animation style and timing to suit your website’s design and capture visitor attention.

Closing Modal

Configure the behavior of your modal windows upon closing, including options for auto-close timing, redirecting users to specific URLs, disabling the close button temporarily. Enhance user experience by controlling how and when modals are dismissed.

• Remove Close Button: Option to remove the close button from the modal window, ensuring users focus on the content or take a required action.
• Overlay: Enable closing the modal window by clicking on the overlay background, offering a convenient way for users to dismiss the modal.
• Esc: Allow users to close the modal window by pressing the Esc key for convenient and intuitive interaction.
• Form Submission: Automatically close the modal window after a form within it is submitted, streamlining the user experience. This option works with integrated forms and plugins Contact Forms 7 and WPForms.
• Delay: Set a delay before the close button appears on the modal window, ensuring users have ample time to view the content.
• Auto Close: Enable the modal window to close automatically after a specified duration, improving user flow and reducing interruptions.
• Redirect after Close: Redirect users to a specific URL after the modal window is closed, guiding them to additional content or offers.
• Redirect Target: Specify the target URL for the redirection after the modal window is closed, enhancing navigational control.
• Custom Selectors: Add custom selectors to close the modal window, providing greater flexibility and control over modal interactions.

Video support

Modal Window Pro seamlessly integrates with videos, offering user-friendly playback controls:

• Video support - Check this option to enable video playback within your modals.
• Video Autoplay - Enable this feature to have videos automatically play when the modal 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 modal. This helps prevent unnecessary audio and resource usage.

Google Event Tracking

Gain valuable insights into user engagement with your modals by integrating Google Analytics event tracking. This allows you to monitor how often modals are opened and closed, helping you optimize their effectiveness.

To track modal interactions, configure the following event tracking parameters:

• Category: Define a broad category for your modal events (e.g., "Modal Window»).
• Action: Specify the specific action being tracked. Use descriptive names like "Modal Opened" or "Modal Closed" for clarity.
• Label (Optional): If applicable, use this field to provide additional details about the modal, 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 modal open). However, keep in mind that Google Analytics might not display values in all reports.

Targeting & Rules

Display Rules

Define the specific conditions under which your modal windows appear. Tailor your modal display to various content types and user interactions for precise targeting and enhanced user experience.

• Everywhere: Display the modal window on all pages and posts across the site.
• Shortcode: Use a shortcode to place the modal window in specific content areas manually.
• All Posts: Show the modal window on all blog posts.
• Selected Posts: Choose specific posts to display the modal window.
• Post has Category: Display the modal window on posts that belong to a specific category.
• Post has Tag: Show the modal window on posts tagged with a particular term.
• All Pages: Display the modal window on all pages of your site.
• Selected Pages: Choose specific pages to show the modal window.
• Page Type: Target modal window display based on the type of page, such as front page, search results, or 404 pages.
• All Archives: Show the modal window on all archive pages.
• All Categories: Display the modal window on category archive pages.
• All Tags: Show the modal window on tag archive pages.
• All Authors: Display the modal window on author archive pages.
• All Dates: Show the modal window on date archive pages.
• Category: Target specific category archive pages for modal window display.
• Tag: Show the modal window on specific tag archive pages.
• Author: Display the modal window on pages authored by a specific user.
• All Custom Posts: Show the modal window on all custom post types.
• Selected Custom Posts: Choose specific custom post types to display the modal window.
• Custom Post has Taxonomy: Display the modal window on custom posts that belong to a particular taxonomy.
• Archive Custom Posts: Show the modal window on archive pages for custom post types.
• Custom URL: Allows targeting of modal displays based on specific URL parameters, enhancing customization and control over where modals appear.

Responsive Visibility

Control the visibility of your modal windows across different device types and screen sizes to ensure an optimal user experience on all platforms.

• Hide on Smaller Screens: Prevent the modal window from displaying on screens smaller than a specified width (in pixels).
• Hide on Larger Screens: Prevent the modal window from displaying on screens larger than a specified width (in pixels).
• Remove on Mobile: Disable the modal window on mobile devices entirely, ensuring it only appears on desktops.
• Remove on Desktop: Disable the modal window on desktop devices, ensuring it only appears on mobile devices.

Permissions

Set specific permissions for displaying modal windows based on user roles. Customize which user groups (e.g., Administrators, Editors, Authors) can view or interact with your modals, ensuring relevant content reaches the appropriate audience.

Other

Utilize additional targeting and activation features to enhance the effectiveness and relevance of your modal windows. These options provide greater control over when and how your modals are displayed.

• Geotargeting: Show modal windows based on the geographic location of your website visitors, enhancing targeted engagement by tailoring content to regional audiences.
• Show After Popup: Display a modal only if a specific popup, which has the 'Show only once' option enabled, has already resulted in a conversion. This enhances targeted engagement by following up with interested users.
• Enable for Specific Language: Restrict modal visibility to users with a specific language setting, ensuring that the content is relevant and understandable for the intended audience.
• URL has param: Trigger the modal window to open if the URL contains a specific parameter, such as modal=active, allowing targeted content delivery based on URL parameters.
• URL has Hash:  Activate the modal window when the URL contains a specific hash, enabling precise control over modal activation.

Schedule

Control when your modal windows appear by scheduling them based on specific days, times, or dates. This allows you to plan and promote time-sensitive events or campaigns effectively, ensuring your messages reach users at the optimal moment.

Hide Based on Browser

Customize the visibility of your modal windows depending on the user's browser. Selectively hide modals for specific browsers to ensure compatibility and enhance user experience across different web environments.

Floating Button

Enhance user interaction by adding a customizable floating button to trigger your modal windows. Adjust its location, style, and animation to seamlessly integrate with your website’s design.

• Location: Position the floating button anywhere on the screen (e.g., bottom right, bottom left) to ensure optimal visibility and accessibility.
• Style: Customize the appearance of the floating button, including size, shape, color, and icon, to match your website’s aesthetics.
• Animation: Add animation effects to the floating button, such as bouncing or fading, to attract attention and encourage user interaction.

Form

Easily integrate and customize forms within your modal windows to enhance user engagement and data collection. Tailor the form’s appearance to match your website’s design.

• Easily integrate and customize forms within your modal windows to enhance user engagement and data collection. Tailor the form’s appearance to match your website’s design.
• Form Style: Adjust the overall style of the form, including layout, background color, and borders, to create a cohesive look.
• Fields Style: Customize the appearance of the form fields, such as input boxes, including font, size, color, and borders.
• Button Style: Design the form submission button by modifying its size, color, font

Email Settings

Manage and customize email notifications sent after form submissions within your modal windows. Ensure both admins and users receive appropriate confirmation and information.

• Confirmation Text: Set the text that will be displayed to users after they submit the form, providing them with immediate feedback.
• Email to Admin: Configure the email notifications sent to the admin, ensuring they receive timely updates about form submissions.
• Email to User: Customize the email confirmation sent to users after they submit a form, enhancing user experience and communication.
• Tags for Email Content: Use tags like {name}, {email}, and {text} to dynamically insert user-provided information into the email content, making the messages personalized and relevant.

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.