• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Make WP Simple

WordPress Tutorials

  • Blog
  • Getting Started
  • Tutorials

How to Add a Popup to Your Site Using PopupAlly

February 20, 2017 Tutorials 19 Comments

This post may contain affiliate links, which means I will receive compensation if you click through and make a purchase.

How to Add a Popup to Your Site Using PopupAlly

Popups are one of the best ways to increase site conversions. And while there are a ton of popup plugins on the market, sometimes you just want something simple. And free. If you’re looking for an alternative to using Mailchimp’s popups or just want to be able to add a popup to your site in minutes, PopupAlly is the answer you’ve been looking for.

PopupAlly is a great free plugin that allows you to easily add a popup to your site. And if you’re looking for more features, there’s a pro version as well. In this tutorial I’m going to go over how to add a popup to your site using PopupAlly.

1. Install and Activate PopupAlly

First things first, you’ll need to install and activate PopupAlly. Go to Plugins > Add New and search for PopupAlly. It should be the first item, as seen below:

How to Add a Popup to Your Site Using PopupAlly

Go ahead and click install, then click activate.

2. Configure Display Settings

Now that PopupAlly is installed, you’ll see a new menu item titled PopupAlly. Click on it and you’ll see the following:

How to Add a Popup to Your Site Using PopupAlly

Click on Popup1 to expand it. This is where you get to choose whether you want the popup to display on exit or based on time. I honestly prefer exit intent popups as they’re less intrusive, but if you’d rather have a popup appear after a certain amount of time has passed, feel free to choose the time-delayed popup option.

How to Add a Popup to Your Site Using PopupAlly

Once you’ve selected your popup type, more options will appear. The first option is where the popup will be displayed. You can choose to either have it display on every page, or only on certain pages.

How to Add a Popup to Your Site Using PopupAlly

The next option is how often your popup is displayed after it has been dismissed. How many times have you been to a site, closed a popup, and then a few hours or days later found yourself face to face with said popup? Needless to say, this gets incredibly annoying as a user.

By specifying how long until the popup is displayed again, you’re saving your site visitors from being annoyed. By default this is set to 14 days, but set it based on what feels right to you.

How to Add a Popup to Your Site Using PopupAlly

Once you’ve configured those settings, click the save button.

3. Copy Your Embed Code

Now that our popup display preferences are set, it’s time to setup the actual form. For this, you’re going to need your form’s embed code. Here’s how to get the code in Mailchimp and Convertkit.

Sidenote: Not using any of those email providers? No problem! PopupAlly works with all major providers! Since there are a bunch of them, I’m not going to go over how to grab the embed code for each, but if you check your provider’s knowledge base, they should have info on how to access it.

How to Get Your Mailchimp Embed Code

Login to your Mailchimp account, then go to Lists. Click on the list you want to get the embed code for, then click signup forms followed by embedded forms.

How to Add a Popup to Your Site Using PopupAlly

Copy the code provided and continue onto step 4.

How to Add a Popup to Your Site Using PopupAlly

How to Get Your ConvertKit Embed Code

Sign into ConvertKit and click on the form you want to use. Click on settings then embed. Since PopupAlly requires the HTML code, select Raw HTML.

How to Add a Popup to Your Site Using PopupAlly

Copy the code provided and move onto step 4.

How to Add a Popup to Your Site Using PopupAlly

4. Configure Style Settings

Now that we have our embed code, it’s time to go back to our PopupAlly settings. We left off after finishing the display settings page. Now we’re going to configure the style settings.

On the right hand side of the PopupAlly page you’ll see a few icons. Click on the 2nd icon from the top (the palette icon) to go to the style settings page.

How to Add a Popup to Your Site Using PopupAlly

In the first text box, paste the embed code from your email provider.

How to Add a Popup to Your Site Using PopupAlly

Scroll down and you’ll see a bunch of customization options. There’s even a handy preview so you can see exactly how it’ll look.

Once your popup is looking the way you want it to, click save.

5. Test Your Popup

Yay! Your popup should be all ready to go! Now the only thing left to do is test it! While in the testing phase, if you want the popup to appear with every page refresh (so you can see how it looks after making changes), go to the display settings page and set ‘how to stop showing this popup’ to -1.

How to Add a Popup to Your Site Using PopupAlly

Remember how we originally set it so that when people closed the popup, they weren’t continuously bombarded with it? Well that’s no go for testing, is it? Setting this to -1 will allow the popup to display every time you refresh the page (after the time allotted or on exit). This way you can check and make sure all looks good,

When you’re happy with your popup, don’t forget to go back and change this number back to what is originally was (default is 14). Otherwise, you’ll be annoying your readers!

Tweet11
Pin105
Share2
118 Shares

Reader Interactions

