Banner style opt-ins are a great way to increase gains on your site so we decided to make a guide showing you how to create a high converting banner style popup quickly and easily.
Increase Reach and Sales
Using a non-invasive popup to capture e-mail addresses and offer a discount, is a great way to increase reach and sales. To do this, we’re going to use a Scroll Trigger – this will then display an ad that offers a discount in exchange for opting-into our newsletter in a banner style popup.
If you’re interested, read our docs on scroll triggers here or check out the official Scroll Trigger Extension Page.
Final Product
What’s Needed for this Banner Style Popup?
Overview
To prevent impacting users’ experience, we’re going to limit the popup to only a few pages that make sense.
We’ll make sure to bring it in from the top of the screen (minimal height, full width, banner style popup) to keep from killing user experience, and we’ll make sure that our cookies are created once the popup is closed or the form is submitted. That will make sure the popup doesn’t keep re-appearing after user action.
The Process
- Creating the popup to fit our description: content, trigger, cookie(s), conditions, display, and close settings.
- Theming the popup to suit our needs: full width, minimal height, matches current theme
Creating the Popup Content
We need a clean concise message that doesn’t take a lot of space, something like: Sign up & Get 15% off! Then, we’ll need name and e-mail fields, and a submit button. In banner style popups, it’s important to KISS, so long messages or offers wouldn’t be a good fit here.
Putting a form in our popup is super easy! You can use something like Gravity Forms and insert your forms directly in your popups, which is a sinch. In our example, however, we’re going to integrate with MailChimp, which is even easier because of the MailChimp Integration Extension – this thing is awesome! If you have Aweber, we have an extension for that one, too.
Here’s what our complete content looks like in the Popup Editor, with the MailChimp form shortcode – the layout argument will allow us to make it horizontal all the way, which is the cornerstone of a banner style popup – this took about 4 minutes:
Creating the Popup Scroll Trigger
We want this popup to trigger as soon as the user starts scrolling down on the page, so we’re going to set up our scroll trigger like this – the key feature setting that makes this work is Trigger Point: top.
We now have a working popup that subscribes users to our MailChimp list, but we need to take it step further to make it worthy.
Creating the Popup Cookies
We need to create and assign two cookies to this scroll trigger. This way, users that close the popup won’t continue to see it, and users who subscribe will not see it for 10 years (effectively never).
Read this section of our Cookies and Triggers documentation to walk you through this process.
Creating the Popup Conditions
Like I mentioned earlier, we don’t want to display this popup on all pages, but we want to make the biggest impact, especially pertaining to sales, since the popup includes a discount offer. Basically we are looking to target entry pages only. This includes the Home Page, and since we run a type of market place, all of our items’ entry pages as well.
As such, you can see how I set the conditions for our example. This makes sure if you’re on the Home Page or any of our product or product archive pages, the popup will trigger – meaning my popup reaches the correct audience for the content.
Customizing how the Popup Displays
As our objective states, we want to make a minimally invasive popup that attracts user attention, but doesn’t kill the experience.
We’re going to roll with a popup that appears by animating down out of the top of the browser window. A banner style, full-width, and narrow from top-to-bottom popup should do the trick.
For that, my settings are going to look like this – the big key is animation speed – the faster, the more intrusive it can be – so we set the animation speed to something a little slower. To get that full width look, we set the min width to 100%:
Customizing the Popup Close Settings
In the end, we decided we wanted to get rid of the default close button and add some simple text after the end of our submit text. This means the we can use the Forced Interaction Extension, which disables the close button, in combination with the Popup Maker Close Button Shortcode.
This gives us exactly what we need – we’ll have the offer, the name field, the e-mail field, the submit button, and a no thanks close button, all in a sleek, organized banner style popup – simple and non-intrusive.
To finalize our close settings, we need to make sure the popup closes once the user submits the form. Remember, we already have a cookie created on that event, but still, when they submit, the popup will remain.
To make sure we get the popup to close after a short delay, we’ll add in a snippet of JS that can be found in this doc.
Creating the Popup Theme
There are tons of settings that will help achieve that banner style popup look we’re after. We are really just looking for two things: (1) Matches the current theme and (2) is minimally invasive.
In the end, we went with a combination of our theme editor and some custom CSS.
The text offering the discount for subscribing was simply not good enough, our users deserve better, so we fixed that up right quick with some CSS animation stuff:
After that, we juiced up the input fields a bit, adjusted our theme’s button styles to match this banner style popup just perfectly, and made sure our ‘no thanks’ button was less noticeable than our submit button – what self respecting popup maker wouldn’t? Last, tacked onto the end, there are my alignment and position settings, naturally:
After all was said and done, here’s what our new banner style popup looks like:
Why It Works
This minimally invasive popup is great way to deliver not only these types of messages to your users, but any type of message. There are endless applications for horizontal or vertical, banner style popups (or bars) at the top, bottom, or side of your screen where you can put any content.
In the end, it works because it’s non-intrusive, but also attractive in it’s own way. The biggest factor, however, like we mentioned in the beginning, is the situation.
The popup is successful because we put it in a situation to be successful in by displaying it only on pages where getting a discount is pertinent. Our Home Page, Downloads Pages, and Archives Pages.
Having this type of mindset when creating your popups will allow you to get the most out of Popup Maker.
The Possibilities are Endless
You could also choose to implement this style in different ways such as: using the bottom of the browser instead of the top, increasing the scroll distance, or use a different trigger entirely like Time Delay.
