Make the Mailchimp Subscriber popup appear on click

clickable-element.html

<!-- This is the HTML element that, when clicked, will cause the popup to appear. -->

<button id="open-popup">Subscribe to our mailing list</button>

mailchimp_popup.js

<script type="text/javascript" src="//s3.amazonaws.com/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.us11.list-manage.com","uuid":"YOUR_UUID_GOES_HERE","lid":"YOUR_LID_GOES_HERE"}) })
    document.cookie = "MCEvilPopupClosed=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
};

document.getElementById("open-popup").onclick = function() {showMailingPopUp()};
</script>

This is a modified version of the script that Mailchimp gives you when you create a Subscriber popup form for collecting emails on your website. Currently, Mailchimp's popup only displays one page load (or with a slight delay depending on your preferences). This snippet will allow you to launch the popup when any element with the #open-popup ID is clicked.

The cookie is set on line 6 to expire the session that Mailchimp attempts to create. This ensures the popup will be able to appear even after the popup is exited.

Hello Scott, I was looking for a solution to load this popup from a link and haven't had any luck for some hours now. I tried your code but I'm not sure where to put the 2 parts. This first script part (about the embed.js) I put in my website header, the function part I tried everywhere. I run my website with wordpress so I tried in header, functions.php (this one crashes the site so I can't even test). Since you wrote the code to work with a button, can you give some directions where each part should be?

Best,

Fernando

Thanks, it was helpful :)

Konpa, did you manage to make it work?

I'm getting a 404 in my console after clicking the button - requesting this url:
http://mc.us11.list-manage.com/subscribe/form-settings?u=[myuserid]&id=[mylistid]&u=[myuserid]&id=[mylistid]&c=dojo_request_script_callbacks.dojo_request_script1

If you are 404'ing, you may need to change the 'us11' in the url to 'us12'. Look at the Mailchimp generated code to see which URL you need to use

that fixed the 404, thanks

Anyone of you would mind to check my question?

I'm not a coder so is a very basic question on where to put the code parts.

best

Hey MunizFo if you want it to work in a normal website (no wordpress) you will do this.

1. Put the first part in the body section of your website (EXAMPLE BELOW)
2. Then you will take the second part of the code and you will make 3 important changes. First. You will need to check what is your "UUID", that will be what appear when you get the code from mailchimp.
   So you will change this "uuid":"YOUR_UUID_GOES_HERE" for your UUID and replace it where it says YOUR_UUID_GOES_HERE and the same for "lid" you will put yours there replace that text ,"YOUR_LID_GOES_HERE" with your lid. (REMEMBER TO CHANGE THE TEXT INSIDE THE PARENTHESIS - DONT DELETE THE PARENTHESIS).
   But you have to be careful because** IT WILL NO RUN ON A LOCAL MACHINE**, you need to test it on A LIVE SERVER otherwise it wont work. And have in mind that it might be mc.us**# 12**.list-manage.com not mc.us**# 11**.list-manage.com.

It will be something like like this.

Subscribe to our mailing list <script type="text/javascript" src="//s3.amazonaws.com/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.us11.list-manage.com","uuid":"ad3626624633","lid":"37845629827345"}) }) document.cookie = "MCEvilPopupClosed=; expires=Thu, 01 Jan 1970 00:00:00 UTC"; }; document.getElementById("open-popup").onclick = function() {showMailingPopUp()}; </script>

This is just an example. Hope it works for you.
Remember IT WILL NOT WORK ON A LOCAL MACHINE, IT NEEDS TO BE RUNING ON A LIVE SERVER TO WORK FINE.

If you cant see the code check this link: https://gist.github.com/anonymous/d831d139d95b18eeffaf

Hi,

I'm getting an error that says "Uncaught TypeError: Cannot set property 'onclick' of null". Any help? I have the script in the body and then defined the ID for an tag.

Thanks Scottmagdalein, this helped quite a bit.

As a side note, I had to delete the cookie entirely to get the popup to continue to function properly. Setting it null or expired didn't work consistently across browsers for me. I just used jquery.cookie.js,, since my site requires jquery already. That code is as follows:
$.removeCookie('MCEvilPopupClosed', { path: '/' });

MunizFo, the cookie issue may be something worth trying.

Does anyone know why the MCEvilPopupClosed cookie just won't get deleted?
For 28 hours now I've been trying ALL advice I could find via Google:

• with path=/
• with domain set
• with host set
• different order
• expires, path etc in small letters
• Expires, Path etc with capital letter
• the whole thing posted everywhere: expires=Thu, 01 Jan 1970 00:00:00 UTC;
• just the bits that actually are in the created cookie: 16 April 2017 12:20:53 (without day. then, without UTC, then with GMT,...) changed to the older date
• then adding a line of Christian-Dharma's jquery above: $.removeCookie('MCEvilPopupClosed', { path: '/' });
• I've tried all above combinations in footer.php just before
• I've tried all above combinations in header.php just after
• and on and on....

No caching plugin working, tried in both firefox and chrome, from different computers and mobile,....

BUT: This damn MCEvilPopupClosed cookie won't go away after mailchimp created it! It has the word "evil" in its name, is that why?
Anyone any idea what else I can try to delete/reset that cookie such that users can close the popup but reopen it the next time?
PLEASE?

@digitaldumbo if you're still looking for help, you can avoid the "Uncaught TypeError: Cannot set property 'onclick' of null" issue by moving the code to the footer, just before the </body> tag.

Also a tip that everyone will probably figure out eventually on their own, but make sure when configuring the popup on the MailChimp site that you set the popup to open "Immediately." Any delay you select will still happen after you click the button.

I'm having trouble...I've put the code on a blog page, and it shows up on each post (so there are several buttons on the page). The button on the first post works great, but the second, third, etc. buttons do not open.

How can I adapt this so it works every time, not just the first time it is clicked?

Hi
Scott, thank you for the function, and
thaaveragedev for the comment!

@RealDavidoff, you need to change the 'document.cookie' line like this:

document.cookie = 'MCEvilPopupClosed=;path=/;expires=Thu, 01 Jan 1970 00:00:00 UTC;';

You can learn more from here (shamless self-link) http://dmitriilin.com/track-pop-up-impressions-in-google-analytics-via-google-tag-manager/#6

@sarahjbray I'm having the same issue, did you manage to solve it eventually?

🙏

Thanks this is working great on a wordpress site!

@sarahjbray and @nevosegal Same as you guys.

Any solution ?

Found if !!!

juste change the document.cookie line by this :

document.cookie = 'MCEvilPopupClosed=;path=/;expires=Thu, 01 Jan 1970 00:00:00 UTC;';

credit :

@quarrazzella ( Thank you a lot dude ).

Hope that going to help

Hi Guys,
I'm trying to get this to work in a joomla 3.6 website.
My goal is to get a module with intro text and a button that lauches the pop-up from mailchimp.

I copied both snippets, changed the id's, and the cookie line, and put them both in one custom code module.
I can see the button, but it doesnt do anything.

If i change the code of the module to the original mailchimp code, the pop up loads as suspected, on every pageload.

Do I have to put the second snippet in an other place? (same question as MunizFo i guess)
Please some help needed.. I'm not a coder, but do know my way around joomla and some basic HTML.

Much appreciated,
Dennis Roos.

EDIT: Figured it out.
Solution for joomla users:

1. Put the script code in a custom module, that loads high in the page (top or modal)
2. put the button in an other custom html module, or in an article.

Works perfectly! Thnx guys for this great snippet.

I have the same question as @MunizFo . What is the proper way to include JS with a wordpress installation?

I tried putting both the scripts in the site header and it didn't work...

