How to Create an Exit Popup With the Layered Popup Plugin for WordPress

Exit popups are messages that are shown to visitors when they are about to leave a website. They are mostly used to encourage visitors to complete their purchase or make a visitor subscribe to an email list, or simply make them stick around longer by suggesting products or content they might be interested in. They can also be used to ask for feedback about your site.

The beauty of exit popups is that they don’t distract the user when they are engaging with your content or making purchases on your website. They only occur when visitors are about to leave the site.

Exit popups work by tracking the cursor movement; this means that anytime the cursor moves out of the content area of the browser, it triggers a popup to appear.

How to Create a Successful Popup Campaign

Let’s explore some of the things you should keep in mind when creating popups so as to ensure a better experience to your users and guaranteed results for your campaigns.

Keep Popups to a Minimum Number

Am sure you have visited a site where there were too many popups that you ended up leaving the site. Don’t be that person who bombards users with unnecessary pop-ups.

Ensure That Popups Serve a Purpose

Always have a reason behind every popup you activate.

Ensure That Popups are Being Shown to the Right Audience

For an eCommerce site, first-time shoppers might appreciate a popup offering them a discount, but for frequent shoppers, this might not be applicable. For example, a user who is already logged in will not appreciate a popup that wants them to sign up.

Use Only One Popup on any Single Page

It is advisable to have only one active popup on a single page. Too many popups in a single page will completely distract your visitors.

Have an Irresistible Offer

The offer should be enticing enough to make visitors act on the popup. For example, you could give them a special discount or offer to send them free content if they subscribe.

Make Your Popups Beautiful

Its always good to ensure that your popup matches the theme of your site. It should also be beautiful to look at in terms of imagery, language, and design.

Get Started With the Layered Popups Plugin

We’ll use the Layered Popups plugin to create some popups for a WordPress site.

The first step will be to download the plugin from the Envato Market. If you don’t have an account, simply head over to the signup page and create one. Once logged in, you can purchase the plugin from its product page.

You will then get a link to the files or simply go to the downloads section of your account and download the zipped files.

Now login to your WordPress account. Go to Plugins, Add New and upload the zip files. Then click Install Now and after it finishes installing click on Activate Now. You are now ready to start creating your popups.

You should now see Layered Popups in the left-hand menu. To start using it, simply hover over the link and you will see all the options available for the popup.

All About Layered Popups

Layered Popups comes with over 200+ ready-made templates. Just pick a design, edit the content, and you can have your popups live in minutes. You also have the option of creating your own popups from scratch which is very easy to do.

In addition, Layered Popups are fully animated and also come with the ability to integrate share buttons for various social networks such as Facebook, Twitter, LinkedIn, and Google +.

In this section, we are going to look at how to create an exit popup that is guaranteed to convert. Let’s get started.

Layered Popups comes with over 30 demo popups to get you started. You can find them via Layered Popups > Popups. To be able to activate any one, simply click on the + button and your popup will go live.

You can find the rest of the popups under the Popups Library submenu.

As you can see above there are many pre-made popup templates of every type—including contact forms, subscription forms, and social sharing. You don’t have to be an expert in design, just import and tweak the popups you like.

Creating a Custom Popup

In some cases, you might just want to create your own popup. Luckily you can to do that via the Create Popup option. To get started, click on Create Popup.

The first thing to do is set the title of the popup. This should be as descriptive as possible so you don’t have a hard time remembering which popup is for what purpose. Our popup will be called New users.

Next, you will want to set the popup size in pixels. Don’t fret so much about this since you will likely change it when you see the final result.

The next thing will be to select the position of the popup on the browser window. Depending on your requirements, you might want it at the center, on the sides, on the bottom or on the top.

Go on and tick the display overlay button if you want your popup to have an overlay, then fill out the rest of the details about the overlay such as opacity, color, and animation.

Designing a Popup With the Constructor

Let’s move on to the most important part of the new popup creation process—the constructor. This is where you design how you want your popup to look. Something to consider before designing is to make sure that the colors you choose match the theme of your website.

Every element of the popup is known as a layer. so you will simply click on Add Layer and choose the kind of content type you want on your popup.

Now you just have to add all the content for your pop up.

For example, in our case, we are going to add a background image, a header title, a text field which describes the offering to the visitor, and a subscribe button. Last but not least, of course, is a close button for the popup.

As you can see above, you can edit any attribute of a layer, such as size, position, style, and even animation.

Adding Form Elements to the Popup

Now that our popup is complete, we move on to specify which form elements will be shown to the visitor. For example, we want visitors to fill their email address, so this field will be mandatory.

Define your form elements and save the popup.

Mailing Options

This section contains Double Opt-In and Admin Notification parameters

Double Opt-In is an additional step in the subscription process where a user is required to verify their email address. Here we fill out what message you want your user to receive after subscribing.

Growing your subscribers should be all about quality and not quantity. This ensures that all the people in your list are interested and contribute to exponential growth for your website.

The Admin Notification allows you to specify if you want to receive submitted contacts by email.

Integration

This option allows you need to integrate popups with your marketing provider for better data analytics. You should already have an API key that will allow you to integrate as shown below.

Campaigns

Having campaigns is an essential step in growing any online business. For that purpose, you need to run popup campaigns. For example, a campaign meant to acquire new users to your site will entail creating and showing popups that are meant to educate, entice and offer interesting offers to a new visitor only.

To create a campaign, navigate to A/B Campaigns > Create New Campaign. Enter the campaign title and select the popups you want in that particular campaign and save the changes.

Targeting the Popup

We’ve configured the popup, but until now, it hasn’t been activated on the site. To make it active, simply go to Layered Popups > Targeting. But before that, you need to know the following:

how the popup is displayed—this determines which event will trigger the popup. In our case, it will be OnExit.
when the popup is displayed—specifies the dates when the popup will be displayed
where the popup is displayed—this specifies where the popup will appear. It can be on the homepage, on specific posts, or any other place.

It also helps you to specify which popups will be shown on which kinds of devices. This means that you can choose different popups for desktops and mobile devices or both.

Our target will be OnExit Popup, for desktop only and should be shown once per session to non-registered users.

Now that your popup is active, you can be able to view how many people have seen your popups via the campaign statistics.

Conclusion

Having popups on your site is an awesome way to increase conversion on and possibly win over potential customers. That’s if you use them properly however, excessive or intrusive popups will only alienate your visitors.

While you’re here, check out some of the other popup plugins available on CodeCanyon.