Ays Pro - bars Ays Pro - bars

 

Popup Box plugin Documentation

 

WordPress Popup Box Plugin User Manual

 

This is the official documentation(user guide) of the Popup Box Pro plugin. We are continually updating our plugin, and with each update, we are introducing new features that match the demands of the market and feedback that we receive from our clients. Any feedback that you have for us will be taken into consideration with great interest. Please don't hesitate to share your thoughts with us by participating in this Popup Box Plugin Survey.

 

 

Page Jump Links

 

Let’s get started together!

Build awesome popups quickly and easily with PopupBox.

 

 

 

 

Installation

There are two ways to install the PopupBox plugin:

1. You can install the PopupBox from your WordPress dashboard.

2. You can install it from WordPress.org.

 

 

How to create a simple popup in 4 steps with the help of the PopupBox plugin.

 

  • Go to the Popups page,
  • Create a new popup by clicking on the Add New button,
  • Fill out the information.
  • Select on which pages of your website you need the popup to be loaded and Save it.

 

Congrats! You have already created your first popup.

 

 

 

For more advanced needs, let’s get familiar with how product attributes work.
We provide you with a variety of options that help you to release your creativity and save precious time.

 

1. Popups

1.1. General

1.1.1. Enable popup: Turn on the popup for the website based on your configured options.

1.1.2. Popup title: Define the popup title. You can either display or hide the title in the settings tab.

1.1.3. Show on: Define the pages your popup will be loaded on.Except and Selected options, you can choose specific posts and post types.

  • All Pages
  • Except
    • Select post types.
    • Posts: Select posts.
  • Selected
    • Select post types.
    • Posts: Select posts.

1.1.5. Popup description։ Provide more information about the popup. It will be shown below the title.

1.1.6. Popup trigger։ Choose when to show the popup on the website.

  • Both։ The popup will be shown both on page load and click.
  • On page load։ Trigger displays the popup automatically on the page load. Define the time delay of the popup in “Open Delay” option.
  • On click։ Trigger displays a popup on your site when the user clicks on a targeted CSS element(s). Define the CSS element in the “CSS selector(s)” option.
  • Exit Intent: The popup will be displayed when the visitor decides to leave the website.

1.1.7. CSS selector(s) for trigger click։ Add your preferred CSS selector(s) if you have given “On click” or “Both” value to the “Popup trigger” option. For example #mybutton or .mybutton
To execute that, please follow the following steps:
1. Get the class or ID of that given tag. (If the tag has none of them, then please add in the coding)
2. Paste it on the given written field of the option. For IDs put # before it, for class put . before it.

1.1.8. Popup position (PRO)։ Specify the position of the popup on the screen.

1.1.9. Popup margin(px) (PRO)։ Specify the popup margin in pixels. It accepts only numerical values.


Additional Functions for Different Popup Types

1.1.10. Shortcode: Copy and paste the shortcode created with other plugins (E.g. Contact form, Subscribe, Login, Poll, Survey, Quiz, etc). Only available for Shortcode type

1.1.11. Display given page/post content: Add the post/page ID which content you want to insert in your popup. To find the ID, go to the WordPress Post or Page section and hover on the post/page. You can find the post/page ID in the link below. Note: if the input is not empty, then the post/page content will only be shown on the popup. Only available for Custom Content type.

1.1.12. Custom Content: Create fully customized popup content with the help of HTML. Only available for Custom Content type.

1.1.13. Question: Write the question as the main content inside the popup. Only available for Yes/No type.

1.1.14. "Yes" button: Select either to redirect or close the popup when clicking on "Yes" button.

1.1.15. "No" button: Select either to redirect or close the popup when clicking on "No" button.

  • Redirection URL: Provide the redirection URL
  • Redirect on another tab: Tick the checkbox, to open the URL in a new tab

1.1.16. Button text: Change the default button text and write your desired text. Note: If you make a change here, these words will not be translated. This option is available for Subscription, Subscribe and get a file types․

  • Yes: Replace the Yes button text with your own.
  • No: Replace the No button text with your own.

1.1.17. Video: Add video to the popup. Note: works only with the Video theme.

1.1.18. Iframe embed code: Copy your Iframe code and paste it into the given text field.

