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:
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:
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.
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.
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.
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.
Copy the code provided and continue onto step 4.
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.
Copy the code provided and move onto step 4.
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.
In the first text box, paste the embed code from your email provider.
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.
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!
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!
So glad this tutorial helped! 🙂
I love the exit intent pop-up!
I will install this plugin now, thanks a lot for this great discovery! <3
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.
You’re welcome! Glad you found it helpful!
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
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.
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?
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.
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.
You’re welcome! Glad you found this tutorial helpful! 🙂
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 🙂
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!
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?
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.
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
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
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