Skip to content

Instantly share code, notes, and snippets.

@scottmagdalein
Last active March 15, 2023 18:01
Show Gist options
  • Star 70 You must be signed in to star a gist
  • Fork 8 You must be signed in to fork a gist
  • Save scottmagdalein/259d878ad46ed6f2cdce to your computer and use it in GitHub Desktop.
Save scottmagdalein/259d878ad46ed6f2cdce to your computer and use it in GitHub Desktop.
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>
@dosapati
Copy link

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
Copy link

jmorin1 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
Copy link

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

@nickhiebertdev
Copy link

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

@gwhitelaw
Copy link

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.

@tairli
Copy link

tairli commented Dec 9, 2019

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

@Naren-hybreeder
Copy link

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

@tairli
Copy link

tairli commented Jan 4, 2020

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

@Naren-hybreeder
Copy link

Naren-hybreeder commented Jan 4, 2020

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

@GammaRay42
Copy link

Did anyone get this to work?

@ryanlabelle
Copy link

Hey y'all. I'm still using my original code and it appears to be working well.

If you need a link to a working example, let me know. I'll send a private DM

@GammaRay42
Copy link

GammaRay42 commented Jan 25, 2020 via email

@Naren-hybreeder
Copy link

@ryanlabelle ,

Can you share your code with me?

Can you check my code as well? I tried my code I am not getting the popup after clicking on button.

@ryanlabelle
Copy link

My original code is in this tread already.

https://gist.github.com/scottmagdalein/259d878ad46ed6f2cdce#gistcomment-2929907

Sorry, I can't check your code. I wish had more time to help out.

@Naren-hybreeder
Copy link

I tried the same code but it's not working. I don't know where is the issue. I tried to display the alert on the click, It is displaying but popup not displaying.

@ryanlabelle
Copy link

Sorry, I wish I could help. Perhaps someone in this thread has a solution?

@heitoralthmann
Copy link

heitoralthmann commented Feb 12, 2020

I can confirm this is working for me as of the date of this comment:

<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.openMailchimpPopup = function() {
    window.dojoRequire(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"YOUR_SERVER_BASE_URL","uuid":"YOUR_UUID","lid":"YOUR_LIST_ID","uniqueMethods":true}) })
    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>
<a class="mailchimp-subscription-block__button" onclick="openMailchimpPopup()">SUBSCRIBE</a>

I found the secret behind this to be searching for mailchimp cookies (usually MC something) on the Developer Console and setting them appropriately.

@dseeker
Copy link

dseeker commented Feb 13, 2020

@heitoralthmann solution works here

@ilium007
Copy link

Copy and pasted code from @heitoralthmann but still can't get the JS file

Loading failed for the <script> with source “file:///js/signup-forms/popup/unique-methods/embed.js”.

@heitoralthmann
Copy link

heitoralthmann commented Mar 26, 2020

@ilium007 I believe you should be loading embed.js from the cloud at //downloads.mailchimp.com/js/signup-forms/popup/unique-methods/embed.js and not from your local machine/server (file:///js/signup-forms/popup/unique-methods/embed.js).

Double check the src attribute for the <script> where you're loading Mailchimp's embed.js.

@kibblewhite
Copy link

kibblewhite commented Apr 2, 2020

Could I also add to the list of code suggestions? I've been trying with a bit of code that works both on WordPress and stand alone pages and I seem to have successfully integrated it with a timer of sorts. So a user visits the page, it waits for a fixed duration of time (3s in this case) displays the form and then if the user cancels but then decides that they do want to subscribe, I have added a button for them to get that form back. If they click the 'subscribe-toggle' button so the form appears, but then refreshes/revisit the page the form should re-appear automatically again after 3 seconds. Notes: Script requires jQuery, won't work from local computer file system, needs to be hosted on a web service.

<a id="subscribe-toggle" class="button">Subscribe</a>

<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( $ ) {
		function openMailchimpPopup() {
			window.dojoRequire( ["mojo/signup-forms/Loader"], function(L) { L.start( { "baseUrl": "YOUR_SERVER_BASE_URL" , "uuid": "YOUR_UUID" , "lid": "YOUR_LIST_ID" , "uniqueMethods": true } ) } );
		}
		$(function() {
			$( window ).load(function() { setTimeout( openMailchimpPopup, 3000 ); } );
			$( 'a#subscribe-toggle', document ).on( 'click', function( e ) {
				$( '[id^=PopupSignupForm_]', document ).remove();
				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;';
				openMailchimpPopup();
			} );
		} );
	} )( jQuery );
</script>

@kkozma-liquid
Copy link

@heitoralthmann Thank you for that! Mailchimp needs add an event listener soon!

@em1991
Copy link

em1991 commented Apr 6, 2020

@heitoralthmann
Where can you find the developer options on mailchimp?
I've had tried adding this code to my wordpress site, however it still appears once.

`<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.us10.list-manage.com","uuid":"","lid":"","uniqueMethods":true}) }) 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>`

@Lukexample
Copy link

Lukexample commented Apr 22, 2020

Hi there!
I need some help with this common MailChimp issue.
@heitoralthmann
I used the same code as you but now the popup doesn't even appear once.

Here the code I used:

<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.openMailchimpPopup = function() {
    window.dojoRequire(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.u...","uuid":"92ce1...","lid":"6afc...","uniqueMethods":true}) })
    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>

Does someone have the solution to this problem?
Thx!

@omar93102
Copy link

omar93102 commented May 14, 2020

This code really saved me! It does exactly what I wanted.
I got a problem, when I double click the function the pop up get fixed and I can't close it up. Does anyone knows how to solve this problem? I put the function inside an <a><img/></a> element.

@genunlimited
Copy link

I'm confused as to where you all are getting the popup form code in mail chimp? My mail chimp just asks if I want it turned on and to connect the site and does not deliver the code. Where would I find that?

@irugoy
Copy link

irugoy commented Jul 3, 2020

I'm confused as to where you all are getting the popup form code in mail chimp? My mail chimp just asks if I want it turned on and to connect the site and does not deliver the code. Where would I find that?

Hi there, as far as I've experienced recently in one of our projects, this "window.dojoRequire" option is not longer possible since 16 June 2020 and it just throws an error and conflicts with some other JS code :( .

Has anyone had same issue?

@graz68a
Copy link

graz68a commented Mar 15, 2023

Hi

I am using this test page in my site

<html>
<head>
<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( $ ) {
		function openMailchimpPopup() {
			window.dojoRequire( ["mojo/signup-forms/Loader"], function(L) { L.start( { "baseUrl":"gomoot.us17.list-manage.com","uuid":"my_uuid","lid":"my_id","uniqueMethods":true } ) } );
		}
		$(function() {
			$( window ).load(function() { setTimeout( openMailchimpPopup, 3000 ); } );
			$( 'a#subscribe-toggle', document ).on( 'click', function( e ) {
				$( '[id^=PopupSignupForm_]', document ).remove();
				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;';
				openMailchimpPopup();
			} );
		} );
	} )( jQuery );
</script>
</head>
<body>
<button id="themo-get-notified">Subscribe to our mailing list</button>
</body>
</html>

but it does not work, of course I replaced uuid with my uuid and lid with my id .

thank you

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