Would appreciate detailed instructions for anyone who got this working on a Wordpress site..

Hi,
This code doesn't work for me in IE and Safari.
But works fine in Chrome, FF and Opera.

Please help.

I have gotten it working in Chrome 55, and I added an async defer to make initial page load faster if you want to include these scripts in the head. I had to update the baseUrl, uuid, lid, add click handler after doc load, and used @quarrazzella 's method for clearing the cookie.

My issue is that each time you hit the button, the "require" (I think this is the root cause anyways) in the popup function causes another script line to be appended to the document's head. I don't think it is re-fetching the script, but it does seem to bloat the head a bit. It's not a real issue, but it is curious why it happens.

<script async defer type="text/javascript" src="//s3.amazonaws.com/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":"UPDATE_ME","uuid":"UPDATE_ME","lid":"UPDATE_ME"}) })
    document.cookie = 'MCEvilPopupClosed=;path=/;expires=Thu, 01 Jan 1970 00:00:00 UTC;';
};

document.addEventListener("DOMContentLoaded", function(event) {
  document.getElementById("open-mailchimp-subscribe-popup").onclick = function() {showMailingPopUp()};
});
</script>

Here's where I'm using this, so if I update this working script at all it'll change here - https://github.com/JTronLabs/Portfolio/blob/master/source/partials/_email_subscribe_popup.erb

For people trying to make this work in wordpress, I tweaked it a little bit (it can be placed directly in any post):

<!-- This is the HTML element that, when clicked, will cause the popup to appear. -->

<button id="open-popup" onClick="showMailingPopUp()">Subscribe to our mailing list</button>


<script type="text/javascript" src="//s3.amazonaws.com/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.us11.list-manage.com","uuid":"YOUR_UUID_GOES_HERE","lid":"YOUR_LID_GOES_HERE"}) })
    document.cookie = "MCEvilPopupClosed=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
};
</script>

@JCLaHoot - I'm working on a wordpress.com free site. Do you know where you can insert that code so that it is not just unformatted automatically by wordpress? I have tried adding the script to the code section of the MailChip widget and to a text widget with no success.

@emmaleigh - sites on wordpress.com don't seem to work the same way as ones made from wordpress.org stuff (this was a huge source of confusion for me). I've never used wordpress.com though, so I'm not sure if the feature you need is just hidden somewhere.

-.- I just noticed that Wordpress wipes out my onClick="showMailingPopUp()" whenever I go into the visual editor... It works if I publish directly from the text view though...

Guys, what if I only want to delay the popup? (at least 30 seconds would be cool)
Or to make it show on click, but on a specific area (if you check my blog: timkablog.sk - at the top, below the menu, I offer a free download - I would like the popup to show when that button is clicked, so visitors do not have to be redirected, is it possible?)

@JCLaHoot

I've testing in a wordpress page and nothing happens when i click the button. looking at inspect tab i see:

A little thing I'd like to add to this thread: With the above solution I experienced a long-ish delay on the click. You can actually pre require the library without triggering the pop-up just like this require(["mojo/signup-forms/Loader"]) before the showMailingPopUp declaration. It seems like it will only open, if passed the second function.

Hi,

I am trying to implement the mailchimp popup form for a Wordpress site of mine. This is proving to be difficult as the mailchimp script crashes a few other plugins of mine. I found a code to fix this on github:

`<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: 'b0c26b04265a39ba24824ebbf',
lid: '7546ef513d'
};
// 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>`

This works but is missing the document.cookie so the popup form appears randomly.
I am also trying to have a subscribe button so the popup form appears onclick. I have used @JCLaHoot code and it seems to work on the home page only.

Basically I am having trouble combining these two codes together, issue been

1. Popup form onclick button only works on homepage
2. Popup form appears on homepage every time visited... document.cookie not working or not placed properly.

Heres the two codes:

