Wow Modal Windows Pro Documentation v 5.5

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.

---

Changelog

== Version 5.5 ==

• Added: attribute aria-live to notify screen readers of the popup’s sudden appearance.
• Implemented: WCAG compliance improvements for the modal window.

== Version 5.4.2 ==

• Fixed: shortcode \'iframeBox\'

== Version 5.4.1 ==

• Updated: UI elements
• Updated: FontAwesome Icon 6.7.1

== Version 5.4 ==

• Added: support custom posts for shortcode `contentBox`

== Version 5.3.2 ==

• Added: fullscreen option for shortcode video

== Version 5.3.1 ==

• Fixed: main icon in the admin menu.
• Fixed: minor bugs
• Update: translate file
• Fixed: save the form in modal window content

== Version 5.3 ==

• Added: New shortcode [contentBox] for Modal Window: Dynamically loads and displays linked content within the modal when clicking on internal site links. Requires Rest API to be enabled. Video Tutorial

== Version 5.2 ==

• Added: Control the display of the plugin in the dashboard based on users\' roles.

== Version 5.1.4 ==

• Fixed: Side options of the modal window.

== Version 5.1.3 ==

• Added: Loading Lazy to iframes

== Version 5.1.2 ==

• Updated: FontAwesome Icon to version 6.6
• Fixed: Escaping the shortcode for icon
• Fixed: font family for fonticonpicker

== Version 5.1.1 ==

• Fixed: Mobile rules were not functioning correctly.

= Version 5.1 =

• Added: setting for option \'Show only once\' -> \'Timing\': Configure when cookies should be set to control the display frequency and behavior of modal windows.

= Version 5.0.1 =

• Fixed: download script ModalWindow

= Version 5.0 =

• Added: Display Rules - Custom URL: Allows targeting of modal displays based on specific URL parameters, enhancing customization and control over where modals appear.
• Added: Background color for Title.
• Added: Ability to add custom selectors for opening and closing the modal window, enhancing customization and control over modal triggers.
• Added: Scrollbar Style - Customize the scrollbar for the modal window if the content is longer, allowing for a more consistent and visually appealing user experience.
• Added: Multi Display Rules - Add several Display Rules to control exactly where your menus appear using shortcodes, page types, post categories/tags, author pages, and date archives.
• Added: Multi Scheduling - Schedule popup appearances based on specific days, times, and dates. This allows you to promote temporary events or campaigns without cluttering your website permanently.
• Added: Resource Optimization - Choose to hide the popup on mobile or desktop devices to optimize for different screen sizes.
• Added: 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.
• Added: Geotargeting - Display targeted popups based on the country location of your website visitors.
• Added: 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.
• Added: Activate by URL - Show the popup only if the user visits a specific URL containing a designated parameter.
• Added: Tag, link, and button \'Duplicate\' in the modal window option.
• Added: Open modal window content in HTML Editor.
• Added: New functions in the modal window content editor.
• Changed: Live modal window preview.
• Improved: Refreshed Interface - Revamped the plugin\'s dashboard page style for a more intuitive and user-friendly experience.
• Fixed: Floating button animation.
• Fixed: Diligently addressed minor bugs to ensure a flawless plugin experience.

= Version 4.4.2 =

• Fixed: dynamic property for PHP 8.2

= Version 4.4.1 =

• Fixed: issue in escaping shortcode attributes

= Version 4.4 =

• Added: option for activation modal window via URL parameters

= Version 4.3.8 =

• Added: possible to add the custom class to the button from shortcode buttonBox

= Version 4.3.7 =

• Fixed: buttons \'Media\' and \'shortcodes\' for popup content

= Version 4.3.6 =

• Fixed: minor bugs

= Version 4.3.5 =

• Fixed: scroll modal content in mobile devices
• Fixed: minor bugs

= Version 4.3.4 =

• Added: attributes id, class, style to iframe shortcodes
• Fixed: shortcode preview script

= Version 4.3.3 =

• Added: option Export/Import
• Changed: support page
• Fixed: emoji in modal window content

= Version 4.3.2 =

• Fixed: function \'depending language\'

= Version 4.3.1 =

• Fixed: check, if jQuery is ready

= Version 4.3 =

• Added: the option \'type date\' for schedule
• Added: option for display modal window depending on the browser

= Version 4.2.3 =

• Added: set cookie via a click on class \'modal-only-once\'
• Fixed: show modals in taxonomy