Comments

  1. Céline says

    March 13, 2017 at 1:03 pm

    Thank you so much, I tried for an entire afternoon to embed my mailchimp signup to a popup without paying a premium. Now it works thanks to you!

    Reply
    • Allyssa Barnes says

      March 15, 2017 at 9:09 pm

      So glad this tutorial helped! 🙂

      Reply
  2. Aline - Inspiré & Créé says

    March 24, 2017 at 7:00 am

    I love the exit intent pop-up!
    I will install this plugin now, thanks a lot for this great discovery! <3

    Reply
  3. Sarah says

    March 24, 2017 at 7:08 pm

    Thank you so much! I wasted so much time trying to figure out how to get Mailchimp to popup on my website before finding this. Excellent, clear instructions.

    Reply
    • Allyssa Barnes says

      March 24, 2017 at 11:48 pm

      You’re welcome! Glad you found it helpful!

      Reply
  4. Jodi Lundt says

    April 8, 2017 at 4:20 am

    Hi Allyssa
    I am really having trouble with these pop ups. I have tried embedding the code directly from mailchimp into the header and footer plugin and I have tried with popupally. Nothing seems to be working. Is it possible that there is some other setting that is blocking the pop ups? I use Fluida as my theme. Any help would be greatly appreciated.
    Thanks,
    Jodi

    Reply
    • Allyssa Barnes says

      April 13, 2017 at 7:53 pm

      When you’re using Popupally, are you using the Mailchimp popup code? Because with Popupally, you’d just need the standard embed code. If you’ve used the standard embed code and it’s still not working it could be a plugin. I would try disabling all other plugins to see if the popup works. If it does, then re-activate the plugins one by one to see which one causes it to stop working. Then you’ll have found your problem.

      Reply
  5. Lauren says

    April 10, 2017 at 2:09 am

    Hi Allyssa! I found this article after working on this all night and was thrilled! However, when I am putting the Introduction text in, it’s saying its an “invalid html code. Please make sure all open tags have the corresponding close tag.”
    That’s weird to me! Any insight on this?

    Reply
    • Allyssa Barnes says

      April 13, 2017 at 8:03 pm

      I can’t say that I’ve ever ran into this problem. I would try re-copying and pasting the html code. That’s the only thing I can really think of.

      Reply
  6. Jas says

    June 20, 2017 at 2:18 am

    So helpful! I have a WP theme that I really like but does not play nicely with the Mailchimp popup code–it broke my header images 🙁
    This was an elegant solution and really easy to implement, thanks in no small part to your instructions! The end form is not quite as personalized as the one I designed in MailChimp, but honestly, it gets the job done and has LOTS of options to bring the colors in line with the sight design. Thank you.

    Reply
    • Allyssa Barnes says

      June 20, 2017 at 4:15 pm

      You’re welcome! Glad you found this tutorial helpful! 🙂

      Reply
  7. Sarah says

    June 23, 2017 at 5:57 pm

    Thanks so much for this tutorial! I tried the MailChimp way and couldn’t get it to work, but now I have a pop-up and it only took a few minutes to get it working 🙂

    Reply
  8. Natalie | Mama: Doing It All says

    December 1, 2017 at 10:17 am

    I spent 2 hours trying to find a way to put a popup for Mailchimp on my site, and failed miserably. Until I found this! Took me 15 minutes to figure it out. Thanks so much! Very helpful!

    Reply
  9. Stephane says

    December 28, 2017 at 3:28 pm

    Hi, I have installed your plugin and it works fine on my website when I test it on the desktop, but when I try on my mobile, the popup doesn’t appear. I’ve tried both on Google Chrome and on Safari with an iPhone 6.

    Is there a fix to this?

    Reply
    • Allyssa Barnes says

      January 2, 2018 at 1:38 pm

      Is it an exit intent popup? Those might not work on mobile as there’s no cursor to determine when someone is going to exit. If that’s not it, there could be another plugin interfering.

      Reply
      • Stephane says

        January 4, 2018 at 3:56 pm

        Thank you very much for this info! I had checked off both Exit-intent and Time-delayed. I just unchecked Exit-intent and it works perfectly.

        You have an excellent plugin!

        Regards,

        Stephane

        Reply
  10. Mariana Fernández says

    February 11, 2018 at 1:48 pm

    How is it possible to create a pop up but that only displays to the viewer if they click into a certain button; like yours when you click on the “get the free checklist”
    Hope you can help me out

    Reply
    • Allyssa Barnes says

      February 16, 2018 at 9:49 am

      You’d need a plugin with a click triggered popup. I’m using Bloom by Elegant Themes. You just have to set the popup as a click triggered popup and set a name for it. Then when you create a link/button, you have to add that name to the class. Here’s more specific instructions: https://www.elegantthemes.com/blog/divi-resources/how-to-make-the-bloom-opt-in-form-pop-up-when-clicking-a-button

      Reply

Leave a Reply Cancel reply

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

Primary Sidebar

How to Add a Popup to Your Site Using PopupAlly

Looking for Something?

This site is powered by:

Footer

  • Getting Started
  • Tutorials
  • Tools & Resources
  • Website Strategy
  • All Tips & Tutorials
  • About
  • Subscribe
  • Get Help
  • Contact

© 2021 Italicized Creative LLC. Privacy Policy. Terms of Use.