`<script>
function showMailingPopUp() {
require(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us1.list-manage.com","uuid":"b0c26b04265a39ba24824ebbf","lid":"7546ef513d"}) })
document.cookie = "MCEvilPopupClosed=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
};
</script>

`<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: 'b0c26b04265a39ba24824ebbf',
lid: '7546ef513d'
};

// 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>`

The site is www.weathertex.com.au

Any help will be much appreciated!

---

P.s. Sorry I am having trouble embedding the code in my comment.

Hi,

Since writing above comment the issue is now only when using the code by @JCLaHoot the onclick button only works on the homepage? When the button is clicked, the popup form appears but the close button (X) doesnt work.

Thanks @ thaaveragedev, @ scottmagdalein, and everyone that added to this thread. I was attempting to use this method for a landing page and kept running into a dead end. Fortunately, after using Google, I located the issue. I had to add the following:

onclick ="showMailingPopUp(); return false;"

to my CTA button. After applying the above, everything worked fine. Here is the resource with the answer.

https://amazingandrea.com/blog/2016/5/2/setup-a-mailchimp-popup-to-open-on-button-click

Sorry to be a bit of a thicky, but did we end up with the definitive right code for Wordpress?

Andrew

This code still doesn't work for me in IE and Safari.
But works fine in Chrome, FF and Opera.

What is your experience?
Does anybody have a solution?

It is worth adding that you need to place this at the bottom of your HTML jsut before the </body> tag, or wrap the JS in a window.onload or your button element will not be loaded into the DOM when running, which will give you the following error:

Uncaught TypeError: Cannot read property 'onclick' of null

@quarrazzella still sets a cookie

Seems they changed the cookie name, now needs to be:

document.cookie = 'MCPopupClosed=;path=/;expires=Thu, 01 Jan 1970 00:00:00 UTC;';

I'm seeing an additional cookie after someone subscribes, so I'm also adding:

document.cookie = 'MCPopupSubscribed=;path=/;expires=Thu, 01 Jan 1970 00:00:00 UTC;';

It worked for me, but I had to change the cookie name:

document.cookie = "MCPopupClosed=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
Thank you very much!!!

Sorry If I'm being a total noob, but how are you guys running require() in a browser?

@playeren it looks like the require() is provided by Dojo which Mailchimp is using.

See: http://downloads.mailchimp.com/js/signup-forms/popup/embed.js (it's ugly but search for 'require' and you'll see it is in there)
and: https://dojotoolkit.org/reference-guide/1.7/dojo/require.html

Here is final code after reading all the comments and trying to make it work in a wordpress site.
They changed the embed.js, too and the cookie since the original post. Just put it in right before the tag
Oh, and you need to delete a secound cookie, if you want to have it work after a user signed up. Here is my Code:

<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.us15.list-manage.com","uuid":"4be8a46fa632f97e6755d1f45","lid":"16b255d564"}) }) 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;'; ); </script>

@epagogmbh, actually I found a missing }
The final code is:

<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.us17.list-manage.com","uuid":"905d7168f95c88505c611468f","lid":"eecc578c37"})
    }
  );

  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;';
}
	
showMailingPopUp();
</script> 

Using above code from @riandesign

I'm running into the issue of require.js (like the ones above), but I can't resolve. I keep getting this error in Console:
"Uncaught ReferenceError: require is not defined at showMailingPopUp (string) at HTMLInputElement. (string)"

The last code works (posted on 30 Nov 2017).

But I still can't close the pop-up clicking on the outside (the "black zone") or the "X" close button, like the mailchimp original one does.

Anyone knows why?

Thanks!

@riandesign
That causes the popup to appear both on website load and on button click. Added:
document.getElementById("open-popup").onclick = function() {showMailingPopUp()};
Now it only loads on button click.

Also, reminder for everyone to double check the number on "mc.us16.list-manage.com". You may have a different one.

Final JS code: Add this code to "footer.php"

