Introduction

Though we may feel that popups can be annoying, they are proven to boost sales and customer interaction. As a web designer, the mention of “popups” puts me on edge due to my obsession with streamlining all aspects of a site. However, as a product developer, I know that, when used sparingly and with respect to the customer, a focused implementation of certain popup can provide massive boosts in overall sales.

The same holds true for the “On Exit” or “Exit Attempt” popup. 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? In this tutorial, we’ll show you the quickest way to add an exit popup to WordPress by using the QuickPop plugin.

Tutorial Goals: In this tutorial, the goal is to create an “exit event” popup that provides solutions to the following:

• Add a popup to WordPress when visitor attempts to leave your site.
• The popup appears on specific pages only, not the entire site. In this case we will add it to the site’s home page, and the store page.
• We’ll use this WordPress exit popup to provide a discount to users who are navigating away from your site. Feel free to see a demo by hovering your courser away from this page!

As mentioned, you’ll want to grab the QuickPop premium popup builder for WordPress as that is the plugin we’ll be using for this tutorial. It comes with a 7-day free trial, but you can also try the free version (just search “QuickPop” in the Plugins area of your WordPress admin and you’ll find it). Now that we’ve established the goals for this specific popup, and assuming you’ve installed QuickPop, let’s dig in!

1. Create a New WordPress Popup

Create a new popup by clicking the “Design New Popup” link, or selecting an existing popup from your library if you’ve already added a few. Assuming you’ve correctly uploaded and activated QuickPop, you can access this screen by clicking “QuickPop” in the left sidebar of WordPress under the “My Brindle” tab. It will look like this:

As shown above, you’ll see that you can select an existing popup, or click “Design New Popup” to start with a fresh one (note that on the free version, you can only have one popup, but the library page will look the same). After doing so, you’ll be taken to the popup design area. Once there, we’ll start by updating our settings, so you’ll want to click that tab as shown here:

2. Set On-Exit Behavior and Visibility

After clicking, you’ll see the following screen. As listed in the goals of this tutorial, we want to tweak a couple settings here to ensure the popup appears on exit, but also only on the home page and the site’s Shop/Store pages. Note you can also apply the “All Pages” setting here if you wish to add the popup to every page of your site.

Once the above are in place, set this popup to “Disabled” for now, as we’ll need to tweak a few design settings as well as the actual content of the popup.

1. Set the Event to “On Exit” in the dropdown: Events > Type > On Exit. This will tell the plugin to only show this popup when a user attempts to hover away from the page.
2. Set the Visibility to “All Pages” to apply the popup to all pages of your site, or select “Choose Pages” and assign specific pages to include this popup, while excluding it on others. This interface is shown below, and you can click the “+” icon to add pages from the left. Pages appearing in the right column will display this specific popup.

Again, for now you’ll want to set this popup to disabled until the other settings are in place. Let’s tackle the design first:

3. Designing Your Exit Popup

In this step we’ll showcase the settings involved in ensuring your popup fits the brand of your website. With QuickPop you can edit any detail of your popup, from background gradients to field colors. To start, navigate to the Design tab of the QuickPop settings area. You’ll find the following settings, which we will elaborate on below the image:

You can change any setting you like in order to design the perfect popups that matches your site’s brand. With QuickPop Pro, you can change the background using a gradient, and can even change the overall that appears behind the popup with a colorful gradient. Here’s an example of a more fancy popup we’ve created to gather a customers email in exchange for a discount, though your design can be vastly different, with the ability to change button colors, text size/color/font, add images, video, and so on:

For each element in the design section you can select either a solid color or gradient. If selecting gradient, you will need to enter two color values, and the gradient will then transition between the two colors entered. In the above example, I set a solid pink color for the background overlay (the far background area) with a 90% opacity. I then set solid colors for the popup itself (dark purple), the white fonts. To round it out, I added some custom branding via the illustration of the Brindle dog illustration by centering it directly above the text (see next section for how I added this content).

Note also that the design tab allows you to specify certain content to include in the popup, including the form and/or a separate button where you can assign the link to. More on this in the next step. Once you’re happy with your design, you’ll want to move to the “Content” tab in order to finalize a few details.

4. Finalizing the Content of Custom WordPress Popup

You’ll now want to enter the actual content of the popup, which can be done, naturally, via the Content tab. A full overview of this section is shown below to give you an idea of which content can be altered/added to your popup. Beneath this image we’ll go into detail on each section, and how it will correlate to the example we provided earlier. Note also that you can also add a form that collects name and address if you like, but I’ve shut that off in the design settings:

Headline: As expected, this will add a headline to your popup to notify visitors what the popup is all about. This will automatically place it within a header tag, which you can also specify via the dropdown that appears above this field. Alternatively you can put your headline directly in the body and leave this blank, which is what I did for the example popup.

Body: This is the main message in your popup. use it to promote a sale, offer a promo code, embed a video, and any other number of goals. In my example, I centered the image of the dog, then added the text beneath (also centered). Rather than use the headline field, I entered it above my main text and applied an H2 tag to it via the text style dropdown. Since this is similar to a blog post, the flexibility is pretty unlimited.

Buttons: You’ll notice that there are two different buttons: The default button and the form button. The default button is a simple button that links to a separate page (either on your site or externally), and the form button relates to the “Submit Form” button that is connected to the form itself. As you might guess, these are organized accordingly in the content section. For each button you can specify the text that appears, and the link that the button should link to for the default button. Note that you can change the color of these buttons in the design tab.

Form Fields: This is where you can specify the default message in the fields appearing on your popup, and also specify if the field is required or optional.

Thank You Message: This is the message that will appear once a visitor has submitted a form.

Once your content is in place, you’re nearly done. Simply click the “Update” button to ensure all settings are saved, then it’s tome to return top the settings tab.

5. Time to Publish Your on Exit Popup!

Now that all settings are in place and you’ve saved your progress, click back to the Settings tab, as shown below:

As you can see in the above image, you’ll want to select “Enabled” in the status dropdown. After doing so, click “Update” in the righthand sidebar, and your popup will now be live! For an example, you can hover your mouse away as if you’re going to click on a new tab or enter a URL in your web browser. Try it anytime on this page to see the demo for the popup we’ve created during this tutorial.

Further Reading…

For more tutorials, please be sure to follow the Brindle Blog.

Looking to implement other types of popups? See our other tutorial on the Fastest way to Add Popups to WordPress

Looking for the best way to add an exit popup to your WordPress website, just as we did in this tutorial? Buy QuickPop Pro Here.