Set Up and Customize the Newsletter Pop Up Plugin

This Help Desk article covers how to set up and customize our Newsletter Pop Up plugin for WordPress sites.

ACCESSING POP UP SETTINGS

Once installed, the Newsletter Pop Up plugin may be accessed by navigating to Appearance > Customize > EmPress Pop Up. Here, you will see settings for Content Options, and Styling Options.

Content Options allow you to:

  • Embed your subscription form code. 
    • The plugin will accept MailChimp Unstyled embed form code (instructions for this below), shortcode from the MC4WP plugin, or any plugin shortcode associated with your preferred newsletter platform. However, please note the plugin has been specifically styled to work with MailChimp.
  • Add a title to your Pop Up
  • Add an image to your Pop Up
  • Add an optional description to your Pop Up, describing what readers can expect.
  • Set a display frequency (how soon a reader will see the Pop Up again, after they've dismissed it)
  • Turn on and set mobile display percentage (how far down the reader must scroll on mobile before seeing your Pop Up; i.e. 50 would mean 50% down the page)

Styling Options allow you to:

  • Set overlay color (the background laid over the entire site when the Pop Up appears)
  • Pop Up Background Color and Image
  • Pop Up Text, Title, Field, and Button colors

MAILCHIMP FORM INTEGRATION

We recommend building your MailChimp form code first, before working through Pop Up customization options. This will allow you to more easily see how the Pop Up will look on  your live site.

1. Begin by navigating to the MailChimp website.

2. From your MailChimp dashboard, navigate to the Audience tab. Find it on the left side of the dashboard.

3. On the left side of the Audience landing page, click Signup Forms. Then select Embedded Forms. 

4. Under the Embedded Forms section title, you will see a series of tabbed labels. Select Unstyled. Then, customize the form by following these instructions:

UNCHECK the following buttons:

  • Uncheck "Include form title"
  • Uncheck "Show interest group fields"
  • Uncheck "Show required field indicators"
  • Uncheck "Show format options" 

Check off/SELECT:

  • Check "Show only required fields"   This should be the only option checked off! 

Here is a short video showing these options:

5.  Copy the embed code over on the right, under the "Copy/paste onto your site" title. This is the code that begins with <!– Begin MailChimp Signup Form –>  You will need to paste this code into the WordPress Customizer, so be sure to leave the MailChimp tab open if you think you'll need to come back and copy it later. 

6. In a separate tab, navigate to your WordPress site, and go to Appearance > Customize > EmPress Pop Up. Click on Content Options, then paste the copied form code into the Subscription Form Code field. 

7. Next, hit Publish. 

  • Important: Clicking Publish this will publicize any other changes you have made in the Customizer! However, you will need to publish your form code if you want to preview your Pop Up and continue customizing it.

8. Exit the Customizer completely, then return to it by going to  Appearance > Customize > EmPress Pop Up. Now that the form code has committed, you should be able to see your pop-up in the Customizer Preview.

POP UP CUSTOMIZATION OPTIONS

With your form properly integrated, you can now begin to customize the look of your Pop Up

1. In Content Options, enter a Title, Image, and Description for the pop-up. 

  • An example title might be “Subscribe to my newsletter”
  • An example description might be “Sign up to receive weekly newsletters and sale alerts.” 
  • Upload an image by clicking Select image, if you wish for an image to appear to the left of your sign up form. When added, the default formatting for this feature looks like this:

2. Set a display frequency, by entering a numeral. When a user closes your Pop Up, the display frequency refers to how many days will pass before they see it again. For example, a display frequency of 14 means that readers would only see the Pop Up every two weeks, assuming they have deliberately closed it. 

3. Opt to display the pop up on mobile, and set a mobile display scroll percentage.

  • Check off the Display the pop up on mobile option.
  • Enter a numeral into the mobile display field, which should correspond to the percentage. For example, entering 65 into the field means the reader will see the pop up once they have scrolled 65% of the way through the mobile page.
  • More background: Because our Pop Up is exit-intent, on desktop sites, the Pop Up can track when a user is moving the mouse upward and out of the browser, to close your site. This triggers the Pop Up to appear. Since there is no mouse cursor on mobile, we use a scroll percentage to ensure the Pop Up will automatically fire after the reader scrolls down a set amount.

4. Finally, add your preferred Styling Options. The Styling Options may be accessed by going to Appearance > Customize > EmPress Pop Up > Styling Options. In this tab, you may: 

  • Set overlay color (the background laid over the entire site when the Pop Up appears)
  • Set optional Pop Up Background Color and Image
  • Set Pop Up Text, Title, Field, and Button colors

5. Publish your changes, and you're all set!

ADDITIONAL TIPS

  • If at any time you find that your changes are not reflected in the preview, simply save your progress, exit the Customizer and re-enter. Once back, head to EmPress Pop Up again. Now, upon clicking the tab, you should see a preview of what the pop-up looks like.
  • Looking for hex color codes so that you can customize your pop-up to match our Color Packs? Click here.