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>

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?

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

thanks. hi. I paid the 49 dollars/year and got it working. Still having a bit of time with getting everything ELEMENTOR to work with mailchimp. but thanks.

On Jan 24, 2020, at 9:06 AM, Ryan Labelle ***@***.***> wrote: 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 — You are receiving this because you commented. Reply to this email directly, view it on GitHub <https://gist.github.com/259d878ad46ed6f2cdce?email_source=notifications&email_token=AK6ZT2JH7HUW3PPNW2DO6L3Q7MNY3A5CNFSM4HQROL2KYY3PNVWWK3TUL52HS4DFVNDWS43UINXW23LFNZ2KUY3PNVWWK3TUL5UWJTQAGANS6#gistcomment-3152687>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AK6ZT2IE2TT7LIH33MU5DU3Q7MNY3ANCNFSM4HQROL2A>.

Ray Mikota 541.261.8850 mikotadesigngroup.com

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

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?