The Pop-ups feature will let you build a persuasive ask from scratch, giving you the ability to use any of the available blocks.
A pop-up can be limited by category or run sitewide, and it can appear at the top, bottom or in the middle of a page.
Another setting allows you to exclude users who arrived by clicking a link in an email newsletter, so you’re not asking in the pop-up for a newsletter sign up when they’ve just come from your newsletter.
The video below walks through different Pop-up settings:
If you haven’t already install the Newspack Pop-ups plugin by navigating to Dashboard → Newspack → Engagement, clicking the Newspack Pop-ups tab, and clicking Install:
As you see above, you can build your first popup right after activation, or access the feature through the new Dashboard → Pop-ups menu on the left. That menu is how you’ll find all pop-ups created.
Creating a Pop-up
Follow these steps to create your first pop-up:
- From the screen above, click Add first Pop-up, or navigate to Dashboard → Pop-ups and click Add New.
- Pop-ups are edited like posts or pages, using the Gutenberg editor. In this example, we kept it simple with a title, a Paragraph block, and a Button block:
- Click Publish, so you can set the pop-up to display on the site.
- Options in the right sidebar can be used to set when the pop-up is displayed overall. To view, select Document tab at the top. If the right sidebar is not visible in the editor, it can be opened by clicking the cog icon in the top-right corner:
- The pop-up will not show unless you’ve either checked Sitewide Default at the top of the Pop-up Settings panel (which will set the pop-up to display on any page or post on the site), or selected categories in the Categories panel (which will restrict the popup to only show on posts with specific categories.
If more than one pop-up is being run at the same time, and a post fits more than one condition, only the most specific will be shown. For instance, just a pop-up aimed at the “Opinion” category will be shown if another is running site-wide.
You can fine-tune your pop-up display settings further by using the other options in the Pop-up Settings panel:
- Trigger – radio buttons determine how the pop-up is triggered. Each will open up a subset to choose a specific time or percentage to scroll through the post.
- Frequency – A frequency of “once” will show the pop-up only a single time to the same user with the same browser, regardless of time period. “Once a day” is the most frequent available. There’s also an optional Test Mode, which only shows the pop-up to logged in admins for testing.
- Placement – the location for the pop-up, which can be displayed in the Center of the window, or fixed to the Top or Bottom of the screen. You can also opt to place it Inline, which will add the pop-up as a block inside of your post content, that can be dismissed.
- Approximate position (in percent) – available when you pick the Center or Inline placement. Allows you to control roughly how far down the page your popup should appear, either by scrolling (Center Position), or by content length (Inline Position).
- Trigger – available when you pick the Top or Bottom placement. Determines what will trigger the pop-up to appear, either by Timer or Scroll Progress. Paired with Delay when Timer is selected, or Scroll Progress when Scroll Progress is selected.
- Timer and Scroll Progress – finer controls for you Top or Bottom placed pop-up. The Timer value allows you to set a Delay in seconds a visitor is on a page before the popup appears. The Scroll Progress allows you to set the percentage a visitor has scrolled down the page before the pop-up appears.
- UTM Suppression – a UTM code is a snippet of code that can be added to the end of a URL, to be used with campaigns. You can use it in the Pop-Up setting to prevent the popup from displaying when visitors have come to the site using a specific URL. So for example, if you had a pop-up promoting your newsletter, you wouldn’t need to show it to a visitor who got to the site following a link from your newsletter.
To use it, you would add
?utm_source=newsletterto the end of the URLs in the newsletter that point to your site, and add “newsletter” to the UTM Suppression field. The word you use as the
utm_sourceis arbitrary — using
spatulawould work just as well, as long as the
utm_sourceand UTM Suppression field match.
- Background Color and Overlay Color – these two settings control the overlay’s color and opacity. The size of the color overlay may not be accurately represented in the editor, though it’s correct in preview and final display.
- Display Pop-up title – showing the Pop-up’s page title can be toggled, so you can either display the page title you gave the pop-up at the top, or hide it and only show content from the editor.
- Text for “Not interested” button – custom text can be added in the “Not Interested” box to let the user close the pop-up. The user will always see an “X” at the top of the pop-up to close it, even if “Not Interested” text is left empty.
Here is an example of how a user will see our simpler Pop-up. We added a brighter color to the button, and added “Maybe next time” for the “Not Interested” text:
In the example below, we started a new pop-up, and added a Cover block with the light-bulb image. Inside, there’s a Header block, Paragraph block and a Button block; to finish it off, Display Pop-up title has been uncheced. Again, you can be as creative as you’d like in mixing and matching blocks in a pop-up. Just consider how easy you want it to be for the user to take the action you’re suggesting.