How to Build a (Not Too Obnoxious) Pop Up Call to Action

How to Build a (Not Too Obnoxious) Pop Up Call to Action
This post has me conflicted. I am constantly trying to discourage clients from including pop ups on their sites (with the possible exception of some e-commerce sites), as they are generally an annoyance.

On the other hand, I often lose that battle and also I’ve seen a lot of truly terrible pop ups that just keep popping up over and over again so I know there’s still something of a need for decent strategy tips in this realm.

Before adding a pop up, consider:

  • Do you really need it? Like, really really?
  • Are you willing to risk alienating some users who hate pop ups?
  • Is there a better way to push the action you want users to take in the design of the site itself?
  • Are you going to be asking the user to take action before you’ve provided anything to them? This is particularly a concern for content-focused sites (blogs) rather than e-commerce sites.

If you really really need it and are willing to risk alienation, then also consider using a very long cookie time span so that the pop up comes back very infrequently once it’s been dismissed

More on pop ups on e-commerce vs. other types of sites

I generally feel like pop ups are “more okay” on e-commerce sites than other types of sites for two reasons:

  1. They are an established pattern (consumers are used to them) for e-commerce. I think that lowers the annoyance factor. However, I am cringing as I write this, remembering a sorority advisor I had in college who used to say “tradition is a four letter word” (meaning that it’s not an acceptable reason in itself for doing anything).
  2. Second, the utility is usually more obvious for e-commerce. It actually makes sense and feels beneficial *to the user* to sign up and be notified of sales and whatnot. In contrast, it feels salesy, like the infomercial guys is up in your face yelling “BUT WAIT,” when you’re offered ongoing content for an informational site via a pop up, particularly if it’s before you’ve had a chance to gauge the quality of the information that site provides.

Maybe that’s a generalization but it’s a common one and therefore it’s a generalization that your users are likely to also have in mind when they view your pop up. Do you want to be lumped with salesly “information” site pop ups? Probably not.

This is not based on any research, so please feel free to argue with me on this.

If you must, here’s how…

With all that said, here is my method for creating Fancybox pop ups that go away for a preset number of days when closed. This method uses cookies and is very much based on this StackOverflow answer, among other miscellaneous resources.

Step 1. Include the cookie.js and Fancybox files

I use Fancybox for most of my pop up and lightbox needs, mainly because it’s robust and I’m used to it. An unlimited commercial license is only $89.00 – a very good value, in my opinion. For personal/ non-commercial projects, it’s free.

This method makes also use of a cookie to keep the pop up from reappearing for a set number of days. I’ve used jquery.cookie for that, which is MIT licensed.

Once you’ve got the files from those places downloaded, you’ll need to upload them all to your site. Further instructions for that are in the expanders below.

WordPress Instructions

In WordPress, you’ll upload the files to your theme (or child theme, where appropriate). I typically put all the files for this sort of stuff into either an /inc/ folder or a /js/ folder.

Make sure to upload jquery.cookie.js and all the files from the /source/ directory in the Fancybox folder (you don’t need the other stuff).

Once you’ve uploaded the files, you will need to enqueue them, which looks like this (this goes in your functions.php file):

That’s it as far as getting the files in place on WordPress.

Shopify Instructions

Shopify won’t let you upload a folder to your assets (which is the spot in your theme/ template for these files), so you’ll need to upload them all directly to the Assets directory.

  1. Go to Themes > Template Editor and upload all the images from the Fancybox /source/ directory to the Assets folder. Also upload jquery.fancybox.pack.js, jquery.fancybox.css, and the jquery.cookie.js file.

  2. Include these files in your theme by editing theme.liquid and placing the following between the opening and closing <head> tags (make sure you put the JS files after jQuery, which is likely already included):

{{ 'jquery.fancybox.css' | asset_url | stylesheet_tag }}
{{ 'jquery.cookie.js' | asset_url | script_tag }}
{{ 'jquery.fancybox.pack.js' | asset_url | script_tag }}

That’s it for files to include!

Step 2. Build your pop up content

You’ve got to actually build out the content for the pop up as well. I’m not going to go too in depth on that point here, but essentially here’s what I do:

  1. Create a <div> in the footer of my site (usually in footer.php in WordPress or in theme.liquid in Shopify) and use that to hold the pop up content.
  2. Give that <div> an ID, used to target it for the pop up, for example <div id="popup">.
  3. Give that <div> an inline style of display:none; to hide it from view: <div id="popup" style="display:none;">
  4. Put everything for the pop up inside that <div>.

Step 3. Create your trigger

The last bit of HTML is the trigger for the pop up. Normally, pop ups/ lightboxes happen on some kind of user interaction (think of gallery, where the click on the thumbnail opens the lightbox). In this case, there’s no user interaction, just the page load.

I use a hidden link element on the page (typically in the footer) to handle this:

<a href="#popup" id="trigger"></a>

Since there’s no content, the link won’t be visible to the user. This link only requires two attributes:

  1. The ID of that <div> we created as the href (which is what tells Fancybox what to open when the link is triggered).
  2. Its own ID which will be referenced in the jQuery that initiates the pop up.

Step 4. Call it all into action

Once you’ve got everything (js files, pop up content, trigger) in place, you’ll call it with code like this:

Note that the above code is wrapped in a noConflict wrapper for the sake of WordPress (more on noConflict wrappers).

Step 5. Test it

As a reminder – you will either need to turn off the expires delay for testing purposes or use another method for blocking the cookie. Incognito tabs in Chrome work well, as does turning off cookies (or repeatedly deleting the specific cookie you’re setting).

  1. Kim Cooperrider

    This is great! fancyBox = <3

    Also, I recently tried this as a cookie alternative: http://www.jstorage.info/ Really neat little local storage wrapper!

    • Zoe

      Nice, thanks Kim! I was thinking about local storage the last time I implemented this but ended up going the easier (cookie) way out :)

  2. Even though the code is a bit beyond me, this a great way of solving an annoying (and often uuugly) problem. You go!

  3. I would also add one important thing – hide the pop-up on small mobile screens, especially if your website is responsive so zooming out doesn’t work.

    It’s insane how many website owners don’t realize that when a person reading their blog on a phone gets a pop-up they can’t close because the tiny X is outside the viewport, their only solution is to leave the website.

    Never ever have I subscribed through a pop-up, especially when I’m irritated because I can’t read the post I wanted to read.
    And I’m a person who spends a lot of money online, so you might have just lost a few sales too.

    • Zoe

      Absolutely, I definitely let clients know that they’re taking the risk of alienating visitors who hate pop ups when they first say they want one. Doesn’t always convince them, which I find interesting…

Leave a Comment

Your email address will not be published. Required fields are marked *

About posting code: Please use a Gist or similar to share any extended code samples, and any code other than basic HTML, CSS, or jQuery/ JS, so as to keep the comments clean and readable. Basic HTML, CSS & jQuery can be shared in the comment surrounded by <code> tags. Thanks for commenting!