How to Add a Mailchimp Popup to Your WordPress Site

August 30, 2016

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

How to Add a Mailchimp Popup to Your WordPress Site

Sidenote: It appears many people are having difficulty with the Mailchimp popup. If the below tutorial doesn’t work for you, or if you want more control over your popup, try this tutorial instead.

Did you know Mailchimp has a feature that allows you to add an email signup popup to your site? If you use Mailchimp and are looking for something simple and easy to setup, without having to install a plugin, using their popup is a good solution.

In this tutorial, I’ll go over how to setup your Mailchimp popup and more importantly, show you how to add it to your site.

1. Customize Your Mailchimp Popup

First things first, you’re going to have to setup your Mailchimp popup. To do this, login to your Mailchimp account, click on your list, then signup forms, followed by subscriber popup.

On the page there are 4 tabs: design, fields, content, and settings.

Design – where you’ll customize the look of your popup.

Fields – select which fields are displayed.

Content – add text to your popup.

Settings – set the popup delay and maximum width.

Go ahead and customize your popup to your liking. To see how the popup will look (as an actual popup), click on the popup preview button located in the top right corner of the window.

mailchimp-popup-1

2. Get Popup Code

When your popup is customized and ready to go, it’s time to grab the code which you’ll add to your site in order to get the popup to display. Click on the view code button in the bottom right corner of the window. Copy the code, then click on publish (underneath the view code button) to save your popup.

mailchimp-popup-2

3. Add Popup Code to Your Site

With the code in hand, you’re almost there! You just have to add the code to your site. To add the code to your site, it has to be added to the <head> section of your theme.

Now depending on your theme and your comfort level with code, you have 3 options:

1. If you’re using a Genesis theme, you can paste the code to the header scripts box located under Genesis > Theme Settings.

mailchimp-popup-genesis

2. If you’re not using Genesis and are comfortable editing your theme files, you’ll want to find your header.php file and search for the <head> section. Paste the code before </head>. But a heads up, updating your theme will cause this customization to disappear. So unless you’re using a child theme, use caution. Oh, and be extra careful when pasting your code. If you accidentally delete any existing code or paste your code in the wrong area, you’ll get the dreaded white screen of death.

mailchimp-popup-header

3. And if code just isn’t your thing, you can download the Insert Headers and Footers plugin. After installing and activating, go to Settings > Insert Headers and Footers. Then just paste the code into the scripts in header box.

mailchimp-popup-plugin

Want a more detailed explanation of these three methods? Check out this post on how to insert code into the head section of your WordPress blog.

Just a heads up, you only need to use one of these methods. Don’t use all three!

Once you’ve added the code to your site, head over to the front end of your site and check it out. You should now have a functioning popup!

Need some development help?