<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.us16.list-manage.com","uuid":"YOUR_UUID","lid":"YOUR_LID"})
    }
  );

  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>

HTML Button Code
<button id="open-popup" onclick ="showMailingPopUp(); return false;">Subscribe to our mailing list</button>

Note: This worked on wordpress

@bradstr Thanks! This works. :)

I placed the button near middle of the page but when it's clicked, the popup opens but jumps up to the top of the page. Does anyone know how to prevent that from happening?

MailChimp might change the name of the cookie so I what I did was grab all the cookies from the document.cookies, split on (;), and iterate to either find one that has "MC" in its name and clear the expiration on that or if you don't have any other cookies set on the site, expire them all.

I am attempting to use two buttons with different id's to open the same pop-up
Since Id's need to be unique I added two functions

`<script>
function showMailingPopUp() {
require(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us17.list-manage.com","uuid":"b02b49ae2925864c9f5e152a$
// document.cookie = "MCEvilPopupClosed=;path=/; expires=Thu, 01 Jan 1970 00:00:00 UTC";
document.removeCookie('MCPopupClosed', { path: '/' });
};
document.getElementById("open-popup").onclick = function() {showMailingPopUp()};

</script>`

and

`<script>
function showMailingPopUp() {
require(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us17.list-manage.com","uuid":"b02b49ae2925864c9f5e152a$
// document.cookie = "MCEvilPopupClosed=;path=/; expires=Thu, 01 Jan 1970 00:00:00 UTC";
document.removeCookie('MCPopupClosed', { path: '/' });
};

document.getElementById("open-popup-cta").onclick = function() {showMailingPopUp()};
</script>'
This allows me to open the pop-up on a page using either of the two buttons.

Is there a better solution to this , since I wish to have multiple buttons placed on important areas of the website.

Thank you for this gist.
It's incredible how Mailchimp doesn't have a tutorial explaining how to do exactly this on their website.

@bradstr Thank you for the change.

In my case the pop-up still appears when the page loads. Is there anyone else with the same behaviour?
Note, I've added it in a basic html page and put the script just before the body tag.

Got this working, however the I can click the button to call the pop-up over and over and a pop-up keeps popping up. On mobile this does not seem to be an issue but on desktop this creates an issue and the buttons do not seem to work if multiple instances of the pop-up have been called.

is there a way to either make the button calling the pop-up not functional while the pop-up is still active. or to change the button to a "close the pop-up" button after click.

The cookie got renamed and also the cookie is always on the root path, not the current one. So this is the updated line for the cookie:

document.cookie = "MCPopupClosed=; path=/; expires=Thu, 01 Jan 1970 00:00:00 UTC";

Did anyone manage to make it work on a Jekyll powered site (Github Pages)?
Implemented code from @riandesign, but that leads to pop-up loading at every load and 'button' click.
implemented code from @bradstr, below. But that leads to nothing. No pop-up comes up.
document.getElementById("open-popup").onclick = function() {showMailingPopUp()};
Any pointers?

Hi I am trying to make this work on an exit pop-up - has anybody had any success? I am using html files etc in cPanel - it is not on a CMS at all. I have the following loaded but now no pop up happens at all. I was a pop up that would happen as soon as the mouse left the page but then the pop up does not show for another one year I was told by Mailchimp - how ridiculous!!!

If anybody can help I would be so grateful.

<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.us18.list-manage.com","uuid":"75b4ad1e7f7b837e44f3b56e6","lid":"21ecaa1192"}) })
        document.cookie = "MCPopupClosed=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
        };
        document.getElementById("open-popup").mouseleave = function() {showMailingPopUp()};
    </script>

can anyone tell me, why the PopUp only works one time and then i have to remove the cookie to make it work again?
Thank you very much!!!

Same problem here... The cookie is not resetting anymore.. Was working fine before.

I'm having a strange thing happen. When I add the code to my footer.php, the file won't update/save. If I remove the line

document.cookie = 'MCPopupClosed=;path=/;expires=Thu, 01 Jan 1970 00:00:00 UTC;';

It saves. What's the deal? I tried the

document.cookie = "MCPopupClosed=; expires=Thu, 01 Jan 1970 00:00:00 UTC";

version as well. No joy. Any thoughts?

I got this error

Uncaught SyntaxError: Invalid or unexpected token ((index):471)
Uncaught ReferenceError: showMailingPopUp is not defined
    at HTMLButtonElement.onclick ((index):140)

<script type="text/javascript">
     function showMailingPopUp() {
        require(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us18.list-manage.com","uuid":"71a6480d15fcd1aaf3eb4f342","lid":"6bf7daa6c7"}) });

        document.cookie = “MCPopupClosed=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/”;   (index line 471)
      };

<button id="open-popup" class="btn btn-primary" onclick="showMailingPopUp(); return false;">Subcribe</button>

I'm getting the Invalid error, same as above.
I'm guessing Mailchimp's code has changed?

Anyone get this working?

I just got this working, using this:

<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">
  function showMailingPopUp() {
    require(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"MY_BASE_URL","uuid":"MY_UUID","lid":"MY_ID"})})
    document.cookie = "MCPopupClosed=; expires=Thu, 01 Jan 1970 00:00:00 UTC";                  
    document.cookie = "MCPopupSubscribed=; expires=Thu, 01 Jan 1970 00:00:00 UTC";                  
  };

  $(function() {
    $(".open-popup").on('click', function() { 
      showMailingPopUp();
    });
  });
</script>

and

      <div class="d-flex justify-content-center">
        <button class="open-popup btn btn-primary">Subscribe to our mailing list</button>
      </div>

Make sure your popup signup form is set to display "Immediately". And I had to actually leave the Mailchimp popup form screen in order for it to be properly published - just using the "Publish" button didn't seem to be enough.

@digitalmoksha – that works great for me, thanks for posting.

On mobile, a second 'subscribe' message appears by default. Mailchimp say:

"To comply with mobile best practices, we’ll default to a banner when your form is viewed on a mobile device. Visitors can tap the banner button to access your form. [Show mobile banner]"

This means when we click our button to open the subscribe form, on mobile, another banner appears from the top with another 'subscribe' button that needs clicking to open the subscribe form. Anybody know a way to bypass or disable this second mobile popup message?

Just as an add-on to @scottmagdalein awesome work, here is a discussion you might find interesting for using this popup in conjunction with conflicting jQuery scripts (wordpress plugins for instance). It loads Mailchimp's script after the window has fully loaded (≠ from DOM loaded since the window also contains scripts).
Code and details available here : GIST based on the work from @nickcernis

I have the same issue as voodoo6. This does not work for mobile devices. Is there any way to bypass the mobile banner?

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

this worked great for me! thanks for the help!

They changed the cookie. It's now MCPopupClosed=yes;expires=Wed, 22 Jan 2020 00:11:31 GMT;path=/.

To remove it, you must do:
document.cookie = "MCPopupClosed=;expires=Thu, 01 Jan 1970 00:00:01 GMT;path=/"

For future reference, I found this out by modifying the document.cookie setter to output the string that was being set:

void function () {
 var desc = Object.getOwnPropertyDescriptor(Document.prototype, 'cookie');
 var setOriginal = desc.set, getOriginal = desc.get
 Object.defineProperty(document, "cookie", {
  get: function () {return getOriginal.apply(document)},
  set: function () {console.log(Array.from(arguments)); return getOriginal.apply(document, arguments)},
  configurable: true
 })
}()

Another more robust solution might be to modify the cookie setter to block all cookies from being added when the popup is displayed (and saving the original getter/setter at the initial load to prevent mailChimp from shenanigans like overriding it themselves.)

It would be phenomenal if someone could create a Wordpress plugin for this - for the no so code savvy- but interest persons 👍

Has this been figured out yet for wordpress? Should the script be enqueued instead of put in the footer? I have added every set of code on this page and the button still does nothing :( Has anyone figured out even a plugin for this to work??

Hello There, itried the code but nothing happened when i click on the button. I tried to replace the cookie line.

I just want to call my mailchimp popup from a basic html page. Could someone can help me please.

Here my javascript file:

`<script type="text/javascript" src="//s3.amazonaws.com/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({"aseUrl":"mc.us20.list-manage.com","uuid":"891ee23677206c2791f545fa9","lid":"969ee6cb4b","uniqueMethods":true}) }) document.cookie = "MCPopupClosed=yes;expires=Wed, 22 Jan 2020 00:11:31 GMT;"; }; document.getElementById("open-popup").onclick = function() {showMailingPopUp()}; </script>`