1.1.19. Popup Coupon: Choose a file and fill the coupon list. You can export the example file. Only available with the Coupon type.

1.1.20. Cookie Expiration Time: Define the time you want your cookie to be displayed. The default settings always display the cookie. Note: This option works with milliseconds (ms). For example, to set the expiration time one day, you have to input the “86400000” number (24*60*60*1000). Only available with the Cookie type.

1.1.21. Countdown Timer: Define the countdown ending date of your popup. Only available with the Countdown type.

1.1.22. User Data: Create fully customized popup content with the help of HTML. This option is available for Subscription, Contact form, Subscribe and get a file types.

1.1.23. Upload File: Upload file and your website visitors will receive it via email after providing their email address as a form of subscription. This option is available for Subscribe and get a file, Download types.

1.1.24. Write Message Content:Insert custom message for sending it along the uploaded file via given emails. This option is available for Subscribe and Get a file type.

1.1.25. Confirmation Box after Submit: Enable showing the confirmation box after submitting or subscribing. This option is available for Subscribe and get a file type.

1.1.26. Choose Your Location: Type the name of your chosen location and tap outside of the field to see the live preview above.

1.1.27. Google Maps API Key: Enter your Google Maps API key in the given field.

1.1.28. Admin Email: Provide the user’s email address who will receive submitted data such as name, email, massage, etc.

1.2. Settings

Make your popup flexible as never before! Control the settings and take your popup building to the next level with our features.

1.2.1. Popup Opening

1.2.1.1. Open Delay (in milliseconds): Open the popup when a visitor has viewed your website content for a specified period of time. (in milliseconds) To disable the option leave it blank or set it to 0. Note that 1 second is a 1000 millisecond.

1.2.1.1. Open by Scrolling Down : Define the scrolling parameters by pixels to enable opening the popup by scrolling down. To disable the option leave it blank or set it to 0. You can change the sizing option from pixel to percentage.

1.2.2. Popup Closing

1.2.2.1. Close by pressing ESC: If the option is enabled, the user can close the popup by pressing the ESC button from the keyboard.

1.2.2.2. Close by Clicking Outside the Box: If the option is enabled, the user can close the popup by clicking on the outside of the box. It works only when the ‘Enable Overlay’ option is enabled.

1.2.2.3. Close by Scrolling Down (PRO): Choose a certain point on the page by pixels, and when the user gets to that specific point by scrolling down, the popup will be closed.

1.2.2.4. Close by classname (PRO): Copy the given classname, assign it to any tag in the content as well as inside the popup. And the popup will close when the user clicks on the classname. Note: Save your popup before copying the given classname.

1.2.2.5. Hide close button: If the option is enabled, the close button of the popup will be disappeared.

1.2.2.6. Activate Close Button while Hovering on Popup: Enable this option to close the popup by hovering over the popup container.

1.2.2.7. Close Button Position: Select the place of the popup close button. It works with following themes: “Default”, “Red”, “Modern”, “Sale”.

  • Right top
  • Left top
  • Left bottom
  • Right bottom

1.2.2.8. Close button text: Define the text of the close button. The default value is “x”. It will not work with the following themes: Define the close button text. The default value is “x”.

1.2.2.9. Close Button Delay (in milliseconds): Set delay in milliseconds for displaying the popup close button. To disable the option leave it blank or set it to 0.

1.2.2.10. Autoclose Delay (in seconds): Close the popup after a specified time delay (in seconds). To disable the option leave it blank or set it to 0.

1.2.2.11. Hide Timer: Hide the timer when the Autoclose Delay option is enabled.

1.2.3 Advanced Settings

1.2.3.1. Popup Name: Write the name of the particular Popup. The name will be shown in the Popup list table.

1.2.3.2. Popup Category: Categorize your popup selecting from the premade categories. You can add categories in the Categories section from the Popup Box submenu.

1.2.3.3. Enable overlay: Enable to show the overlay outside the popup.

1.2.3.4. Enable Social Media links: Display social media links at the bottom of your popup container.

  • Heading for share buttons: Text that will be displayed over share buttons.
  • Linkedin link: Linkedin profile or page link for showing at the end of the popup.
  • Facebook link: Facebook profile or page link for showing at the end of the popup.
  • Twitter link: Twitter profile or page link for showing at the end of the popup.
  • VKontakte link: VKontakte profile or page link for showing at the end of the popup.

