Are You Ready For Google’s New Policy On Popups?

As business owners and operators, it’s a fact of life that we must adapt – or suffer the consequences. Google’s latest policy concerning popups is just the latest example of this.

To help you adapt, we’re going to show you how to import an awesome pre-made popup into your site in just minutes!

Google’s New Policy

The new policy that’s declared to help users “easily access content on mobile” basically says: change how we use popups on mobile devices, or we’re going to penalize your site’s rankings. At this point, it’s conjecture as to how hefty these penalties will be, but honestly, in this era of hyper competition, is any penalty something we can afford?

And just for that very reason, we shouldn’t jump the gun and ask: how can we just remove the popup on mobile devices? It’s important to understand Google’s is not banishing popups for mobile users, just how they’re displayed, shaped and sized.

By creating a banner style popup, we can still reach our mobile audience without having to sacrifice our rankings on Google.

Importing the Pre-Made Popup

You can have this mobile adapted popup on your site simply by importing the files as explained below. It comes fully equipped with Cookies appropriately installed, it’s own theme, a complete form, and a no-hassle setup process. Plus, it’s fully responsive and has been tested to work across the most current major browsers.

Final Product

Video

Live Example

Banner Style Opt-In Live Example

Plugins Used

Import Files

Importing the Popup Files and Assets

Download and unzip the bundle file.

  • You’ll need the Main Popup, Thank You Popup and Popup Theme Files (xml).
  • You’ll also need the Fonts HTML file and the Styles CSS file (provided on Git below).
  • Note: the Main Opt-In Popup will import as “Draft” status, which means it has to be activated before it will work.

From the WordPress Admin, import the popup and popup theme files by going to Tools > Import in the WordPress Admin, as seen below. Scroll down and click “Run Importer” under WordPress.

Click the “Install Now” text first, if necessary.

Run Importer In WordPress Admin

After clicking Run Importer, upload each of the popup files (banner-style-opt-in-popups.xml and banner-style-opt-in-popup-theme.xml) to your site by clicking “Choose File” that appears on the following page:

Importing Popup Files

The importer will then ask about importing the author: choose assign the author data to an existing user.

Important: make sure to check the import attachments box for both files.

Importing Popup Files

You now have the Opt-In Popup, the Thank You Popup, and the Popup Theme on your site. You can find these under Popup Maker > All Popups and Popup Maker > Themes menu items in the admin.

The Opt-In Popup will import as “Draft” status, so it has to be activated before it will work, which we explain below.

Fonts

To get the fonts we’ve used in this popup into your popup, copy this Google Fonts code into the <head> of your site (included in the bundle file).

CSS Styles

Use the following CSS styles (included in the bundle file) to bring everything together, these styles are built for any general form made with Ninja Forms. If you’re not using Ninja Forms, you’ll have to make some modifications.

For editing, find the expanded version here (included in the bundle file).

Import the Ninja Form

To import the Ninja Forms form (included in the bundle file), go to Forms > Import/Export in the WordPress Admin. Click “Choose File” and select the Ninja Forms import file (banner-style-opt-in-ninja-form.nff). Once selected, click the Import Form button.

Important: If you’re using the Layout and Styles Extension from Ninja Forms, make sure to remove the container styles in the Form Fields Display Tab of the Form Builder.

Depending on how many forms you previously had, the Form ID # could be different than my setup. All this means is we have to change the Form ID # in the popup to match what is on Ninja Forms.

Import Ninja Forms ID #

In the above screenshot, the Form ID # for our Banner Style Opt-In Form is ID #3. We need to make sure this matches in the Popup Content Editor, as shown below.

Ninja Form Inside Our Popup

Once you have the right form ID # inside the popup, click “Save Draft”.

Test and Publish the Popup

Now, let’s test the popup by creating a “private” Test Page. Once we have our Test Page setup, we can activate the popup on only that page by using Conditions. This way, we’ll make sure everything is good-to-go before it goes live.

Setup ConditionsBanner Style Opt-In Conditions

To set up the Conditions, go to Popup Maker > All Popups and click each each popup to bring up their Popup Editors. On the right side, look for the Conditions Pane, and customize it to suit your needs. In this case, since we’re going to test the popup first, we set the Condition to Pages: Selected: Test Page.

You can then see the popup in action by clicking the Publish button in the Popup Editor, then visiting the Test Page.

Once you’re ready to go live, you can simply switch the Condition to what best suits your needs.

We hope you enjoy this popup!

The Best of Both Worlds

Next time, we’re going to show you how you can get the best of both worlds by having a popup for mobile devices and desktops!

 

 

 

9 Responses

  1. Author’s Gravatar

    When will this be available to use with Gravity Forms?

    1. Author’s Gravatar

      Hi Karelle,

      Just to be clear, you can still use this popup with Gravity Forms, but you just have to do a little more work as this one was built for Ninja Forms.

      So, when will I build one for GF? It’s coming! Let’s just say I’m not even close to warming up 😀

  2. Author’s Gravatar

    Awesome post and Thank You for the plugin as well. I use it in a free state with clients that USE the admin. I have had zero trouble in that capacity. Thats a good plugin. In any market. Will check you out for more in the fututre.

    1. Author’s Gravatar

      Thank you for the kind feedback, Dehn! And thank you for using Popup Maker – looking forwarding to publishing some awesome stuff for you in the future!

  3. Author’s Gravatar

    Delightful! The results work exactly as anticipated and offer plenty of theme/style flexibility. Especially nice are the cookies that manage repeat appearances.

    At the risk of getting messier, the article needs one more thing. After getting a form successfully completed, the results need to “go somewhere.” In my case, I wanted to send he results to MailChimp. So, the PUM MailChimp extension (or Ninja Form’s Mail Chimp extension) completes that last step. I used the NF version and it integrated seamlessly.

    Kudos to Popup Maker for tools that integrate so well, and to Walter for this how-to article!

  4. Author’s Gravatar

    Quick question…
    Mine works well, except the Thanks You pop’up never appears. What triggers that one_

    Thanks,

  5. Author’s Gravatar

    What triggers the Thank You pop-up? It is not appearing for me.

    I have used basic PUM plus the Forced Interaction plugin and the files included in this article. I’ve also added Ninja Forms’ MailChimp extension (as mentioned in my earlier comment.)

    The Thank You pop-up was not triggered either before or after adding the MailChimp extension. How should it be triggered?

    Thanks!

    1. Author’s Gravatar

      The option to trigger a thank you popup is available when editing your Ninja Forms Form. There is a “Close Popup” action available on the success actions tab.

      This only works with NF v3+, just something to make sure your already doing.

      1. Author’s Gravatar

        Thanks Daniel!
        It’s working now.

        I had failed to set visibility conditions for the Thank You popup. Doh!

Leave a Reply

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