99 thoughts on “How to Add a Mailchimp Popup to Your WordPress Site”

  1. Thank you for the instructions! I use Genesis so figured this would be easy to add. However, when I add the custom code the Genesis header, nothing happens. No popup. Do you have any tips to get the popup to work? Thank you!

    1. Hi Jennifer. Have you tried another browser / cleared your history? The Mailchimp popup works based on cookies, so if it was viewed and dismissed even once, it won’t show up again until the cookies are cleared. So I would go ahead and try that. If it’s still not showing up, it sounds to me like your site is blocking the jQuery required to display it. It’s tough to know what could be blocking it as it could be any of your plugins.

      1. Oh my goodness, thank you Alyssa. I’ve been trying and wondering for hours why the pop-up wasn’t showing up. I did your instructions and tried another browser.

        Much appreciated!

    1. Hi Rebecca. I just went to your site and the popup worked for me. If it’s still not showing up on your end, try clearing your browser’s cache/history. That might work.

      As for it clashing with your Instagram feed, unfortunately some plugins just aren’t compatible. If that’s the case, you’ll have to choose one or the other.

  2. Hi Allyssa,
    Thanks. Your explanation is the simple. I manage to install a plugin to insert my mailchimp pop up code. It appear but unfortunately the popup form is forever there even click on close button or filled up the form.

    I wonder you have any idea what happen to it. Many thanks!

    1. Hi May. It sounds like something might be interfering with the popup code. Maybe a plugin? It’s hard to know for sure, but I would assume that’s what it is. You can deactivate all your plugins and see if the popup is able to close. If so, then it’s definitely a plugin. Then you can one by one reactivate them until the problem appears, then you’ll know exactly what plugin is causing the problem.

  3. Hi Alyssa.. Thank you so much for explaining this. I followed your instructions for the 3rd option. However, I don’t see a pop up when I go to the front end of my site. I also tried clearing my enitre history, to no avail. I wonder if you would be able to help. My website is http://www.flavrlifestyle.com
    Thank you in advance!

    1. Hi Cheryl. I’m going to guess that a plugin is interfering with it, causing it to not display. You can do one of two things. First, deactivate all plugins one at a time and see if the popup displays. If it does, then the last plugin deactivated was the culprit. If you don’t need it, then just delete and you’ll have a working popup. Note that deactivating plugins can cause your site to become a mess, but should go back to normal when re-activated, just a heads up.

      The second option is to use a popup plugin instead of the Mailchimp popup code. I recommend PopupAlly. That should work and allow the popup to display.

  4. Hi everyone, I tried using the Headers and Footers plugin – and it actually didn’t work when I pasted the codes into the Header section, instead I pasted the code onto the “Scripts in Footer” section, and it worked immediately, on my desktop, iPad and phones. Hope it will help!

    My website is: http://www.overonecupoftea.net

      1. This page is so helpful I could just cry! Thank you! Thank you! Thank you! I also placed the code into the footers section after it didn’t work out in headers and it worked perfectly. I am so happy that I found this site!!!

  5. Hi Alyssa!
    I tried implementing the code first with the suggested plugin and then just in the Editor but both times, my slider went away and I had to scroll down all the way to start seeing my blog posts. Any guesses as to what I’m doing wrong?

    Thanks!

  6. Thank you Allyssa for such good info. I am using a Piemont WP theme and after I put the code using the plugin then the popup do not shows up and slider stops working (shows only text but no images).
    Would you give me some suggestions please?

    1. Sounds like a plugin conflict. Sometimes this will happen. You’ll most likely have to find another popup plugin. I’m not aware of any other decent free plugins, but 3 premium options are Thrive Leads, Optinmonster, and Bloom by Elegant Themes.

  7. Have you noticed a conflict with woocommerce and mailchimp popups?

    I don’t seem to be able to display unless I deactivate the woocommerce plugin.

  8. Hi Allyssa,

    Thank you for a clear and concise how to on pasting in the actual MailChimp pop up code. Exactly what I was looking for! And I looked everywhere.

  9. Hey Alyssa,

    Thanks for this article. Very user friendly. I love your site!

    I can’t seem to find any information online on what I’m about to ask you…

    Is there a way to attach a pdf download for people who sign up through this pop up box? I have an embedded sign up opt-in bar on my sidebar that offers a free pdf, but I can’t figure out how to do the same with a pop-up.

    Do you have an article on this somewhere?

    Thanks,

    Lucy

    1. Hi Lucy. I don’t have an article on this (but thanks for the idea!). The method for delivering the pdf should be the same regardless of where people sign up (sidebar or popup). I don’t know how you have it setup on your sidebar, but I think the best method would be to setup an automation in Mailchimp. You can upload the pdf to your media library or to Dropbox. Then in the email that gets sent out, you can link to the pdf.

  10. Hi Allyssa,

    I was having the same issue with setting up a MailChimp pop up on my WordPress site using Genesis (Author Pro Theme) as one of your readers and it was making me crazy.

    For me the following worked:

    1. Built my form in the subscriber pop up section of the MailChimp site.
    2. Copied the code
    3. My theme has a specific MailChimp Subscriber Popup Widget available for use as part of Jetpack (A plugin pre-bundled with my Theme).
    4. I dragged the Popup Widget from the list of available Widgets into an empty slot (Under Appearance>Widgets) and then I enter the code I previously copied.
    5. I cleared the browser cache on a different browser, checked the site and everything ran fine.
    NOTE: You may have to play around with where you drag this Widget. I used the Footer 3 slot for my Theme because using the other Front Page locations resulted in my content not loading.

    I hope this helps. Integrating things into WordPress is sometimes more art than science.

  11. Thanks. Worked for me. i installed the WP plugin you recommended. Tried for hours. For those that don’t get it to work. Don’t forget to clear your cookies and browser history. I used Firefox and it works great everytime.

    Cheer.

  12. I seem to not be able to load my website now. “White Screen Of Death” maybe? It is just a white screen now πŸ™
    I added the code from MailChimp into the Header.php and followed your instructions exactly. I’ve removed the code now and it’s still just a white screen.
    I really don’t know what to do, I didn’t back up unfortunately as I didn’t think it would be necessary. Please help!!!

    1. You’ll have to go into your theme files via your host’s file manager or FTP. Find the header.php file (which should be in wp-content > themes > your theme) and delete the code you added. Then save the file back and it should hopefully work.

  13. Hi Alyssa,
    I followed your instructions and used the plugin to add to my code.

    I have a few questions. As I tweak the pop-up design with the Mailchimp Editor, do I need to recopy the code, or do the updates happen inherently when I hit publish in Mailchimp?

    Thanks,
    Kathryn

  14. Thank you so much for this article! I thought I was going to need another plug-in…but the tip about where to paste the code with a Genesis theme was on point! Thanks!
    -Kristin

  15. Hello Alyssa, and thank you for your tutorial. I use an Astrid child theme and tried all I found (your instructions included) to insert a MailChimp pop-up modal on my site, but nothing works. I cleared cookies and cache, I also tried different browsers, but no result. I really don’t know what else to do. Do you have any clue to this? Thanks a lot!

  16. Thanks for this! You are fabulous! I have spent days trying to work this out… Installed the plugin and wolla!

    Thank you

  17. I’m going to do option 3 using the insert headers and footers option BUT I’m wondering if I hit save and it messes things up is there a way to UNDO? or if I don’t end up liking it? just nervous to hit “save” haha.

    1. The good thing about the plugin is that it’s more isolated, so there’s less of a chance for you to mess it up. Unless it somehow breaks, you’ll be able to go in and just delete the code. Then save it and it’ll be back to normal.

      1. Thanks…worked for me with Virtue Premium theme … however the pop-up confirmation (that we included a money savings coupon code) comes up and disappears before anyone can read it. Any suggestions for making this stay visible longer?

        Thanks!
        deb

        1. Unfortunately, I don’t have any suggestions. But I would send the code in an email since people will definitely get access to it that way vs a popup which can disappear a little too easily.

  18. Hello Alyssa,

    This is an interesting piece. The only challenge I have with Matching pop up form is that it tries to cover the entire blog interface when on mobile device.

    I think I will rather try Sumo form.

    Emenike

  19. Hi! Thanks for this tutorial, very helpful. However, I already have my Google Analytics script in the header section. Can I add the pop-up code in the header as well? If yes, where – before or after the Google Analytics script?
    Thanks!

  20. Thanks so much for this Alyssa it worked for me after about an hour of trying other ways, yours worked within minutes.
    THANK YOU also for the warning about posting the script straight to your site’s theme, I would die if I got the white screen of death!!!
    I’m self taught.

  21. Hello,
    I have tried the Plug-In method using the ‘Insert Headers and Footers’ plug-in by WPBeginner but the pop-up is still not showing on my website. What can do next to overcome this?

    1. You likely have to use a different method. Your theme or another plugin is likely interfering with the popup. Try the PopupAlly plugin. It’ll allow you to add a popup to your site easily. There’s a tutorial linked at the top of this post.

  22. Hi Alyssa, I can’t thank you enough for this explanation! It was so clear and easy to follow. I’m not very technical and usually when I try and follow stuff on the internet they always assume you know where to put stuff….this was fab!! Well done, I don’t normally email people but wanted you to know how much I appreciate this, many thanks again, hopefully people will start seeing my website Joan

    1. Hi Joan. Thanks so much! I definitely know what you mean. I’m always looking up tutorials and people always assume you know the basics. That’s why I try to boil everything down and make it as simple as possible. I’m glad you found this tutorial helpful!

  23. I like MailChimp, but not their popup forms. Quite frankly I think they suck. If you’re looking for aesthetics, SqueezyPeasy is pretty awesome. Lets you build any popup form (lightbox, slide-in, ribbon, etc.) you like and integrates with Mailchimp seamlessly. https://squeezypeasy.com

    1. Hi,
      Do you know if it is possible to exclude the pop-up from specific pages. I have some pages where I do not want the pop-up to show up, but I do not know how to exclude them?
      Also it would be nice if you could add a little something in the end of an URL that prevents the pop-up from popping up πŸ™‚

      Br. Mie

  24. Is there a way to make the popup show only when a button is pressed on one of the pages before the visitor is sent to the next page and to make the email submit mandatory? Basically, I’m trying to offer a video for the email and don’t want the video available without the email submit.

    1. I tried everything and still….crickets! But THANK YOU BILL!! Look for Bill’s instructions in May 2017. Essentially, you need to use the plugin/widget that comes with Jetpack. It worked like a charm.

    2. Hi Thomas. I’m sure there is a way, but it would involve setting up a complex solution. Maybe using a plugin like Popup Maker and setting the trigger to be when a button is submitted? But a better solution would be to add the video link to a welcome email in Mailchimp. That way they only gain access after they’ve submitted their email.

  25. I used #3 and like other plug ins I have tried this with, it messes with my theme. It’s been really frustrating. Any header and footer plug ins have caused this. It’s the carousel for my recent posts that looks all funky when I try and put the code in.

  26. Hi Allyssa, I recently inserted the pop-up code into my WordPress site, header.php file of course. The pop-up appears correctly, but it shows only a white box. What do you think about that? Thanks.

  27. Hello Allyssa,

    Thank you for this post Allyssa, it’s mega helpful. However, I would like to know: is it possible to have my pop-up form appear on only one page on my website and not on any other page?

    1. If you use a plugin, such as PopupAlly, you can configure it to appear on certain pages. There’s a link to a tutorial I wrote on PopupAlly at the top of this post.

  28. Woohoo! You’re like the tenth site I came to and I finally got it. Thanks so much! Next on my list is customizing pop-ups for every blog post. Is that something you cover? Thank you!!!

  29. Hi allyssa,

    Thanks so much for this post. helped a lot. the pop up is now working on my desktop but it is not appear on mobile devices – i’ve cleared my cookies but still so luck?

  30. OMG! I spent all day on this – literally hours! Your tutorial was the most simple thing ever and so easily explained. Esp the fact that if you see it once it won’t pop up again because that was mind boggling to me! Thank you!

  31. Thank you so much for this tutorial! I am not computer savvy and I have spent hours trying to do what your tutorial showed me how to do it in seconds! Wish I found it sooner! Life saver

  32. thank you! this is the ONLY post I found easily describing exactly where to add code for the Mailchimp popup on my blog. Very straight forward and easy to follow directions.

  33. Thank you for this. I think the best method remains the header/footer plugin for WP. I used it previously and it worked. Though looked too basic for my liking. I had to remove it and started using pop ally plugin. That worked but comes with a lot of limitations. I am still searching for best method to do this mailchimp popup thing on WP. Quite annoying it is not going smoothly. I guess for a smooth integration, one need to pay for the integration service offered by Mailchimp. I dont really know. Anyways, for those of you who care about the importance of video in today’s internet business, you may check out this article: https://sparkmediax.com/best-video-marketing-guide/

Leave a Comment

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