MailChimp Popup Script that works with WordPress sites

mailchimp-popup-for-wordpress.md

MailChimp's default popup scripts can break on WordPress sites that use jQuery/jQuery UI unless you include their embed code as the final elements before the closing body tag.

Including them in this way isn't always possible or easy with WordPress.

The code below is an alternative implementation of the loader that forces MailChimp's popup scripts to appear below all other scripts upon page load.

To use it, modify the baseUrl, uuid, and lid attributes with the ones from the original popup script that MailChimp supplies.

<script>
    // Fill in your MailChimp popup settings below.
    // These can be found in the original popup script from MailChimp.
    var mailchimpConfig = {
        baseUrl: 'mc.us1.list-manage.com',
        uuid: 'a123456789abcdefghijklmno',
        lid: '1abc12345a'
    };
    
    // No edits below this line are required
    var chimpPopupLoader = document.createElement("script");
    chimpPopupLoader.src = '//s3.amazonaws.com/downloads.mailchimp.com/js/signup-forms/popup/embed.js';
    chimpPopupLoader.setAttribute('data-dojo-config', 'usePlainJson: true, isDebug: false');

    var chimpPopup = document.createElement("script");
    chimpPopup.appendChild(document.createTextNode('require(["mojo/signup-forms/Loader"], function (L) { L.start({"baseUrl": "' +  mailchimpConfig.baseUrl + '", "uuid": "' + mailchimpConfig.uuid + '", "lid": "' + mailchimpConfig.lid + '"})});'));

    jQuery(function ($) {
        document.body.appendChild(chimpPopupLoader);

        $(window).load(function () {
            document.body.appendChild(chimpPopup);
        });

    });
</script>

Note that MailChimp stores a cookie for one year to prevent you from seeing a pop-up repeatedly after you've closed it or filled it in. If you're testing this you may need to clear cookies, use a different browser, or open a private browser window to see the form on repeat visits after dismissing or filling it.

Code provided under the ISC license.

Thanks, the original code wasn't working for me either.
This works a treat!

If I put the code on my site... and it works... well, kind of. Say the page is fairly long (ie. goes below the "fold" and you need to scroll down)... the screen will "lock up" until I attempt to exit page... ie. the page wont allow me to scroll any more until I move the mouse towards the exit button on the page, let the pop up come up and then exit the pop up. Once I do that, then I can scroll on the page again. I have the mail chimp pop up settings in mailchimp set to on exit.

@marcomarsala Thank you for your tip!

I experienced slow loading of embed.js with Amazon link but replacing it with //downloads.mailchimp.com/js/signup-forms/popup/embed.js , it takes less time to load the script!

This worked great for me. Props!

Man, thank you so much! You saved me

Thanks for the script - it works great EXCEPT for... the popup window is glued to the header menu. It does not pop up in the middle of the page. I added the script to my child theme footer.php. I also tried the header and body as well with the same results. Any ideas?

Really thankful for your code and solution!! that helps me a lot :)

Hi, @nickcernis, Thanks so much for the code, save me a lot of time. Only one question, why it conflicts if not placing on the very bottom of the page? I guess when executing require() function of mailchimp script, it will replace some global variable Jquery or Jquery UI used. Is that close to the right answer?

How do you translate the pop up in another language? My site supports two languages and the pop up is displayed in one.

Finally it is working! Thanks @nickcernis and @BrunoBoehm

I'm having troubles with this script - getting a 404 error in the console. Can someone please identify where I've gone wrong?
Thanks!

Original code from MailChimp:

<script type="text/javascript" src="//downloads.mailchimp.com/js/signup-forms/popup/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script><script type="text/javascript">require(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us18.list-manage.com","uuid":"9eadeb17f89d31e84b9d05ac3","lid":"1abc12345a"}) })</script>

Code not working:

<script>
    // Fill in your MailChimp popup settings below.
    // These can be found in the original popup script from MailChimp.
    var mailchimpConfig = {
        baseUrl: 'mc.us18.list-manage.com',
        uuid: '9eadeb17f89d31e84b9d05ac3',
        lid: '1abc12345a'
    };
    
 // No edits below this line are required
    var chimpPopupLoader = document.createElement("script");
    chimpPopupLoader.src = '//downloads.mailchimp.com/js/signup-forms/popup/embed.js';
    chimpPopupLoader.setAttribute('data-dojo-config', 'usePlainJson: true, isDebug: false');

    var chimpPopup = document.createElement("script");
    chimpPopup.appendChild(document.createTextNode('require(["mojo/signup-forms/Loader"], function (L) { L.start({"baseUrl": "' +  mailchimpConfig.baseUrl + '", "uuid": "' + mailchimpConfig.uuid + '", "lid": "' + mailchimpConfig.lid + '"})});'));

    jQuery(function ($) {
        document.body.appendChild(chimpPopupLoader);

        $(window).load(function () {
            document.body.appendChild(chimpPopup);
        });

    });
</script>

Output URL with broken link:
https://mc.us18.list-manage.com/subscribe/form-settings?u=9eadeb17f89d31e84b9d05ac3&id=1abc12345a&u=9eadeb17f89d31e84b9d05ac3&id=1abc12345a&c=dojo_request_script_callbacks.dojo_request_script0

This almost fixes the modal popup for me, except it's increasing the margins on the site before it pops up (adding a horizontal scroll) which return to normal when dimissed. I'm probably just going to post a link to the mailchimp sign up page unless i can get it sorted.

Hi @nickcernis, could you please have a really brief look at the above code and let me know if you see any errors I've made. Any help would be much appreciated!

This has been resolved - copied footer.php to child theme and put original embed code just before closing body tag. All working properly now!

great, works perfect! took me a whole day to find a correct solution on the web. you are the only one with a working solution. many thx!!!!

I am experiecning the same issue as @gmmedia as I use the connected site feature

@gmmedia - Did you manage to find a solution?

This is brilliant. I do want to just put it out there how important it is to empty your cookies!

Been sitting for over an hour figuring out why this code doesn't work. Turns out it was my cookies..

Thanks for the fix :)

For anyone getting a require is not defined error, try this instead:

window.dojoRequire(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"YOUR_BASE_URL","uuid":"YOUR_UUID","lid":"THE_LIST_ID","uniqueMethods":true}) })

The difference here is using window.dojoRequire

If anyone can help me on this it would be massively appreciated as I have come to a dead end. I have created a pop up in mailchimp and embedded to several different places on my site. they all work to the point where the pop up appears as it should, however when you fill in your details it always comes back with "there are errors below" the code I am using is

<script type="text/javascript" src="//downloads.mailchimp.com/js/signup-forms/popup/unique-methods/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script><script type="text/javascript">window.dojoRequire(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us12.list-manage.com","uuid":"1d4d24324773cb9de762ecf75","lid":"ee9591d795","uniqueMethods":true}) })</script>

I have tried embedding it to the home page, my header and footer all with the same result.

my site is https://jm-fit.com

Just tried this hack with my Wordpress (OceanWP theme, Elementor), and in MailChimp it seems they changed their script, so doesn't work.

If anyone can help me on this it would be massively appreciated as I have come to a dead end. I have created a pop up in mailchimp and embedded to several different places on my site. they all work to the point where the pop up appears as it should, however when you fill in your details it always comes back with "there are errors below" the code I am using is

<script type="text/javascript" src="//downloads.mailchimp.com/js/signup-forms/popup/unique-methods/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script><script type="text/javascript">window.dojoRequire(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us12.list-manage.com","uuid":"1d4d24324773cb9de762ecf75","lid":"ee9591d795","uniqueMethods":true}) })</script>

I have tried embedding it to the home page, my header and footer all with the same result.

my site is https://jm-fit.com

Hi @milli04, did you solve your issue yet? I've been having the same issue and nothing seems to help! Would appreciate tips on how to solve it?

Can someone help me to fix a problem? I tried to implement this code at my Tumblr but something isn't work, look the code:

<html>
<head>
    
    <script type="text/javascript" src="//downloads.mailchimp.com/js/signup-forms/popup/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script>