Here my HTML page:

<button id=”open-popup” type="submit" class="btn btn-common btn-search">Ok go !</button>

Hello There, itried the code but nothing happened when i click on the button. I tried to replace the cookie line.

I just want to call my mailchimp popup from a basic html page. Could someone can help me please.

Here my javascript file:

`<script type="text/javascript" src="//s3.amazonaws.com/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({"aseUrl":"mc.us20.list-manage.com","uuid":"891ee23677206c2791f545fa9","lid":"969ee6cb4b","uniqueMethods":true}) }) document.cookie = "MCPopupClosed=yes;expires=Wed, 22 Jan 2020 00:11:31 GMT;"; }; document.getElementById("open-popup").onclick = function() {showMailingPopUp()}; </script>`

Here my HTML page:

<button id=”open-popup” type="submit" class="btn btn-common btn-search">Ok go !</button>

You need to check ur mailchimp widget settings as "Open Immediately", otherwise it won't work.

I cannot get this to work. Don't know how many times I can cut and paste with same result. Nothing happens when I click on my Subscribe button.

MailChimp outputs this:

<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.us17.list-manage.com","uuid":"my-uuid","lid":"my-lid","uniqueMethods":true}) })</script>

fwiw, this works automatically, but I want it to to work on-click obviously.

I'm modifying as such:
Putting this in the head