= Version 4.2.2 =

• Fixed: button time pause

= Version 4.2.1 =

• Fixed: bug with icons
• Fixed: bug with button animation

= Version 4.2 =

• Fixed: bug with color-picker-alpha
• Updated: Font Awesome Icons to version 5.14

= Version 4.1.3 =

• Fixed: z-index property for the button

= Version 4.1.2 =

• Fixed: save to database

= Version 4.1.1 =

• Fixed: fix conflict with Divi theme
• Fixed: fix conflict with form plugins

= Version 4.1 =

• Added: Shortcode for iframe

= Version 4.0 =

• Added: Live Preview Builder
• Added: Vimeo support
• Added: Shortcode for buttons
• Added: Redirect after close the modal window
• Added: Modal Window Schedule
• Added: Test mode
• Added: Activate/Deactvate the modal window
• Changed: Admin style
• Improved: scripts and styles

= Version 3.0.2 =

• Fixed: bug with cookie

= Version 3.0.1 =

• Fixed: Editing text for the close window button
• Fixed: deleted wrong font

= Version 3.0 =

• Added: Description for options
• Added: Title for popup
• Added: Style for title
• Added: Shadow for popup
• Added: Font setting for modal content
• Added: New format for close button and it style
• Added: Shortcodes for columns
• Updated: FontAwesom icons for float button and Icon Generation to version 5
• Changed: Style of plugin admin page

= Version 2.3.3 =

• Fixed: Delay for option Leave page

= Version 2.3.1 =

• Fixed: background for the form button
• Fixed: functions for show and close popups
• Fixed: the function for sorting popups in the admin area
• Fixed: the function for displaying on the mobile device
• Fixed: displaying float button icon
• Fixed: function \'Posts in Category\'

= Version 2.3 =

• Added: Hide a close button for a modal window
• Added: the function for autoclose a modal window
• Added: opening a modal window on right click of the mouse
• Added: opening a modal window on selected text
• Added: Rotate icon for a modal window button
• Improved: style and scripts
• Fixed: show a modal window on the devices
• Fixed: conflict with animated style

= Version 2.2.4 =

• Fixed: icon style

= Version 2.2.3 =

• Fixed: Color picker alfa
• Fixed: Shortcode output
• Added: Translate file

= Version 2.2.2 =

• Added: Support for the Youtube videos

= Version 2.2.1 =

• Added: function \'Don’t show on screens more than\'
• Improved: style and script

= Version 2.2 =

• Added: function of create subscription or feedback form

= Version 2.1.1 =

• Fixed: color picker alpha for Wordpress 4.9

= Version 2.1 =

• Added: Support for display on taxonomy pages.
• Added: Show menu depending on user\'s role.
• Added: Support page

= Version 2.0.2 =

• Fixed: minor bugs

= Version 2.0.1 =

• Fixed: overlay style
• Fixed: icon shortcode

= Version 2.0 =

• Added: Display a modal window in posts of category with certain IDs;
• Changed: admin style
• Fixed: general style

= Version 1.4 =

• Added: Style settings for the modal window button
• Added: Animation for the modal window button
• Added: Style settings for the modal window close button
• Fixed: Saving modal window

= Version 1.3.8 =

• Fixed: modal window width for mobile

= Version 1.3.7 =

• Fixed: minor bugs

= Version 1.3.6 =

• Fixed: style for mobile
• Fixed: cookie

= Version 1.3.5 =

• Fixed: minor bugs

= Version 1.3.4 =

• Fixed: minor bugs

= Version 1.3.3 =

• Added: Icons Generator

= Version 1.3.2 =

• Fixed: cookie for a modal window;

= Version 1.3.1 =

• Improved: Data base;

= Version 1.3 =

• Added: Different types of animation
• Changed: Image of close button;
• Changed: The admin style of modal window;
• Changed: The preview of a modal window;

= Version 1.2.2 =

• Added: Show modal window depending on user (for all users, only for logged-in users, only for not logged-in users)

= Version 1.2.1 =

• Added: Custom buttom for closing the modal window

= Version 1.2 =

• Fixed: Change function \'split\'
• Fixed: Verifying access to the folder \'asset\'.
• Fixed: Support and Facebook link.
• Fixed: Save settings
• Fixed: Improved code.

= Version 1.1 =

• Fixed: insert symbols

= Version 1.0 =

• Initial release