1.2.3.4. Display Per Session: Define the interval between the popup sessions in minutes. To disable the option, set 0. E.g. set it to 1440 to show the popup once a day to each user.

1.2.3.5. Enable Popup Sound: This option will work only when the Popup Trigger option is selected as the On click or Both. Please choose the sound from the General Settings page.

1.2.3.6. Schedule the Popup (PRO): Define the period of time when the popup will be active. Define the Start date of your popup along with its end date.

  • Start date
  • End date

1.2.3.7. Actions while Clicking on the Popup (PRO): Enable closing the popup and/or redirecting to the custom URL in case of clicking on any area of the popup container.

  • Enable closing: If the option is enabled, then the popup will be closed if the user clicks on any area inside it.
  • Enable redirection: Enable redirection to the custom URL when the user clicks on any area inside the popup.
    • Redirection URL: Provide the redirection URL.
    • Open in a new tab: If the option is enabled, then the system will redirect the URL to a separate new tab.

1.3. Styles

Create attractive popups with just a few clicks! Take full control over your popup display and polish your popup to perfection .

1.3.1. Display Content: Enable to show the title and(or) the description inside the popup.

1.3.1. Popup Dimensions

1.3.1.1. Width: Specify the width of the popup in pixels. If you put 0 or leave it blank, the width will be 100%. It accepts only numerical values and you can choose whether to define the value by percentage or in pixels.

1.3.1.2. Mobile Width: Specify popup width for mobile in percentage. Note: This option works for the screens with less than 768 pixels width.

1.3.1.3. Max-width for mobile: Specify the max-width of the popup for mobile in percentage. This option will work for screens with less than 640 pixels-width.

1.3.1.4. Height: Specify the height of the popup in pixels. If you put 0 or leave it blank, the height will be the default values of the selected theme.

1.3.1.5. Mobile Height: Specify popup height for mobile in pixels. Note: This option works for the screens with less than 768 pixels width.

1.3.1.6. Popup min-height: Popup minimal height in pixels

1.3.1.7. Full Screen Mode: Enable this option to display the popup on a full screen.

1.3.2. Content Style

1.3.2.1. Text color: Specify the color of the text written inside the popup.

1.3.2.2. Font Family: Choose the popup text font family.

1.3.2.3. Description font size: Define the font size of the popup description in pixels. You can defite the font size on PC or Mobile.

1.3.2.4. Title text shadow: Add text shadow to the popup title. Define the shadow

1.3.2.5. Title Style(PRO): Enable the option to customize the style of the popup title.

  • Font family: Choose your preferred font family from the suggested variants for the popup title: Arial, Arial Black, Book Antique, Courier New, Cursive, Fantasy, Georgia, Helvetia, Times New Roman and many more.
  • Font weight: Define the boldness of the popup title: normal, bold, bolder, 100, 200 and so on.
  • Font size(px): Define the font size of the popup title in pixels.
  • Letter spacing(px): Define the space between characters in the text of the popup title in pixels.
  • Line height: Define the height of a line of the popup title.
  • Text alignment: Choose the horizontal alignment of the text of the popup title: Center, Right, Left.
  • Text transform: Choose the capitalization of the text of the popup title. none
    • No capitalization: The text renders as it is.
    • Capitalize: Transforms the first character of each word to uppercase.
    • Uppercase: Transforms all characters to uppercase.
    • Lowercase: Transforms all characters to lowercase.
  • Text decoration: Choose the kind of decoration added to the text of the popup title:
    • None
    • Overline
    • Underline
    • Line-through

1.3.3. Opening and Closing Effects

1.3.3.1. Opening animation: Choose the entry effect for the popup opening.

  • Fading entrances: Fade in, Fade in down, Fade in down big, Fade in left, Fade in left big and so on.
  • Bouncing entrances: Bounce in, Bounce in down, Bounce in left and so on.
  • Sliding entrances: Slide in up, Slide in down, Slide in left, Slide in right.
  • Zoom entrances: Zoom in, Zoom in down, Zoom in left, Zoom in right, Zoom in up.
  • Rotating entrances: Rotating in, Rotating in down left, Rotating in down right, and so on.
  • Fliping entrances: Flip in Y, Flip in X.