<script>
function showMailingPopUp() {
  require(
    ["mojo/signup-forms/Loader"],
    function(L) {
      L.start({"baseUrl":"mc.us13.list-manage.com","uuid":"c8c472d7e369a7ed57444fbfb","lid":"b34aa88d1b"})
    }
  );

  document.cookie = 'MCPopupClosed=;path=/;expires=Thu, 01 Jan 1970 00:00:00 UTC;';
  document.cookie = 'MCPopupSubscribed=;path=/;expires=Thu, 01 Jan 1970 00:00:00 UTC;';
}
	
document.getElementById("open-popup").onclick = function() {showMailingPopUp()};
</script>


</head>

<body>
    <a onclick="showMailingPopUp(); return false;" id="open-popup" style="cursor:pointer">Subscribe!</a>
    
      <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  
  <!-- this script make the popup don't work -- ><script src="https://static.tumblr.com/xlsgtjb/mt5o305mz/scripts.min.js" charset="UTF-8"></script>

</body></html>

If I delete this script that make the popup don't work, the popup work, but the tumblr theme don't work at mobile. How can I fix it?

I placed a working code that works with any element that has class "open-subscribe".

<script>
      var mailchimpConfig = {
        baseUrl: 'mc.us100.list-manage.com',
        uuid: '__ca8d95c76d42a97b85f292ebf__',
        lid: '__8a953a7a64__'
      };
    var chimpPopupLoader = document.createElement("script");
    chimpPopupLoader.src = '//s3.amazonaws.com/downloads.mailchimp.com/js/signup-forms/popup/embed.js';
    chimpPopupLoader.setAttribute('data-dojo-config', 'usePlainJson: true, isDebug: false');

    function showMailingPopUp() {
        require(["mojo/signup-forms/Loader"], function(L) { L.start(mailchimpConfig) })
        document.cookie = 'MCPopupClosed=;path=/;expires=Thu, 01 Jan 1970 00:00:00 UTC;';
        document.cookie = 'MCPopupSubscribed=;path=/;expires=Thu, 01 Jan 1970 00:00:00 UTC;';
    };

        
    jQuery(window).on("load", function() {
        document.body.appendChild(chimpPopupLoader);
        jQuery(".open-subscribe").click(function () { showMailingPopUp() });
    });
</script>

Have any other suggestion to disable popup when the page loaded? It was noisy and I wish to open a popup when I want.

I placed a working code that works with any element that has class "open-subscribe".

<script>
      var mailchimpConfig = {
        baseUrl: 'mc.us100.list-manage.com',
        uuid: '__ca8d95c76d42a97b85f292ebf__',
        lid: '__8a953a7a64__'
      };
    var chimpPopupLoader = document.createElement("script");
    chimpPopupLoader.src = '//s3.amazonaws.com/downloads.mailchimp.com/js/signup-forms/popup/embed.js';
    chimpPopupLoader.setAttribute('data-dojo-config', 'usePlainJson: true, isDebug: false');

    function showMailingPopUp() {
        require(["mojo/signup-forms/Loader"], function(L) { L.start(mailchimpConfig) })
        document.cookie = 'MCPopupClosed=;path=/;expires=Thu, 01 Jan 1970 00:00:00 UTC;';
        document.cookie = 'MCPopupSubscribed=;path=/;expires=Thu, 01 Jan 1970 00:00:00 UTC;';
    };

        
    jQuery(window).on("load", function() {
        document.body.appendChild(chimpPopupLoader);
        jQuery(".open-subscribe").click(function () { showMailingPopUp() });
    });
</script>

Where do I need to add this code in order to work?

Install plugin: Insert Headers and Footers

Add it to before body ending.

This was the only solution that worked on Drupal also.
Thanks, well done

Hi everybody,
i have a problem with my prestashop 1.7.6.4 and mailchimp popup.
i have installed module v2.0.5 di Mailchimp.
Today i have this error, i don't know why today yes and yesterday no. The site has never changed in 1 month.
I put this code in header for manage popup mailchimp form subscribe to show it only where and when i want. This is the code:

window.dojoRequire(["mojo/signup-forms/Loader"], function(L) { L.start({
"baseUrl":"mc.us15.list-manage.com",
"uuid":"xxxxxxxxxxxxxxx",
"lid":"yyyyyyyyyyy",
"uniqueMethods":true})
});

but i receive always this error on Chrome's console:
Uncaught TypeError: window.dojoRequire is not a function

can someone help me?

please...

thank's in advance

maui