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:

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, MailerLite, 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 3.

How to Get Your MailerLite Embed Code

Login to MailerLite and click on Webforms. Find the form you want to use and click on edit.

Sidenote: Yes, there’s an embed form button, but that doesn’t provide us with the HTML code we need. So click edit instead.

Now click save (yes, even if you didn’t make any changes to the form). You’ll be taken to a page with an embed code. Again, this isn’t the correct code, so you’ll need to click the Show HTML link.

A popup will appear with the HTML embed code. Copy it and continue onto step 3.

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 3.

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!

Want to learn more ways to integrate MailChimp with WordPress? I’m launching a course that’ll teach you just that! Click here to get notified when it launches.

How to Add a Popup to Your Site Using PopupAlly was originally posted on Allyssa Barnes.