1.3.3.2. Closing animation: Choose the exit effect for the popup closing.

  • Fading exits: Fades out, Fade out down, Fade out down big, Fade out left, Fade out left big and so on.
  • Bouncing exits: Bounce out, Bounce out down, Bounce out left and so on.
  • Sliding exits: Slide out up, Slide out down, Slide out left, Slide out right.
  • Zoom exits: Zoom out, Zoom out down, Zoom out left, Zoom out right, Zoom out up.
  • Rotating exits: Rotating out, Rotating out down left, Rotating out down right, and so on.
  • Fliping exits: Flip out Y, Flip out X.

1.3.3.3. Opening animation speed: Specify the entry effect speed of the popup in seconds.

1.3.3.4. Closing animation speed: Specify the closing effect speed of the popup in seconds.

1.3.4. Background Style

1.3.4.1. Background Color: Specify the background color of the popup.

1.3.4.2. Overlay color: Specify the color of the overlay.

1.3.4.3. Header background color: Specify the background color of the box’s header. Note: It works with the following themes: Red, Sale.

1.3.4.4. Background Image: Add a background image to the popup. Note: If you want to apply background color, remove the image or don't add it.

1.3.4.5. Background Image Position: Select the position of the background image of the popup.

1.3.4.6. Background Image Sizing: Define the background image size if needed.

1.3.4.7. Background Gradient: Add background gradient for the popup, choose gradient color stops and direction.

  • Color 1: Select the first color stop.
  • Color 2: Select the second color stop.
  • Gradient direction : The direction of the color gradient.

1.3.5. Border Style

1.3.5.1. Border Width: SSpecify the border size of the popup in pixels.

1.3.5.2. Border Color: Specify the border color of the popup.

1.3.5.3. Border Radius: Specify the radius of the border. Allows adding rounded corners to the popup.

1.3.6. Button Style

1.3.6.1. Close Button Image: Add an image which will be displayed instead of the close button.

1.3.6.2. Close Button Size : Define the close button size in pixels.

1.3.6.3. Custom Class for Popup Container: Use your custom HTML class for adding your custom styles to the popup container.

1.3.6.4. Custom CSS: Field for entering your own CSS code.


 

1.4. Limitation Users

Manage the count of views of the popup and limit how and who the popup is shown to.

1.4.1. Display Popup Once per user: Enable this option to display the popup once per visitor.

1.4.2. Display for logged-in users: Enable this option to display the popup for logged-in users.

1.4.3. Display for Guests : Enable this option to display the popup for guest visitors.

1.4.4. Hide Popup on Mobile: Disable the popup on mobile devices.

1.4.5. Disable by view count (PRO): Disable the popup after certain views.

  • Count: Specify the count of views.

1.4.6. Display for Certain User Roles: Show the popup only to certain user role(s) mentioned in the list. Leave it blank for showing the popup to all user roles.

1.4.7. Display for certain OS (PRO): Set on which operating systems your popup will be displayed.

1.4.8. Display for Certain Browser (PRO): Show the popup only to visitors using certain browser(s) mentioned in the list. Leave it blank for showing the popup to all browsers users.

1.4.8. Limit by country (PRO): After enabling this option, the given popup will not be available in the selected country.


2. Reports (PRO)

Track impressions of your popup and analyze the performance of it much more accurately! It will help to improve the engagement by identifying the opportunities.

There you will find the list of your popups with their corresponding IDs, Count (the number of times your popup is displayed), Average Duration and Read Status.

 

3. Export/Import (PRO)

Capture leads quickly and easily! Export and import already created popups and use it on all your websites.

3.1. Export

3.1.1. Select popup(s): Choose the popups which need to be exported. If you want to export all popups just leave it blank.

3.2. Import

3.1.1. Choose file: Upload the popup file in a .json format.

3.1.2. Import now: Import the popup file which you have already chosen.

 

4. Subscribers

In the Subscribers section you can see all the users who have succesfully subscribed after seeing the campaign. See the screenshots below.

Popup Box Plugin Settings

5. General Settings

5.1. General

5.1.1. Default popup parameters

5.1.1.1. WP Editor height : Give the default height value to the WP Editor. It will apply to all WP Editors within the plugin on the dashboard.

