Skip to content

Instantly share code, notes, and snippets.

@nickcernis
Last active July 28, 2022 14:49
Show Gist options
  • Save nickcernis/3df74c0c6c18b75cb951 to your computer and use it in GitHub Desktop.
Save nickcernis/3df74c0c6c18b75cb951 to your computer and use it in GitHub Desktop.
MailChimp Popup Script that works with WordPress sites

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.

@IncreaseoBot
Copy link

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!

@IncreaseoBot
Copy link

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

@georgehee
Copy link

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!!!!

@buggles333
Copy link

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

@gmmedia - Did you manage to find a solution?

@nadiaaamand
Copy link

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 :)

@swamyg
Copy link

swamyg commented Oct 14, 2018

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

@milli04
Copy link

milli04 commented Feb 15, 2019

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

@chadchester220
Copy link

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

@axdlilli
Copy link

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?

@kimitrii
Copy link

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?

@khoipro
Copy link

khoipro commented Feb 8, 2020

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>

@khoipro
Copy link

khoipro commented Feb 8, 2020

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

@clausbv
Copy link

clausbv commented Feb 10, 2020

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?

@khoipro
Copy link

khoipro commented Apr 6, 2020

Install plugin: Insert Headers and Footers

Add it to before body ending.

@gaborpeter
Copy link

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

@mauirinho
Copy link

mauirinho commented Jun 16, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment