Three WordPress plugins, documented here. Current documentation set Booking / QuickPop / SleekAnnounce.

Home › Blog › WordPress Tutorials › Tutorial: How to Add an Exit Popup to WordPress

Tutorial: How to Add an Exit Popup to WordPress

17 August 2020 · WordPress Tutorials

by JoshAug 17, 2020Uncategorized

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.

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.

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.

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.
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:

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.

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.