5.1.1.2 Opening and closing sound: Insert popup opening and closing sound by clicking on "Select sound"․

  • Opening Sound
  • Closing Sound

5.1.2. Who will have permission to Popup menu

5.1.2.2. Select user role: Select user roles allowed to see the plugin on their WP dashboard and make changes in the plugins settings. User Role is the ability to manage Popup Box plugin only for selected user roles.

5.1.3. Excerpt words count in list tables

5.1.3.1. Popup list table: Determine the length of the Popups to be shown in the Popup List Table by putting your preferred count of words in the following field. (E.g., if you put 10, you will see the first 10 words of each Popup Title in the Popups page of your dashboard).

5.1.3.1. Popup categories list table: Determine the length of the results to be shown in the Popup categories List Table by putting your preferred count of words in the following field. (For example: if you put 10, you will see the first 10 words of each result in the Popup categories page of your dashboard).

5.2. Integrations

Find out how to use a number of integrations for the Popup Box plugin. In this detailed guide you will find the following integrations: Mailchimp, Campaign Monitor, ActiveCampaign, ConvertKit, GetResponse, Sendinblue, MailerLite.

5.3. Shortcodes

Shortcodes are those piece of codes that are written into brackets just like this: [ays_pb_user_first_name] by placing it in different posts pages or plugin content they add a specific feature to your content. Now let's go through all the shortcodes that Popup Box offers to make the popup content more personalized and engaging.

5.3.1. User first name: Shows the logged-in user's First Name. If the user is not logged-in, the shortcode will be empty.

5.3.2. User last name: Shows the logged-in user's Last Name. If the user is not logged-in, the shortcode will be empty.

5.3.3. User display name: Shows the logged-in user's Display name. If the user is not logged-in, the shortcode will be empty.

5.3.4. User nickname: Shows the logged-in user's nickname. If the user is not logged-in, the shortcode will be empty.

5.3.5. User email: Shows the logged-in user's email. If the user is not logged-in, the shortcode will be empty.

5.3.6. Show current popup author: It will show the current author of the particular popup.

5.3.6. Show user roles: Shows the logged-in user's role(s). If the user is not logged-in, the shortcode will be empty.

Popup Category

5.3.7. Shortcode: You need to insert Your Popup Category ID in the shortcode. It will show the category title. If there is no popup category available/unavailable with that particular Popup Box Category ID, the shortcode will stay empty.

5.3.8. Shortcode: You need to insert Your Popup Category ID in the shortcode. It will show the category description. If there is no popup category available/unavailable with that particular Popup Box Category ID, the shortcode will stay empty.

Upgrade Free to Pro (Or Update Pro version)

First of all, we want to thank you for choosing our product, as it is you and only you who helps us to grow much faster and improve our quality.

In this article, you will learn how to upgrade our awesome PopupBox plugin from the Free version to PRO or upgrade your PRO version to a newer one. If you are currently a free user and would like to upgrade to the Pro version then it’s quite easy. And the good news is that all your content, plugin settings will remain unchanged even after switching to the Pro version. You don’t need to redo what you have already built with the free version.
To keep up with all the plugin updates check out The Popup Box Pro Changelog.

 

Ready? Let’s get started together!

  1. Go to the Plugins section of your WordPress website admin dashboard. Popup Box plugin features

  2. Click on the Deactivate button of the Free version of the plugin, the popup will appear.
    Popup Box Plugin Update

  3. Click the Upgrade button(it will keep all your popups and settings), after it the plugin will be deactivated.
  4. Uninstall the FREE version of the plugin.
  5. After the successful purchase of the PRO version, you will get the email with username and password.
  6. Login to our official website with your credentials https://ays-pro.com/log-in
  7. Go to the PopupBox page https://ays-pro.com/wordpress/popup-box
  8. You will see that your purchased plan is now available for download.
  9. Download the PRO version zip file and install it on your website.

Get Started with Popup Box, and Create Interactive Popups

If you are not ready just yet, you can also try the PopupBox Demos (Free and Pro)

50% OFF

Mega bundle offer for you!

It consists of 3 different powerful plugins, each one allowing you to make your WordPress experience the best that could be.
Quiz + Poll + Survey