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.

@gmmedia
Copy link

gmmedia commented Jun 13, 2018

Hello,
I use the Mailchimp ecomerce connection which comes with the same problems. This code also includes the popup.

The code looks like that.
<script id="mcjs">!function(c,h,i,m,p){m=c.createElement(h),p=c.getElementsByTagName(h)[0],m.async=1,m.src=i,p.parentNode.insertBefore(m,p)}(document,"script","https://chimpstatic.com/mcjs-connected/js/users/exxxxxxxxxxxxxxxe/exxxxxxxxxxxxxxxxxxxxxxxxc.js");</script>

Is there also a workaround for this script?

thanks
Jochen

@ollytek
Copy link

ollytek commented Jun 19, 2018

Hi,
Is there a way to add a placeholder to the popup form instead of the label above the input box?
I will like to remove the label and replace with placeholder instead

@frontenddevguy
Copy link

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

@mikeGski
Copy link

mikeGski commented Jun 23, 2018

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.

@williamyun7
Copy link

williamyun7 commented Jun 28, 2018

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

@jerrysarcastic
Copy link

This worked great for me. Props!

@mradulovic988
Copy link

Man, thank you so much! You saved me

@agoedrich
Copy link

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?
screen shot 2018-07-12 at 11 21 56 am

@studiosally
Copy link

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

@LiangRenDev
Copy link

LiangRenDev commented Jul 18, 2018

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?

@lanastasov
Copy link

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

@ApoGouv
Copy link

ApoGouv commented Jul 26, 2018

Finally it is working! Thanks @nickcernis and @BrunoBoehm

@IncreaseoBot
Copy link

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

@tunners
Copy link

tunners commented Aug 9, 2018

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.

@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