News Match Popup Basics Plugin

What is the "News Match Popup Basics" Plugin?

As part of INN's support for the 2017 News Match campaign, the INN Labs team released two WordPress plugins to help sites convert readers. News Match Popup Basics provides guidance and useful tools for using popups in your campaigns.

News Match Popup Basics does the following:

  • Creates a new popup with our recommended default settings, using the free Popup Maker plugin
  • Provides a way to disable popups on your donation pages
  • Provides a way to disable popups when readers click a link in your Mailchimp-powered newsletter

What's covered in this article: 

1. How to install the News Match Popup Basics plugin

2. How to set up and customize your popup(s)



1. Installing the News Match Popup Basics plugin

News Match Popup Basics requires the  Popup Maker plugin, so first, we need to install that.

1. On your WordPress site, click on Plugins in the Dashboard menu. Then click the Add New button at the top of the page.

NOTE: If you don't see the "Add New" button or the Plugins menu, your user might not have permission to manage plugins on the site; you should contact your technical support and ask them to install News Match Popup Basics for you. Email support@inn.org to reach the INN Labs support team.

2. After clicking Add New you should be on the "Add Plugins" page. In the Search plugins... box, enter "popup maker". You should see a plugin named Popup Maker™ – Best Rated by WP Popup Maker.

3. Click Install Now to install the plugin, and then click Activate

4. You'll be sent to a page asking you to "allow sending certain information to a third party". You can press the Skip button without any negative effects. Whether you choose to skip or accept, you'll be taken to the list of Popup Maker popups: none yet exist, and that's okay.

5. Go back to the "Plugins" page. Again, in the Search plugins... box, enter "news match popup basics innlabs" and choose the popup named News Match Popup Basics by innlabs. That's our plugin! 

6. Install and activate the News Match Popup Basics plugin.

2. How to set up and customize your popup(s)

In the Dashboard menu, choose the "Popup Maker" item. This will take you back to the "Popups" page you saw earlier, but there should now be a draft popup named "News Match Default Popup." Click on it.

You'll see an editor page that looks like the default WordPress post editor, but with some new, exciting boxes. You can read more about those boxes at the Popup Maker plugin documentation.

The plugin comes with these default settings for the popup: 

  • It is not published by default. You must publish it before it becomes active on your site.
  • It is size “Large” from Popup Maker’s settings.
  • It appears at the center of the bottom of the reader’s screen.
  • It slides up from the bottom of the screen, over 350 milliseconds.
  • It has a “Close” button.
  • It does not prevent readers from interacting with the page (by means of an overlay).
  • It does not have a title.
  • It automatically opens after 25 seconds on the page (immediate popups are jarring to the user).
  • Once dismissed by a reader, it does not appear again for a year or until the reader clears their browser’s cookies (whichever comes first).
  • It appears on the front page (homepage) of your site.
  • It uses Popup Maker’s default theme.

Finding the News Match Popup Basics settings

From the WordPress Dashboard menu, under Popup Maker, choose News Match Popup Basics.

Disabling popups on certain pages

Donation pages should help people give you money and should have as few obstacles to that goal as possible. Likewise, newsletter signup pages. Strip out ads, remove unnecessary headers, maybe even clean up your footer on these pages. Donation and signup pages should do one thing and do that well.

Popup Maker's free version includes a  simple yet powerful Boolean conditionals system that determines on what pages popups appear, but that system only works on a per-popup basis. Preventing popups from appearing on a particular page requires checking every single popup on your site, and modifying their conditions. We've endeavored to make the process simpler.

In the News Match Popup Basics settings, check the box to enable donation page popup prevention, and add some URLs to the box. Each URL must be on its own line. You should remove the protocol from the start of the URL, so that  https://example.org/ is entered as example.org/.

A screenshot of the WordPress admin showing the News Match Popup Basics settings page, focused on the URL-based popup suppression feature's settings. The URLS given are example.org/donate/, example.org/newsletter-signup/, and /about/

Example settings for the URL-based popup prevention feature of News Match Popup Basics.

When a visitor goes to a page the URL of which matches one of the entered URLs, News Match Popup Basics will prevent Popup Maker from displaying any popups on that page. You can include URL fragments as well, so if you want to prevent popups on pages that have a common URL name, like every page that has  donate in its URL.

Be careful with how general your URL fragments are. By "match" we mean that if the entire text on the line in the box can be found in the URL, it will match:

  • example.org/meow/ will only match example.org/meow/ and example.org/meow/woof/
  • /meow/ will only match example.org/meow/example.org/meow/woof/ and example.org/2014/03/25/meow/
  • meow will match example.org/meow/example.org/meow/woof/example.org/2014/03/25/meow/,
    example.org/2017/10/25/adopt-chairman-meow-adorable/ and
    example.org/category/homeownership/

We named this feature "donation page popup prevention," but in reality, it can be used to exclude popups on all sorts of pages.

If you'd like the ability to programmatically exclude popups on arbitrary pages, let us know on this feature proposal on GitHub.

Disabling popups for Mailchimp visitors

In the WordPress Dashboard, under the “Popup Maker” menu item, on the “News Match Popup Basics” page, there is a checkbox that enables MailChimp suppression. There is also a text box to set the  utm_source parameter. MailChimp automatically appends this URL parameter to outbound links in your emails if you have click tracking set up.

From one of the emails you have sent, find a link that contains a utm_source= parameter and copy the following argument text, up until any & character into the text box. For example, a Nerd Alert newsletter sent by INN Labs contained a link that looked like this: https://example.org/?utm_source=Nerd+Alert&utm_campaign=4d4ecd9f68-EMAIL_CAMPAIGN_2017_10_06&utm_medium=email&utm_term=0_1476113985-4d4ecd9f68-421742753. From that URL, you would copy Nerd+Alert into the text box.

A screenshot of the WordPress Admin settings page for News Match Popup Basics, focused on the popup prevention for MailChimp visitors. The setting for utm_source is set to "Nerd+Alert"

An example configuration of the  utm_source setting.

Once you have provided a  utm_source parameter, checked the checkbox, and saved the settings, any popup that contains an HTML element with an id attribute equal to mc_embed_signup, or a CSS selector equal to #mc_embed_signup, will be suppressed. Suppression works client-side using JavaScript that runs in the visitor’s browser.

If you have multiple MailChimp signup forms on your site, suppression based on the HTML ID of the form will not work for you. You should add a class to all MailChimp forms in popups, and use that as the selector. For more details about this process, see the FAQ entry "Why does MailChimp popup suppression use  #mc_embed_signup" at the plugin's WordPress.org entry.

If you'd like better tracking of MailChimp form sign-ups, we recommend that you follow MailChimp's  guide on editing forms for better analytics to track popup conversions.

Further Customizations

Which pages will the popup appear on?

Configure which pages the popup appears on using the built-in conditionals feature. For disabling the popup on certain pages or in certain cases see the options above in this article.

What style options do I have?

Review the Popup Maker themes available and modify them to suit your own site's appearances. Once you've modified or created a theme, edit your popup to make it use your theme.

In addition to using Popup Maker themes, you can style popups using your site's WordPress theme's CSS, Jetpack’s Custom CSS Editor, or any other tool that allows you to define custom styles on your site.

What goes in a popup?

We recommend donation forms or newsletter signup forms. For a simple donation form that integrates with the News Match campaign, check out  News Match Donation Shortcode.

Need help?

Contact us at support@inn.org anytime. We're happy to help!

Still need help? Contact Us Contact Us