SleekAnnounce Documentation

Everything you need to install and master the best popups for WordPress, QuickPop!

About This Guide

Welcome to QuickPop’s succinct yet thorough documentation! Below you’ll find in depth instructions categorized for quickly locating specific areas. New to Brindle plugins? We recommend starting with our Quick Start Video found in the first entry below. 

QuickPop Video Tutorials

QuickPop Quick Start:

So much quickness!  Looking to publish your first popup in a few minutes? This is the video for you:

 

QuickPop Features & Interface Overview

This video briefly showcases every feature of QuickPopPRO so you can become familiar with the general workflow and functionality of the plugin:

Email Optin Popups for WordPress

Collect emails and build your follwoing with these effective email optin popups. QuickPop collects cutomer info in a handy interface, and even works with popular email list services:

 

On Exit Popup for WordPress

Want to offer a deal before they navigate away? Add a popup to your site that triggers when a visitor navigates their cursor to the top of the browser, a proven method to convince them to come on back:

 

Multiple Popups for WordPress

Looking to create multiple popups, all with their own specific designs and goals? The followign video showcases the range of options available with QuickPopPRO:

 

Installing QuickPopPRO

Congrats on grabbing your copy of QuickPop, hands down the best Popup builder for WordPress if we say so ourselves! Let’s dig right in and install the plugin, which is the exact same process as any other WordPress plugin:

1. Download your copy of QuickPop form your account area. This will be titled “QuickPopPRO-master.zip”.

***Important: Many operating systems will automatically unzip this file. However you will be uploading this exact .zip file so it needs to remain zipped. If your OS unzips files automatically, you will need to compress the file into a .zip in order to proceed.

***Important: You msut not change the title of this file. The title formatting is critical in ensuring you can activate your plugin’s API key.

2. In your website’s WordPress admin area, navigate to the Plugins tab. There, you will see a button titled “Add New” at the top of the page. Click this button, and then click “Upload Plugin” button found in the same location. Finally, select the plugin file from your computer by clicking the “Choose File” button, which will allow you to locate your .zip plugin file from your computer.

3. After selecting the correct file, you will then click “Upload”. After the upload is compelte, click the “Activate Plugin” button, and you’re done!

On completing the above steps, the plugin has now been correctly installed. However before it will become funcitonal, you’ll need activate the API key assigned to you based on the license you chose when making the purcahse. Activating your API Key is covered in the next section of this documentation.

Activating Your API License Key

Each Brindle plugin must be activated via a unique API key, which is automatically assigned to your products. Luckily it is an ultra-quick process that only takes a few moments to complete, so let’s dig in:

1. In your account area you will notice a seciton titled “API KEYS” in the left-hand sidebar. Go ahead an click that link to see a list of your APIs, each categorized by their corresponding product. Locate the correct API, and copy it to your clipboard for later use.

2. Now armed with the power of a copied API Key, return to WP-ADMIN. If you completed the installation of a Brindle plugin, you will notice that a new tab has been added to your sidebar, cleverly titled “My Brindle”. Hover your cursor over that tab and you’ll see a sub-section titled “API Activation”, which you’ll want to click. 

3. On this screen you’ll see the field where you’ll want to paste the API Key that you copied form your account area, and select “Activate”.

4. JK there is no 4th step, you’re done! If succesfully activated, you will see the status changed to “ACTIVATED: alongside the number of active and remaining uses of the key.

Important Notes on API Key Activation:

  • There is a glitch that sometimes causes the plugin to be set to inactive by default. This setting is in the “Deactive API Key” tab. You may need to navigate to this tab ans ensure the “Deactivate API Key” checkbox is NOT selected. Then, click “update” and try activating the API Key again on the other tab.
  • The most common cause for API activation to not work is site caching. Site caching can cause your site to not communicate with our API validation server. Be sure to disable caching temporarily until you succesfully activate your plugins. Note this can also be cause by third party “optimization” services such as Cloudflare.
QuickPop Overview

