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 from your account area > API DOWNLOADS. 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.

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.

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 section titled “API KEYS“ in the left-hand sidebar. Go ahead an click that link to see a list of your API Keys, 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”. However, the API Key activations is contained in WordPress’s normal Settings tab in the left sidebar. Open that, and you’ll see the QuickPop API Activation tab. Alternatively, the message to activate the plugin will also appear at the top of your dashboard, and a link to activate will be provided there.

3. On the API Activation screen you’ll see the field where you’ll want to paste the API Key that you copied form your account area, and select “Save Changes”. If succesfully activated, you will see the status changed to “ACTIVATED: alongside the number of active and remaining uses of the key. That’s it! You’ve now successfully activated your product.

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.

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

Upon installing and activating QuickPop, you’ll find the a new area added to your wp-admin dashboard titled “My Brindle” which is where you’ll also access QuickPop settings. On clicking QuickPop, you’ll be taken to the Popups Library, which serves as your home base for all things QuickPop.

Popups Library

Also shown above, this is the core area of the plugin where all popups are organized. You will be able to quickly see the title of each plugin, the status (live or disabled) and other features used in maintaining your collection of popups. To edit a popup, simply click the title or pencil icon. You can also of course create a new popup (you can make as many as you need, wach with their own goals!) by clicking ” Design New Popup” in the right sidebar of the Popups Library page.

Click this link to create a new popup, and we’ll dig into each section in the following segments of this documentation.

Designing & Editing Popups: The 3 Core Sections

Assuming you’ve clicked this link or selected an existing popup (if you’ve create one earlier), you’ll be taken to the overall Popup’s settings area, which consists of three primary sections. These are organized logically to make creating a new popup as logical and quick as possible—because, you know, QuickPop!

The core sections that appear are organized into the following tabs:

Content

Design

Settings

You can access thee tabs in any order, and click “Update” to make any changes stick. In the next sections of this documentaiton, we will cover the content of eac htab in detail.

Content Tab

On this tab you’ll set the specific content of the popup. This includes the title text, the body text, any images you’d like to include, and specific labels for buttons. Furthermore, you can specfiy which fields to include on your popup, such as email, Name, and phone number. Thsi tab goes in hand with designing your popup, but focused primarily on actual content versus the visual design, which can be changed on the “Design” tab (see next section). Let’s have a look at the details on the Content tab:

 

Headline

This is the headline that appears at the top of your popup. Note you can also leave this blank and add a headline to the text content found in the “Body” section for a bit more control over your headline’s style and placement.

Body

This is where the main message of your popup goes. Note you can also add images here to add a more customized look to your popup. This area is just as flexible as a blog entry, so feel free to get creative!

Button

This area pertains to the standard button. You can include this button in the Settings tab. More details can be found on the “Settings Tab” section of this documentation.

Button Text: This is the text that appears on the button.

Button Link: This is the link that the user will be taken to when clicking the button.

Open in New Tab: This will tell the button to open the link in a new tab on the user’s browser. If left unchecked, the button will open the link within the same browser.

Form

This area pertains to the form. To add a form to your button, you’ll want to do so in the Settings tab. More details can be found on the “Settings Tab” section of this documentation.

Email/Name/Phone Number: These are the various fields you can add to your form, all of which will be collected from visitors and added to the “Submissions” section when a visitor submits the form. You can specify which to include, as well as if each is required for submission. note also that you can enter the pre-populated “hint” text here as well.

Form Button: This is the text that appears on the form’s submission button.

Thank You Message: This is the message that will be displayed to the user after they submit the form from this popup. On the front end, it will look something like this:

Design Tab

This tab is where you’ll style your popups as needed. Almost every aspect of the popup can be changed to your liking. Here’s what you’ll see, followed by a breakdown of each setting:

 

Include / Exclude:

Standard Button: This will add a “normal” button that can have it’s own link assigned to it. It is not tied to a form in any way. This is useful, for example, if you would like to link to your site’s shop when promoting a sale. Note that if you also inlcude a form, this button will be added in addition to the button tied to the form itself.

Form: This will add a form to the popup, which can be used to collect emails and other visitor info. A button will automatically be added to the form, and you can control the content of the form on the “Content” tab, including the button’s label, and different fields to be included. See the “Content Tab” section of this documentation for more details on the form’s content.

STYLE

This makes up the bulk of this section, and relates to the overall design aesthetic of the popup.

Popup Container Background Color Type

You can specify if you’d like the color of the actual popup to be a single color, or a gradeint. If selecting “Gradient” you will be presented with two color options for each “end point” of the gradient, as well as being able to specify the direction of how the gradient flows.

Border Width

Adds a border to the popup container, and allows you to specify the thickness and color of the border.

Overlay Background Color Type

The overlay describes the background that appears behind the popup itself. It is a full screen effect that allows the popup to stand out form the site’s content. This setting let’s you specify a single color or gradient, allowing countless options for creating truly unique popups. The default setting is a dark gray single color.

Opacity: This setting controls how visible the background overaly is. If set to 100%, the user will not see any of your site content. Lowering the opactiy will allow more of the site to be seen throguh the background overlay. Default setting is 84%.

Standard Button Color

If yu’ve included a standard button in your popup, this is where you can change the color.

FORM STYLE

All settings in this segment related specifically to the form. Note you must include a form in your popup for these settings to take effect. Including a form can be done on the “Settings” tab.

Form Button Color

Sets the color of the form’s button.

Form Field Background

This setting changes the color of the form’s fields. The field is where the user will enter text, such as their email.

Form Field Border

