WP Popup Magic User Guide Plugin version 2.6+ Prepared by Scott Bernadot WP Popup Magic User Guide Page 1
Introduction Thank you so much for your purchase! We're excited to present you with the most magical popup solution for WordPress! The WordPress world is a big place and sometimes code just isn t compatible. We do our best to maintain compatibility and minimize coding conflicts, but we do not guarantee our plugin will work with every theme and plugin combination. If you have an issue, please contact us for a solution. If we can fix an issue, we are happy to do so. If you have any questions, please email us at support@wppopupmagic.com. Installation Download the file as indicated in the email you received from your purchase. If you did not receive an email, please check your spam folder. Login to your site Go to Plugins >> Add New Click the upload link near the top of the page Click Browse to located the attached file you downloaded, click the Open button or double click the.zip file you downloaded Click the Upload button Click the Activate link Choose WP Popup Magic from the left admin menu to manage your popups Requirements We require at least WordPress version 3.5 to work with our plugin. It is always best to keep your site updated to the latest version of WordPress. WP Popup Magic User Guide Page 2
Add a New Popup Go to WP Popup Magic >> Add New or click the Add New button under the logo at the plugin s home page. Popup Editor 1. Enter a name for your popup. Note: This is not displayed to the user, and is only for your reference. 2. Visual Editor: add your Popup content into the Visual editor. Use the formatting tools just like when creating or editing a post. 3. Use the Text Editor for pasting your HTML / embed / iframe / newsletter code into WP Popup Magic User Guide Page 3
Status and Preview (new) 1. Status. Live means that the popup will display to your users using the settings you have configured. Disabled means that popup will not appear to your users. Note: You can click the edit link to change the status at any time. Click the update button to save the change. 2. Preview: click the Preview button to view your popup without publishing it. Note: There are times when the preview may not render optimally depending on your theme s settings. 3. Publish: click the Publish button when you are ready to go live with your popup, or click Save to simply save your progress without publishing WP Popup Magic User Guide Page 4
When to Display Popup Includes 2 New Event Triggers We give you a number of amazing ways in which you can decide when your popup will make its appearance. 5 Event Options 1. Timing Set the number of milliseconds (1000 = 1 second) to wait, once the page is finished loading, to display the popup. This is great if you want to delay the popup to show only if the user has been on your site for a specific period of time. Set to "0" to show the popup immediately upon loading the page. 2. Exit Popup Present your visitor with one final popup before they leave your site. This feature works by determining when a user's mouse has left the content section of your site, and they are headed towards the navigation buttons in their browser. 3. Click of an External Link (new) Display a popup to your users when they click an external link (a link to a website that is not on the same domain that the plugin is installed on). This is very popular with banking and government websites to warn their users when they are leaving their website. How it works: When the OK button is clicked, the user will continue to be directed to the URL of the link they clicked on. If they click Cancel they remain on the current site, and are not redirected. Let s check out the available options: WP Popup Magic User Guide Page 5
a. Popup Type: Choose a plain javascript dialog window OK button only. Can only display non-formatted text. Add your text into visual editor. Choose a plain javascript dialog window OK and Cancel buttons. Can only display non-formatted text. Add your text into visual editor. Normal HTML (uses current popup settings). Can display any HTML (e.g. text, images, video, forms, etc.) b. OK Button (Only available when you choose the Normal HTML option): Enabled Set your OK text and button width in pixels Disabled No OK button will be shown Show Advanced Options link: For advanced users, you can edit the HTML of the OK button to suit your needs. The Revert c. Cancel Button (Only available when you choose the Normal HTML option): Enabled Set your Cancel text and button width in pixels Disabled No Canel button will be shown Show Advanced Options link: For advanced users, you can edit the HTML of the OK button to suit your needs d. Whitelisted Domains: There may be domains that you want to whitelist, so they do not receive a popup notification when they are clicked. Simply, enter each domain on a new line. Do not include http:// or https:// prefixes, or trailing slashes. 4. Browser Scroll This is one of the cool features of our plugin. It allows you to specifically target when a popup will be displayed within a page or post, and when it should be hidden. When you check the Browser Scroll checkbox, you will see the following options appear: Start Trigger Target (where a popup is activated) & End Trigger Target (where a popup is deactivated) Important note: If you are using this on a page that does not have a lot of content, meaning the entire page or post is viewable without the need to scroll, the popup may be activated upon page load, or it may not be able to be activated depending on your scroll settings. Also, please keep in mind that the users screen resolution will impact their experience. I would recommend using this option is you have multiple pages of content Now, let's explore the options available for the start and end triggers: HTML element (by CSS selector) - you can type in a specific ID or class name of a CSS element. Once that element becomes visible on the user's screen, the popup will be activated. y-offset (in pixels) from top of webpage - you can specify the number of pixels from the top of the page that the user needs to scroll the page to trigger the start, and optionally, the end, of the popups visibility. WP Popup Magic User Guide Page 6
y-offset (in pixels) from bottom of webpage - you can specify the number of pixels from the bottom of the page that he user needs to scroll the page to trigger the start, and optionally, the end, of the popups visibility. Shortcode - copy and paste the Start Trigger Target shortcode and optionally the End Trigger Target shortcode to manually assign the locations of where you want your popups to be displayed, and hidden, as a user scrolls up and down your page. 5. Create a link to a popup (new) There are no option settings for this type of popup. Simply go to WP Popup Magic >> All Popups and from the list of your popups, select the Link Shortcode, as highlighted above, for your respective popup. Use this code as the URL within your pages or posts, and even your main menu. Frequency Here is an example: <a href= [wppum_link name='my First Popup'] >Click this link and a My First Popup magically appears</a> No limit: means your popup will display every time the page is loaded. Great to use in testing. In a live environment, be careful with this setting as you don't want to annoy your visitors with the same repeated popup appearing over and over. Limit to once per session: The popup will only appear once per session (once the user closes their browser window) Custom Limit - Allows you to set the number of times per day(s) that the popup will be displayed on your site. WP Popup Magic User Guide Page 7
Popup Design Elements Background Color: Choose "Color" to simply change the background color of your popup. We've included a color picker to assist in choosing your color. Image: If you want to use a background image, select "Image". This allows you to use one of the images we've provided you in the image library or the ability to upload your own image using the Upload Images button. Once you upload an image, it will be accessible for all your popups. Tip: You can upload your own images directly into "background" image libraries using FTP software. Just upload your images into their respective folders and they will appear as selectable options for you to use. Path to folder: wpcontent/plugins/wp-popup-magic/images/backgrounds Overlay With this option you can enable or disable an overlay from appearing under your popup. This gives the popular "Lightbox" or dim the lights effect that many folks love because it helps highlight the popup. When enabled, you can also select the color and opacity percentage. Border Want a border around your popup? Use these settings to manage the border width, style and color. Don't want a border? Just set the width to "0" or style to none. Border / Content Padding WP Popup Magic User Guide Page 8
Use these settings to set the amount of padding between the edge of your popup and the content inside. This is particularly important when you are using background images. You may need to move the content around within the background image to get its placement correct. You can set padding for the top, left, bottom and right sides of your popup respectively. (continue on next page) WP Popup Magic User Guide Page 9
Close / Toggle Button (new) We have added the ability to toggle (hide/show) a popup, versus simply just closing it. This is designed for popups that are positioned one one side anchored close to the edge of the browser. Ideal for a top or footer slide in popup for example. Do not use on a centered popup, as the show button will be displayed in the middle of your page, and that is not a good thing. We have included a couple of "close button" designs for you to use with your popups. However, you can upload your own buttons too by clicking the Upload Images button and selecting your file. Under the "Show / Hide Advanced Options, you can alter the CSS / HTML of close button if needed. This again is intended for advanced users. There is also a "Revert close button HTML to default" link should you need to go back to our default button's code. Options include Hide close and toggle buttons: No close or toggle buttons will be displayed on the popup. This is designed to require your user to take action before they can access your content. Important: Use with caution as the user may not be able to access your page if your popup is not designed properly. It is recommended to have a close or toggle button on all standard popups. Show close button Select this option to show a close button on your popup. You can upload your own, or choose from the default buttons we have prepared for you. Show toggle button - Select this option to show toggle buttons on your popup. You can upload your own, or choose from the default buttons we have prepared for you. Select a button from both the close and open button sets. The button will change automatically depending on its state. WP Popup Magic User Guide Page 10
Title Bar Show a title bar for your popup. This was designed to assist in the click an external link event popup, but can be used as desired. I suggest using it sparingly. Click Enabled to display the title bar Add your title in the text field Default styling is white text on a black background. For advanced users, click the Show advanced options to edit the HTML and CSS stylings. Popup Dimensions We've included a few options here for the size of your popup. Fit to Contents: Fit Contents will automatically create a tight wrapped popup using the elements you have placed within the editor. I suggest using this feature first to see if it meets your needs, as this automates the process for you. Works optimally when your content has an image, video or embedded content with size parameters included. It does not always calculate the optimal size, but it is a good place to start. Use background image size: Select only if you opt to use a background image for your popup's background. It will automatically calculate the dimensions based on the size of your background image selection. Custom size: Custom size overrides all automated settings and enables you to put in whatever fixed (px) or percentage based height and width values you desire. This gives you the ability to fine-tune the dimensions to pixel perfection. WP Popup Magic User Guide Page 11
Popup Animations How do you want your popup to make its appearance? With grace a bang or something in between? Now you can decide for each popup you design. We offer a variety of effects with how your popup enters and exits a page. Select your desired Effect from the top dropdown, and then select / set the remaining options. Where to Display Popup Mobile Hide your popups from mobile devices or build them specifically for them. We give you all the options. Show on mobile - will display your popup on all viewports including a mobile device Disable on mobile - your popup will not be displayed on a mobile device Show on mobile only - your popup will only be displayed on a mobile device Pages / Posts From the dropdown, select the pages and posts where you desire the popup to appear and/or not appear. Here are the available options: Show on all webpages (including homepage) popup will appear on every one of your posts and pages Show on all webpages (excluding homepage) popup will appear on every one of your posts and pages, except the home page Show only on homepage and pages/posts with shortcode popup will appear only on the homepage or on the pages/posts that you have inserted shortcodes into Show only on specific pages/posts enter the IDs of the pages / posts that you want the Popup to appear on Hide only on specific pages/posts - enter the IDs of the pages / posts that you want the Popup to be hidden on Hide on all webpages (except pages/posts with shortcode) popup will only appear on pages / posts that have shortcodes inserted on them WP Popup Magic User Guide Page 12
If you choose to show/ hide on specific pages/posts, you will see another textbox appear labeled: Page/post IDs. To quickly find your page and post IDs, you can use the "Click here to view the list of all pages/posts and their IDs." Then just copy and paste the ID into the text box above. Shortcodes. What s a shortcode? You'll see a couple of options from the dropdown that refer to shortcodes. Shortcodes are snippets of bracketed text that you can include within one or many pages or posts to trigger when the popup will be displayed. If you include shortcodes within your site's pages / posts, it will always be rendered. Here is an example of a set of shortcodes: [wppum name="shortcode Example Left Pointer"] some content on your site [wppum_end name="shortcode Example Left Pointer"] Position Check the Center on screen box to have your popup appear centered on your page. This will automatically set the Vertical and Horizontal settings below to center for each. Otherwise, customize your location using the following settings: Vertical: Set number of pixels from the top or bottom edges of the browser. If you choose center, the popup will appear vertically centered. Horizontal: Set number of pixels from the left or right edges of the browser. If you choose center, the popup will appear horizontally centered. Would you like the popup to scroll with page? We ve included a new option to allow your popup to scroll with the page. Given all of the different screen sizes out there, it s possible that your popup could be displaying in a manner that prevent users from viewing your entire ad. This option allows them to scroll to ensure they can see the content within the popup and take the suggested action. WP Popup Magic User Guide Page 13
Advanced Options CSS The custom CSS comes in handy for advanced users. It allows you to add classes to the popup, as well as write custom styles. If you do not know what CSS is or how to write CSS code, no worries. It's only there as a feature for those who need it. Note that the popup has a defined class of: wppum Attributes / Order Our plugin allows you to place multiple popups on the same page. The order setting gives you control over the popups' stacking order. Low to High is respectively Bottom to Top. Example: You have a full page popup with another centered page popup on top of it. Assign the full page popup an order number lower (e.g. 1) than the centered popup's number (e.g. 2). If you reverse the order, the centered popup will not be visible as it will be hidden under the full page popup. WP Popup Magic User Guide Page 14
Popup Settings Not much here except the ability to disable our Thank you and links next to the WP Popup Magic logo. We understand that sometimes you just don t want this stuff being visible to your clients. 2013 WP Popup Magic is a product from Bernadot Studios, LLC. 15
Other Things WP Popup Magic Can Do for you Importing & Exporting One of the outstanding features of this plugin is it gives you the ability to import and export your own popups. Export Popups To Export your popups, however, just do this: 1. Go To Tools >> Export 2. Select the Popups option 3. Click the Download Export File button This will allow you to easily move your popups from one site to another without the hassle of recreating your popups. Also, when you import your popups, they will be put into "Draft" mode, keep the popups from appearing on your new site until you have approved them for publishing. Importing Popups To import a popup, just: 1. Download the.xml file of your popup(s) 2. Login to your WP site 3. Go to Tools >> Import 4. Click the "WordPress" link - if you do not already have the import plugin installed you will be prompted to install it. Please install that plugin now if needed and then continue. 5. As noted in the image above, click the Choose File button and locate the XML file you downloaded in step 1 6. Click the Upload file and Import button 7. Under Assign Authors, I recommend using the dropdown and selecting the author to an admin account 8. Check the "Download and import file attachments" checkbox 9. Click the Submit button 10. That's it! The popup will now be included on the WP Popup Magic >> All Popups page Important note: We have put all demos into "Draft" mode so none of the popups are live on your site. 2013 WP Popup Magic is a product from Bernadot Studios, LLC. 16
Duplicating an existing popup We've made it a snap to duplicate an existing popup. It's one of the little feattures that saves you tons of time and hassle. 1. Just Click on the WP Popup Magic >> All Popups link 2. Hover over the title of the popup you wish to duplicate 3. Click the Duplicate link A new popup will appear. Just open it and edit away. Inserting shortcodes into popups from other plugins We have enabled shortcodes from other plugins and themes to run inside of the popup. For example, you could insert a contact form inside one of your popups using the shortcode your form plugin provides. Are My Popup s Responsive? We have done our best to make our plugin responsive (adjust to smaller screen sizes), but it does have its limitations based on the content of the popup. Specifically images and videos will resize within the plugin when using percentages for dimensions. This is why we specifically included the ability to hide and or show popups on mobile devices. Image Packs Coming soon. Not a designer? Image packs will provide you with a variety of graphics to make your popups style and pizzaz. Feedback / Improvements We are open to any of your ideas on how we can improve the plugin. We have spent months getting the plugin to this point, but we know there is always room for improvement. Please send your requests to support@wppopupmagic.com. We appreciate it! If you like working with us, you may also want to check out AlohaThemes.com to give your WordPress site a cool new look or check out FirstPageMobile.com to discover how to create an amazing mobile friendly landing page for your website in minutes. Thank you again for the opportunity to serve you! - Scott Bernadot 2013 WP Popup Magic is a product from Bernadot Studios, LLC. 17