Now that you’ve installed and activated QuickPop, it’s time to get cozy with the QuickPop interface. Below you’ll find an overview of QuickPop’s interface alongside brief notes of each sections purpose. This will help you get familiar with the overall worflow when creating and managing your popups.

1. General Overview

2. Popups Library

3. Designing & Editing Popups

3a. Settings

3b. Design

3c. Content

Popup Events & Behavior

QuickPop allows you to specify the behavior for each of your popups allowing each popup to achieve different goals cross your site. We label these as “Events” and describe each below, followed by a brief tutorial on how to change these settings to accomplish different goals:

On Site Load: This is the default setting. With this setting, a popup will appear automatically after a setc amount of time has passed after the page loads. You can specify the amount of time, in milliseconds, as to when you’d like the popup to appear. This is great for site-wide promotions and newsletter sign-ups.

On Click: This allows the popup to appear on a link or button click. Perfect for email opt-in promotions!

Note: On Click behavior one is a bit more in depth due to the flexibility, so feel free to see the next section of this documentation for a full overview of the “On Click” Behavior.

On Exit: Create a popup that appears when a user navigates their cursor to the top bar of their browser.

For the sake of helping you get familiar with these settings, we’ll elaborate a bit more on the “On Exit” behavior, though please check out the Brindle Blog for in depth tutorials on creating popups of each behavior type.

Changing the Popup Events/Behavior: When a user attempts to exit your site by navigating to the URL field in their browser, you’ll have a chance to grab their attention one last time, and perhaps persuade them to take action before leaving. This can be a very powerful tool in convincing those who are close to making a purchase on your site. For example, why not offer them an additional 10% discount if they move forward with a purchase? By combining these behaviros through the use of multiple popups, you can maximize your goals in no time! Belwo you’ll find the necessary settings in changing your popup’s behavior. In this case, we’re creating an “On Exit” popup.

1. Create a new popup by clicking the “Design New Popup” link, or selecting an existing popup from your library.


Once you’re in the Popup design area, we’ll start by updating our settings, so you’ll want to click that tab as shown here:


2. Once that page is open, you’ll see the following screen. We’ve added notes to clarify the settings needed to achieve the “on exit” popup we’re setting up in this tutorial, but you’ll also find these settings explained in the “QuickPop Overview” section of this documentation:

You may want to set this popup to “Disabled” until all settings are to your liking, but with the above settings in place you can now proceed with designing the popup itself. Be sure to check out our full tutorial for an A-Z process of how to add an on-exit popup to WordPress!

Animations

QuickPop allows you to specify different animations for your popup. For example, perhaps you want your popup to have a “slide-up” effect, or a more simple “Fade-in” effect with no movement.

To change this effect, we’ll wlk you through the process of adding a slide-up effect to your popup:

1. Navigate to the popup that you’d like to edit the animation, and click the “Settings” tab:

2. Scroll down to the Animation section. Here, you’ll locate both the animation ‘Type’ and ‘Transition Speed” which we’ll outline below:

Animation Types

Fade-in: This default option will cause the popup to fade-in without further animation. The popup will appear in the center of a user’s browser with a sleek transition effect that fades into view.

Slide Up: This effect will cause the popup to both fade in and “slide” into view when the popup appears.

Note: More animation types are coming soon!

Transition Speed: This is the amount of time (in milliseconds) that passes during the popups animation. Setting this higher will cause a slower animation as the popup appears, and can create a different feel based on the speed set. Default is 400ms.

3. For the sake of this tutorial, let’s select “Slide Up”, and set the Transition speed to anything you like, which we’ll make a bit quicker at 200ms.

For an explanation of other settings on this page, please refer to previous sections of this documentation.

4. After all settings have been set to your liking, click the “Update” button, and your popup will be ready to roll! It will look something like this:

 

Bonus for Checking the Demo!

Lots of reasons to add popups to links and buttons, am I right? As a thank you for checking our demo, you can save 15% right now when you sign up for our newsletter!

Submission received, thank you!

Close Window
Our time: 1:21am EST