<script type="text/javascript" src="//s3.amazonaws.com/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.us11.list-manage.com","uuid":"my-uuid","lid":"my-lid"}) })
    document.cookie = "MCEvilPopupClosed=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
};

document.getElementById("open-popup").onclick = function() {showMailingPopUp()};
</script>

putting this in the body

<button id="open-popup">Subscribe to our mailing list</button>

I've tried changing the baseUrl to match, changing the embed.js source to match. I've tried putting it in just a blank html file to see if something was interfering.

Seems so simple, but I can't get it working.

Thanks

Awesome! Thank you. I've updated the original code.

• Cookie was renamed (Causing the button only to work once)
• Generated code from MailChimp was slightly different from the original example.
• I added a prefix to the function name and button ID to make it unique for my my needs. (themoShowMailingPopUp and themo-get-notified)
• Don't forget to replace [my-uuid] and [my-lid] with the values autogenerated from MailChimps form creator in your account.

<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">
    function themoShowMailingPopUp() {
        window.dojoRequire(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us20.list-manage.com","uuid":"my-uuid","lid":"my-lid","uniqueMethods":true}) })
        document.cookie = "MCPopupClosed=; path=/; expires=Thu, 01 Jan 1970 00:00:00 UTC";
    };

    document.getElementById("themo-get-notified").onclick = function() {console.log('test');themoShowMailingPopUp()};
</script>

<button id="themo-get-notified">Subscribe to our mailing list</button>

Awesome! Thank you. I've updated the original code.

• Cookie was renamed (Causing the button only to work once)
• Generated code from MailChimp was slightly different from the original example.
• I added a prefix to the function name and button ID to make it unique for my my needs. (themoShowMailingPopUp and themo-get-notified)
• Don't forget to replace [my-uuid] and [my-lid] with the values autogenerated from MailChimps form creator in your account.

<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">
    function themoShowMailingPopUp() {
        window.dojoRequire(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us20.list-manage.com","uuid":"my-uuid","lid":"my-lid","uniqueMethods":true}) })
        document.cookie = "MCPopupClosed=; path=/; expires=Thu, 01 Jan 1970 00:00:00 UTC";
    };

    document.getElementById("themo-get-notified").onclick = function() {console.log('test');themoShowMailingPopUp()};
</script>

<button id="themo-get-notified">Subscribe to our mailing list</button>

This example doesn't appear to work after replacing the MailChimp Ids and adding the scripts to the <head>.

If anyone is still using this, it might be helpful to know that you should delete 2 cookies to get the popup to show on click:

document.cookie = “MCPopupClosed=; expires=Thu, 01 Jan 1970 00:00:00 UTC”;
document.cookie = “MCPopupSubscribed=; expires=Thu, 01 Jan 1970 00:00:00 UTC”;

They're defined in _hasCookies in popup.js.

Also - I put this before window.dojoRequire.

To combine several posts above here is the showMailingPopUp function which worked for me
(with mailchimp via ShopSync on Shopify, to trigger popup via button):

  function showMailingPopUp() {
           //  If your mailchimp popup tried loading automatically, but had a cookie and did not show
           //  If not done, close button would not work (sorry for jQuery)  -- basically removes previous popups
    $('[id^="PopupSignupForm"]').remove(); 	
           // clear 2 cookies on the root path
    document.cookie =     "MCPopupClosed=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";
    document.cookie = "MCPopupSubscribed=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";

   dojoRequire(         // using uniq methods, some older code may work with simple require
      ["mojo/signup-forms/Loader"], 
      function(L) { 
        L.start( {
          "baseUrl":"XXXX.usXX.list-manage.com",
          "uuid":"YOUR_USERID",
          "lid":"YOUR_FORM_ID",
          "uniqueMethods": true      // force using uniq methods inside, otherwise will complain about "require/define not defined"
        }); 
      });
  };

@tairli, I am also getting same issue, I want to know from where you got uuid and lid?

You can check here I ask question on stack overflow.
https://stackoverflow.com/questions/59424600/how-to-display-the-mailchimp-subscribe-popup-form-on-click

can you help me out with this?

@Naren-hybreeder
mailchimp produces embeddable HTML code which includes something similar to:

<form action="https://uXXXXX.usXX.list-manage.com/subscribe/post?u=0f6d154d46c829d7990000000&amp;id=0d65b50000" method="post">

parameter U is UUID (which is 0f6d154d46c829d7990000000 in the example above) and ID is the form id (which is 0d65b50000 in the example).
If you can see the popup, then it will have this form line as well.
Not sure if there are other ways to find it out.

@tairli,

I am not getting the form code in Mailchimp.
Below code I got from Mailchimp.

<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/bd7ed5583d8f567d56a2ed5ec/0becf03e96fc476acaa075a1a.js");</script>

I have below code but it's not working

<li class="cp-menuNewsletter menu-item menu-item-type-custom menu-item-object-custom menu-item-16"><a href="#">Newsletter</a></li>

<script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/signup-forms/popup/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script>
<script>
function showMailingPopUp() {
	//alert("hello");
    require(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us20.list-manage.com","uuid":"bd7ed5583d8f567d56a2ed5ec","lid":"007366445e","uniqueMethods":true})})
    document.cookie = "MCEvilPopupClosed=; expires=Thu, 01 Jan 1970 00:00:00 UTC";                  
};
$(function() {
    $(".cp-menuNewsletter a").on('click', function() { 
        showMailingPopUp();
    });
});
</script>

Did anyone get this to work?