Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Make the Mailchimp Subscriber popup appear on click
<!-- This is the HTML element that, when clicked, will cause the popup to appear. -->
<button id="open-popup">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";
};
document.getElementById("open-popup").onclick = function() {showMailingPopUp()};
</script>
@scottmagdalein

This comment has been minimized.

Copy link
Owner Author

commented Aug 21, 2015

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.

@MunizFo

This comment has been minimized.

Copy link

commented Jan 4, 2016

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

@konpa

This comment has been minimized.

Copy link

commented Jan 19, 2016

Thanks, it was helpful :)

@MunizFo

This comment has been minimized.

Copy link

commented Jan 20, 2016

Konpa, did you manage to make it work?

@underdown

This comment has been minimized.

@txizzle

This comment has been minimized.

Copy link

commented Jan 23, 2016

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

@underdown

This comment has been minimized.

Copy link

commented Jan 25, 2016

that fixed the 404, thanks

@MunizFo

This comment has been minimized.

Copy link

commented Jan 28, 2016

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

@thaaveragedev

This comment has been minimized.

Copy link

commented Feb 18, 2016

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

@andrewzarick

This comment has been minimized.

Copy link

commented Mar 15, 2016

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.

@Christian-Dharma

This comment has been minimized.

Copy link

commented Mar 23, 2016

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.

@RealDavidoff

This comment has been minimized.

Copy link

commented Apr 16, 2016

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?

@clarkbaker

This comment has been minimized.

Copy link

commented May 13, 2016

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

@sarahavenir

This comment has been minimized.

Copy link

commented May 27, 2016

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?

@tseplik

This comment has been minimized.

Copy link

commented Jun 3, 2016

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

@quarrazzella

This comment has been minimized.

Copy link

commented Jun 5, 2016

@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

@nevosegal

This comment has been minimized.

Copy link

commented Jun 29, 2016

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

@persiprime

This comment has been minimized.

Copy link

commented Jul 1, 2016

🙏

@mlangone

This comment has been minimized.

Copy link

commented Jul 11, 2016

Thanks this is working great on a wordpress site!

@Camilmesfioui

This comment has been minimized.

Copy link

commented Jul 22, 2016

@sarahjbray and @nevosegal Same as you guys.

Any solution ?

@Camilmesfioui

This comment has been minimized.

Copy link

commented Jul 22, 2016

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

@DeRo77

This comment has been minimized.

Copy link

commented Jul 27, 2016

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.

@makenaw

This comment has been minimized.

Copy link

commented Aug 12, 2016

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

@viva121

This comment has been minimized.

Copy link

commented Aug 15, 2016

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

Please help.

@JarLowrey

This comment has been minimized.

Copy link

commented Dec 30, 2016

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

This comment has been minimized.

Copy link

commented Dec 30, 2016

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

@JCLaHoot

This comment has been minimized.

Copy link

commented Jan 3, 2017

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

This comment has been minimized.

Copy link

commented Jan 3, 2017

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

@JCLaHoot

This comment has been minimized.

Copy link

commented Jan 3, 2017

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

@JCLaHoot

This comment has been minimized.

Copy link

commented Jan 3, 2017

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

@Timkablog

This comment has been minimized.

Copy link

commented Jan 5, 2017

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

@centralxcrunner

This comment has been minimized.

Copy link

commented Jan 9, 2017

@JCLaHoot

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

image

@xChrisPx

This comment has been minimized.

Copy link

commented Jan 18, 2017

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.

@crmichael

This comment has been minimized.

Copy link

commented Jan 24, 2017

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.

@crmichael

This comment has been minimized.

Copy link

commented Jan 24, 2017

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.

@marcowright

This comment has been minimized.

Copy link

commented Jan 29, 2017

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

@adrapper

This comment has been minimized.

Copy link

commented Feb 20, 2017

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

Andrew

@viva121

This comment has been minimized.

Copy link

commented Mar 21, 2017

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?

@jonchurch

This comment has been minimized.

Copy link

commented May 20, 2017

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

@Jimmaki

This comment has been minimized.

Copy link

commented Jul 16, 2017

@quarrazzella still sets a cookie

@miracle2k

This comment has been minimized.

Copy link

commented Jul 23, 2017

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

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

@pork-chop

This comment has been minimized.

Copy link

commented Jul 26, 2017

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;';

@tonymik

This comment has been minimized.

Copy link

commented Sep 20, 2017

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

@playeren

This comment has been minimized.

Copy link

commented Oct 28, 2017

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

@techieshark

This comment has been minimized.

Copy link

commented Nov 8, 2017

@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

@epagogmbh

This comment has been minimized.

Copy link

commented Nov 23, 2017

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

This comment has been minimized.

Copy link

commented Nov 30, 2017

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

This comment has been minimized.

Copy link

commented Dec 8, 2017

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

@rokama

This comment has been minimized.

Copy link

commented Jan 10, 2018

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!

@bradstr

This comment has been minimized.

Copy link

commented Jan 17, 2018

@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

@kitty808

This comment has been minimized.

Copy link

commented Feb 8, 2018

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

@emilieg

This comment has been minimized.

Copy link

commented Feb 8, 2018

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.

@timir

This comment has been minimized.

Copy link

commented Feb 13, 2018

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.

@aviggiano

This comment has been minimized.

Copy link

commented Feb 17, 2018

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

@Kanana21

This comment has been minimized.

Copy link

commented Feb 22, 2018

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

@systemvoided

This comment has been minimized.

Copy link

commented Mar 27, 2018

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.

@qwertzguy

This comment has been minimized.

Copy link

commented Apr 8, 2018

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";

@pateskinasy

This comment has been minimized.

Copy link

commented Apr 18, 2018

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?

@anniemnz

This comment has been minimized.

Copy link

commented May 8, 2018

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

This comment has been minimized.

Copy link

commented May 8, 2018

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

@samuelbsp

This comment has been minimized.

Copy link

commented May 8, 2018

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

@scottyhuff

This comment has been minimized.

Copy link

commented May 15, 2018

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?

@vietvu-nguyen

This comment has been minimized.

Copy link

commented May 18, 2018

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>

@aaronrobb

This comment has been minimized.

Copy link

commented May 23, 2018

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

Anyone get this working?

@digitalmoksha

This comment has been minimized.

Copy link

commented May 28, 2018

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.

@voodoo6

This comment has been minimized.

Copy link

commented Jun 3, 2018

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

@BrunoBoehm

This comment has been minimized.

Copy link

commented Jun 13, 2018

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

@upperdecker954

This comment has been minimized.

Copy link

commented Jul 10, 2018

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

@swamyg

This comment has been minimized.

Copy link

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

@mvarelam

This comment has been minimized.

Copy link

commented Nov 14, 2018

this worked great for me! thanks for the help!

@agamemnus

This comment has been minimized.

Copy link

commented Jan 22, 2019

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

@myherowp

This comment has been minimized.

Copy link

commented Jan 30, 2019

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

@fourwhitesocks

This comment has been minimized.

Copy link

commented Feb 27, 2019

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

@juju027

This comment has been minimized.

Copy link

commented Mar 22, 2019

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>

@dosapati

This comment has been minimized.

Copy link

commented Mar 28, 2019

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.

@jmorin1

This comment has been minimized.

Copy link

commented Apr 11, 2019

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

@ryanlabelle

This comment has been minimized.

Copy link

commented May 29, 2019

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>

@nickdevyyc

This comment has been minimized.

Copy link

commented Jun 6, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.