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>

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.

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.

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

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.

@heitoralthmann solution works here

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

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

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>

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

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

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!

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.

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?

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?

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