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.

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