How to Create A Mailchimp Popup on Click

Mailchimp has some basic popup functionality built into its software. But, you’ll need to make use of a third-party tool if you want your popup to appear when someone clicks a button or link.

This post shows you how to create a Mailchimp popup on click using ConvertFlow’s popup builder and Mailchimp integration. We’ll cover:

• Customizing the design of your popup
• How to set the trigger to be “on click”
• Pushing the lead data to your Mailchimp account
• Adding the popup button or link to your website

Step 1: Choose a template

The best place to start is by choosing a design template that aligns with the desired outcome or end-goal of your product.

ConvertFlow has a wide range of customizable popup templates for all kinds of needs—newsletter signup, cart abandonment, cross-sell, coupon code, webinar registration, demo request, and more. Browse our template library to see them all.

For this article, we’ll use a simple lead magnet popup:

Choose the best one for your needs and select the “Use This Template” button. Then, create a free ConvertFlow account (or login if you already have one) to start editing.

Step 2: Customize your template

Once inside ConvertFlow, you’ll see a few options for the CTA Type you want to create from the chosen template.

We’re just going to do a regular overlay popup, so select that and give your CTA a name. You’ll then be taken straight to the drag-and-drop builder.

This is where you can start customizing the design of your popup.

We’ll change the headline text to make it a bit more enticing:

And let’s also imagine that our business has a cool black and sharp pink brand color palette. We’ll switch up the panel and button color and also add a better image:

Next, scroll down in the builder to reach Step 2 of your popup.

Make sure all the coloring and styles align with any changes made to your first step. Then, add your download link to the button (if applicable):

Note: You can add multiple steps to your popups from inside the builder, but we’ll just keep it at two for the sake of this guide.

Step 3: Set trigger to popup on click

Next, we need to choose a trigger for how/when our popup will display.

Head to the “Settings” tab in the side panel and scroll down to the “Popup Trigger” section.  As we’re designing a Mailchimp popup on click, we’ll simply select the “Upon click only” option as the “Trigger Type”:

Make a note of the “Custom Click Trigger Class.” We’ll use this later when setting up our button or link that shows the popup.

Step 4: Connect your popup to Mailchimp

We’ve designed our popup to look the way we want. Now it’s time to hook it up to your Mailchimp account so lead data gets passed over.

While still in the ConvertFlow builder, scroll back up to the initial step with your form field(s). Then click on your form’s submit button and choose “Confirmation Actions” in the side panel:

A modal window should now appear on your screen.

At the top of the window, select the “New Integration +” button to start connecting your CRM or ESP (in this case, Mailchimp):

Note: If you’ve already connected an integration to ConvertFlow previously, you’ll instead see a button that says “Manage Integrations.”

In the next window, find Mailchimp from the list of options and click the “Connect” button. Login to your Mailchimp account and follow the steps to verify the integration with ConvertFlow.

Step 5: Push data to Mailchimp

Now that Mailchimp is connected to ConvertFlow, we can set up an automation to pipe the data from any form submissions into your Mailchimp account.

You should be brought straight back to the “Confirmation Actions” window after authenticating the Mailchimp integration. From here, ensure that your default action sends visitors submitting the form to the “thank you” step displaying the coupon code.

In our case, it’s “Step 2” we need:

Then, click “Add Automation” underneath and scroll to the Mailchimp options.

You can choose to run whichever automation(s) you like. We’ll simply add form submissions as contacts in a Mailchimp list:

Click “Done” once you’ve set up all desired automations, then “Save” and “Publish” your CTA and we’re almost ready to launch!

Step 6: Set your Mailchimp popup on click targeting

Hit “Preview” in the top right of the builder to move to the next screen, where you can check the look and functionality of your popup. If it all looks good, select “Launch” to go through to the final step:

Here, we can add a range of targeting conditions to ensure your popup gets seen by the right website visitors.

There’s not much we need to add here as it’s an on click popup we’re creating.

However, it’s a good idea to set the popup to only be active on the page(s) your on click button or link will appear on. Otherwise, you'll be needlessly loading script (and adding to load times) across your entire website.

We only need our on click popup on a blog post, so we’ll set that post’s URL as a targeting condition:

You can always add URLs afterward if you decide to use the button on any other pages in the future.

Note: Those on a paid ConvertFlow account can experiment with advanced targeting conditions on all popups and CTAs—like geo-location, CRM data, past site activity, and more. Try this out for free with a 14-day trial of ConvertFlow Pro.

Step 7: Activate the popup

On the same launch screen, simply toggle the switch to activate your popup:

If you’ve already installed ConvertFlow’s one-time script on your website, your popup should now be ready to show upon click on relevant pages. If not, you’ll be prompted to add this script to your site first.

Alternatively, you can connect without needing to touch the code at all via WordPress plugin, Shopify app, Google Tag Manager, or Segment. Instructions are all there as soon as you toggle that launch button the first time 🙌

Step 8: Add the button to your website

Your popup is now ready to go. All you need to do now is add the actual button or link to the desired page on your website.

(Remember: this needs to be the same page(s) you’ve set in your targeting conditions in Step 6 of this guide.)

There’s a couple of different options for doing this:

1. Design a button in ConvertFlow to add to your site
2. Add your popup’s trigger class to a button or link of your own

1. Design a button in ConvertFlow

To do this, we’ll just need to create another call-to-action in ConvertFlow (separate to your popup). This time we’ll use an embedded form.

Here’s a simple button template you can use:

Note: You can also add text, headlines, images, etc. before the button, if you prefer. Check out more of our embedded templates here.

Once you’ve created the button CTA in ConvertFlow, you’ll again be taken to the builder.

Customize the look and feel in whatever way you want. Then, click on your button and open the “Confirmation Actions” settings from the side panel again.

In the modal window that opens, set the “Default Action Type” to “Display a CTA” and then choose the popup created earlier in this guide:

Hit “Save” and “Publish,” then click through to the final “Launch” screen.

Here, we’ll want to set the targeting conditions to be the page(s) used for our earlier popup and then toggle the activate button:

Finally, just copy the embed code and paste it wherever you want the button to appear on your website. Once everything is published and active, you should now have a button that fires off the Mailchimp popup on click we created earlier 🙌

2. Add the trigger class to your own button or link

If you don’t want to use a ConvertFlow CTA for the button part of your Mailchimp popup on click, you can just add the trigger class to any link on your site.

This works for text hyperlinks, custom buttons you’ve created, and just about any link—as long as the website has ConvertFlow’s script installed.

Just copy the “Custom Click Trigger Class” we mentioned earlier:

And apply it to whatever button or text link you like on your website. So your link HTML should look something like this:

Note: the above is an idea of what the raw HTML will look like with the class applied. How you go about applying this class to a hyperlink will differ depending on your CMS/website builder.

The popup will show as long as:

• Your website has ConvertFlow’s script installed
• The page matches the targeting conditions set on your popup’s launch screen

You can also use this method to display a ConvertFlow popup, even if the primary trigger type isn’t set to “Upon click only.” For example, you could have a time delay or exit-intent popup that also gets triggered when someone clicks a link with the class applied 😎

Launch your Mailchimp popup on click today

This guide should have given you clear instructions on how to create a Mailchimp popup on click and the button or link that triggers it.

Mailchimp itself has the functionality for marketers to create basic popups. However, if you want more advanced targeting and trigger options (like on click popups), then you’ll need the more capable solution of a third-party software that integrates with Mailchimp.

If you’re in that latter category, ConvertFlow could be what you’re looking for. Start by creating a free account and see for yourself today.