scottmagdalein/clickable-element.html

fourwhitesocks · 2019-02-27T16:47:13Z

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 · 2019-03-22T16:53:48Z

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>

Here my HTML page:

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

dosapati · 2019-03-28T09:42:40Z

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 · 2019-04-11T20:13:59Z

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 · 2019-05-29T19:14:50Z

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 · 2019-06-06T15:58:46Z

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 · 2019-11-14T17:51:52Z

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 · 2019-12-09T16:25:46Z

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 · 2020-01-02T15:20:15Z

@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 · 2020-01-04T09:37:45Z

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

<form action="https://uXXXXX.usXX.list-manage.com/subscribe/post?u=0f6d154d46c829d7990000000&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 · 2020-01-04T09:47:06Z

@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 · 2020-01-24T15:08:13Z

Did anyone get this to work?

ryanlabelle · 2020-01-24T17:06:21Z

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 · 2020-01-25T17:36:50Z

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

Naren-hybreeder · 2020-01-26T16:56:54Z

@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 · 2020-01-27T18:59:25Z

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 · 2020-01-28T06:11:12Z

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 · 2020-01-29T19:01:24Z

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

heitoralthmann · 2020-02-12T16:58:30Z

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 · 2020-02-13T23:02:47Z

@heitoralthmann solution works here

ilium007 · 2020-03-26T12:30:46Z

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 · 2020-03-26T18:09:38Z

@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 · 2020-04-02T13:23:17Z

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 · 2020-04-02T16:53:30Z

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

em1991 · 2020-04-06T19:48:19Z

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

Lukexample · 2020-04-22T20:43:09Z

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 · 2020-05-14T22:23:51Z

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 · 2020-07-01T18:33:26Z

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 · 2020-07-03T16:51:03Z

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 · 2023-03-15T18:01:00Z

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

scottmagdalein/clickable-element.html

fourwhitesocks commented Feb 27, 2019

juju027 commented Mar 22, 2019

dosapati commented Mar 28, 2019

jmorin1 commented Apr 11, 2019

ryanlabelle commented May 29, 2019 •

edited

Loading

nickhiebertdev commented Jun 6, 2019

gwhitelaw commented Nov 14, 2019

tairli commented Dec 9, 2019 •

edited

Loading

Naren-hybreeder commented Jan 2, 2020

tairli commented Jan 4, 2020

Naren-hybreeder commented Jan 4, 2020 •

edited

Loading

GammaRay42 commented Jan 24, 2020

ryanlabelle commented Jan 24, 2020

GammaRay42 commented Jan 25, 2020 via email

Naren-hybreeder commented Jan 26, 2020

ryanlabelle commented Jan 27, 2020

Naren-hybreeder commented Jan 28, 2020

ryanlabelle commented Jan 29, 2020

heitoralthmann commented Feb 12, 2020 •

edited

Loading

dseeker commented Feb 13, 2020

ilium007 commented Mar 26, 2020

heitoralthmann commented Mar 26, 2020 •

edited

Loading

kibblewhite commented Apr 2, 2020 •

edited

Loading

kkozma-liquid commented Apr 2, 2020

em1991 commented Apr 6, 2020 •

edited

Loading

Lukexample commented Apr 22, 2020 •

edited

Loading

omar93102 commented May 14, 2020 •

edited

Loading

genunlimited commented Jul 1, 2020

irugoy commented Jul 3, 2020

graz68a commented Mar 15, 2023

	<!-- 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/clickable-element.html

fourwhitesocks commented Feb 27, 2019

juju027 commented Mar 22, 2019

dosapati commented Mar 28, 2019

jmorin1 commented Apr 11, 2019

ryanlabelle commented May 29, 2019 • edited Loading

nickhiebertdev commented Jun 6, 2019

gwhitelaw commented Nov 14, 2019

tairli commented Dec 9, 2019 • edited Loading

Naren-hybreeder commented Jan 2, 2020

tairli commented Jan 4, 2020

Naren-hybreeder commented Jan 4, 2020 • edited Loading

GammaRay42 commented Jan 24, 2020

ryanlabelle commented Jan 24, 2020

GammaRay42 commented Jan 25, 2020 via email

Naren-hybreeder commented Jan 26, 2020

ryanlabelle commented Jan 27, 2020

Naren-hybreeder commented Jan 28, 2020

ryanlabelle commented Jan 29, 2020

heitoralthmann commented Feb 12, 2020 • edited Loading

dseeker commented Feb 13, 2020

ilium007 commented Mar 26, 2020

heitoralthmann commented Mar 26, 2020 • edited Loading

kibblewhite commented Apr 2, 2020 • edited Loading

kkozma-liquid commented Apr 2, 2020

em1991 commented Apr 6, 2020 • edited Loading

Lukexample commented Apr 22, 2020 • edited Loading

omar93102 commented May 14, 2020 • edited Loading

genunlimited commented Jul 1, 2020

irugoy commented Jul 3, 2020

graz68a commented Mar 15, 2023

ryanlabelle commented May 29, 2019 •

edited

Loading

tairli commented Dec 9, 2019 •

edited

Loading

Naren-hybreeder commented Jan 4, 2020 •

edited

Loading

heitoralthmann commented Feb 12, 2020 •

edited

Loading

heitoralthmann commented Mar 26, 2020 •

edited

Loading

kibblewhite commented Apr 2, 2020 •

edited

Loading

em1991 commented Apr 6, 2020 •

edited

Loading

Lukexample commented Apr 22, 2020 •

edited

Loading

omar93102 commented May 14, 2020 •

edited

Loading