[solved] Anyone made a Mailchimp subscribe pop-up work 'on click'?

[pateskinasy]

Hi!

I’ve been trying to make a Mailchimp ‘subscribe’ pop-up work ‘on click’ (yep, I really dislike automatic pop-ups), but no luck… anyone with tips on how to make it work on a Jekyll Blog?
(btw, ignore the horrible looking “Join Newsletter” button. It is there for testing purposes )

This is my repo:

pateskinasy/pateskinasy.github.io

This is the site:

Eskinasy Notes Pat Eskinasy Writings

1) First I’ve made the pop-up work automatically (this works).

This is the code coming from Mailchimp (this works, but the pop-up shows up upon site load, i.e. automatically):

<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">require(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us12.list-manage.com","uuid":"myuuid","lid":"mylid"}) })</script>

I’ve added this code to a newsletter.html in ‘_includes’ and then {% include newsletter.html %} to default.html.

The above works, and the pop-up will pop-up automatically.

2) Willing to make the subscribe form pop-up on click, I’ve followed this:

MailChimp Pop-Up based on Click

And added a bad-looking button to the navigation bar with the following added to masthead.html
<button id="open-popup" onclick ="showMailingPopUp(); return false;">Join Newsletter</button>

I’ve then modified newsletter.html to:

<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.us12.list-manage.com","uuid":"myuuid","lid":"mylid"}) }) })
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>

And I’ve continued including newsletter.html by adding {% include newsletter.html %} to default.html.

But 2) doesn’t work, any pointers?

[pateskinasy]

Reporting back. Sorted. There was a missing ‘)’ in my code…

[pateskinasy]

I’m back.

No, it isn’t working, so I’m back for any pointers

But now I know there is something wrong with this line:
document.getElementById("open-popup").onclick = function() {showMailingPopUp()};

With this line in ‘newsletter.html’, no pop-up comes up.

If I simply leave it at:
showMailingPopUp();
The pop-up shows-up at every page load and upon button-click.

Here’s the full ‘newsletter.html’

<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.us12.list-manage.com","uuid":"myuuid","lid":"mylid"})
    }
  );

  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>

‘clickable header’ (Join Newsletter) code in ‘masthead.html’ is:
<a href="#" id="open-popup" onclick ="showMailingPopUp(); return false;">Join Newsletter</a>

And ‘newsletter.html’ is being called in masthead.html with {% include newsletter.html %}

Any pointers welcome!

[FelicianoTech]

I had this issue with a site I was making last year. What I ended up doing was not using the popup form but the MailChimp embedded form instead. Wrap the whole form in an HTML element with the the CSS display:none style. Something like this:

<div class="mailchimp-popup" style="display:none">
code for embedded MailChimp form
</div>

Then use a snippet of JavaScript to show the form when the desired action occurs, such as a button click.

You can use CSS in a dedicated stylesheet to design the form so that it looks like a popup, over the rest of the page.

[alwingeorge]

I got it working, I will share the code i used to get it working

first i included this script tag at the bottom of my body tag
<script type="text/javascript" src="//downloads.mailchimp.com/js/signup-forms/popup/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script>

then i added this piece of javascript code to my javascript file
const modalSubscribeToggle = document.getElementById(' html id of button '); if(modalSubscribeToggle != null){ document.addEventListener("DOMContentLoaded", function(event) { modalSubscribeToggle.addEventListener('click', () => { require(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"put your base url","uuid":"put your uuid","lid":"put your lid"}) }) document.cookie = 'MCPopupClosed=;path=/;expires=Thu, 01 Jan 1970 00:00:00 UTC;'; }); }); }

[pateskinasy]

Super thanks @FelicianoTech for sharing.

Tried your approach and ended-up with a working pop-up that didn’t close (permanently in-screen), it also messed up my navigation bar (I couldn’t manage to get my CSS to darken the navigation bar)

I’ve put that trial code in a gist, here: https://gist.github.com/pateskinasy/211aa0381b57f3eebedaf4a210356438

Would you have a repo to the site you’ve made?
Or maybe the site in production I could have a look at?

Meanwhile, I’m back to back to trying to make it work with Mailchimp’s pop-up code.

Thanks!

[pateskinasy]

Super thanks @alwingeorge for sharing.

Tried your suggestion and that is what I have now in production. Still no luck.

Steps I’ve followed:

1. link in html in ‘masthead.html’
   <a href="#" id="open-popup">Join Newsletter</a>

2. Placed the following right before </body> in ‘masthead.html’

3. Placed the following in ‘_main.js’. And yes, uuids and lids were replaced to my own hashes

    const modalSubscribeToggle = document.getElementById("open-popup");
    if(modalSubscribeToggle != null){
    document.addEventListener("DOMContentLoaded", function(event) {
    modalSubscribeToggle.addEventListener("click", () => {
      require(
        ["mojo/signup-forms/Loader"],
        function(L) {
          L.start({"baseUrl":"mc.us12.list-manage.com","uuid":"myuuid","lid":"mylid"})
        }
      );
      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;";
    });
    });
    }
   

4. no luck

5. moved all above code ‘newsletter.html’

6. called ‘newsletter.html’ with an include added to ‘masthead.html’ right before </body>
{% include newsletter.html %}

7. no luck

Would you have a repo to the site you’ve made?
Or maybe the site in production I could have a look at?

Thanks!

[alwingeorge]

Could you try your production website in incognito mode or try clearing your cache

[pateskinasy]

Sure.
Tried across chrome, clearing cache, incognito, firefox, Edge and safari. Still nothing.
Also just checked console errors and nothing relevant there.

[alwingeorge]

I think a more reliable and fast way of doing this would be to create your own html form.
You can follow the steps here: https://kb.mailchimp.com/lists/signup-forms/host-your-own-signup-forms

You can then make this form a modal using CSS/JS

[pateskinasy]

Reporting back for others in the future.

I was having issues with Javascript loading order and for my specific case, I had to remove {% include newsletter.html %} from 'masthead.html and add it to ‘default.html’ instead. All working now.

Thanks all for the support!

[FelicianoTech]

The website was a private repo and is no longer running. I’m glad to see you got a working solution though.

[webguys911]

I ran into the same problem and finally found a working solution. The key was the last part with the cookie at the end with MCPopupClosed and MCPopupSubscribed.

I left the user ID information so it should work out of the box so you can see before trying your own credentials. Keep in mind the baseurl is unique to the uuid and lid.

<button onclick="showMailingPopUp(); return false;" id="open-popup" style="cursor:pointer">SUBSCRIBE</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 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":"c9792ae6ae150c71d7954bef4","lid":"53741f64e3"})
    }
  );

  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>