This setting allows you to change the color of the field(s)’ border. If you prefer not to havea border, you can make this the same color as the form field’s background color.

 

Settings Tab

This tab contains core functionality, behavior, and status settings for each specfic popup. You will be able to add a title for reference, set whether the popup is enabled/disabled, and behavior settings like time delays, animations, and popup events. Check out the overview below for details on each setting:

Status: Set the popup to Enabled or Disabled. “Disabled” allows you to work on a popup without it being live. “Enabled” activates the popup, making it live on your site.

Form Title: This is the name of your Popup, which is used for reference only. It will not be displayed on the popup itself, so feel free to choose a title that will indicate its goals, design, functionality, or other factors that will help you quickly reference it in the future. This title will be displayed in the Popups Library’s list view.

Visibility: This section allows you to specify if the popup should exist on all pages of your site, or specific pages.

All Pages: This setting will make the popup appear on all pages, and applies only to the “Delay” Event, which loads the popup after a specific time delay after a page loads.

Choose Pages: You will be able to choose the exact pages where the automatic popup will appear. Selecting this option will present you with the following interface:

Events: This sets the behavior of the popup. You can set the popup to appear on page load, on-exit, and on-click. Note that each of these settings is explored in depth in the Popup Events & Behavior section of this documentation.

Animation: Set the type of animation you would like your popup to include. These are covered in depth in the Animations section of this documentation.

QuickPop allows you to create a vast array of popups that can collect different customer details. From Email opt-in popups, to form submissions, all data collected from your popups will be collected into this section of wp-admin. Let’s explore this section to see what you’ll find after a visitor/customer submits a form via QuickPop.

Submissions List View:

All submissions are captured in a standard WordPress list for quick access.

 Submission Detail View:

To view the content of an individual submission, simply click the submission from the list. You will then be taken to the detial view as shown below. Here you will find the full content of what has been submitted from users who have submitted details through a QuickPop Popup, including full names, phone numbers, and email addresses.

QuickPop allows you to specify the behavior for each of your popups allowing each popup to achieve different goals cross your site. These are titled “Events” and found in the Settings area of QuickPop. A screenshot is included below for reference on where to find this setting, followed by in depth descriptions of each function:

Delay (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.

 

Be sure to check out our full tutorial for an A-Z process of How to Add an On-Exit Popup to WordPress!

To further help you get familiar with event settings, we’ll elaborate a bit more on each event type on the following sections of the documentation. 

QuickPop’s default Event sertting will initiate the popup on page load after a specified amount of time.

In the dropdown highlighted below, select “Delay”:

 

Visibility

With this specific even, you can specify if the popup will appear on all pages or specific pages. This is covered in the “Settings Tab” section of this documentation, but bears repeating here:

You’ll also notice a field next to the “Delay” event setting. This area allows you to specify the time delay, in seconds, as to when the popup will appear on page load.

The default is 3 seconds, which woudl work well for something liek a site-wide promotion. However, a longer delay, such as 60-90 seconds, could work well for those who are lingering and may be considering a purchase or would be a candidate for signing up for your newsletter (for ecample, if they’ve been hooked on a blog article). You may combine multiple popups for A/B testing in this manner for some great analytical tests.

QuickPop allows you to adda popup to any button or link on your site using the “On Click” setting found in the “Events” section of the QuickPop Settings tab. Due to the unliited nature of QuickPop, you’ll need to keep a few things in mind when adsigning the on-click functionality to any button link. We’ll cover these details below. First, to find this setting, navigate to the Settings tab for the popup that you’d like to appear on click.

In the dropdown highlighted below, select “On Click”:

You’ll notice that a series of instructions appear beneath this selection.

Use this shortcode to display a button that triggers this popup.
You can add custom attributes to the popup using shortcode attributes.
The first one – popup-id – is required and it specifies which popup this button will trigger.
Other possible attributes are:
content – specify button’s text content
class – adds class attribute to the html element
id – adds id attribute to the html element
data-{something} – you can add any data attribute and it will translate to a data attribute on the html element

Finally if you’d like to just turn an existing button into a popup trigger you can simply apply a css class and a data attribute to specify which popup it will trigger to it:
class: qp-js-trigger-popup
data attribute: data-popup-id="your-popup's ID"

Shortcode:

Additionally, you will see a shortcode that is generated after you save your settings. This is the easiest method of dding a link to initate a popup when clicked, and it looks like this:

Book Our Service

Note that the shortcode is only generated after you save your popups settings. So, if you don’t see it, be sure to save (You can set the popup to disabled if you’re not ready for it to go live.).

Placing this shortcode anywhere on your site will add a link that automatically initiates this specific popup when clicked. This allows you to create as many unique popups as needed, all with on-click behavior, and tells your site the exact popup to display to visitors.

Here’s how it’ll appear:

Book Our Service

There are many benefits to capturing a visitor’s attention one last time before they leave ytour site. This option allows your site to initiate a popup when a user tries to hover away from your page (ie moves their mouse cursor to the URL/Tabs area of their browser). It’s a proven method to increase signups, sales, and other conversions.

This is done in the Events section of the Settings tab. Below you’ll find a description of the settings:

Visibility

You can choose to add the on-exit popup to all pages of your site, or only specific pages. For example, if you only want to add an exit popup to the shop page, perhaps to offer a discount to a visitor who is leaving your site, it may convince them to make a purchase. Here is an explanation of the Visibility option when chooaing to add to specific pages:

After setting the above settings, visitors will now see the exit popup on any page you added it to. It’ll look something like this:

 

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: