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


#1

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 :smiley: )

This is my repo:


This is the site:

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:

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?


#2

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


#3

I’m back.

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

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!


#4

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.


#5

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


#6

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!


#7

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 :frowning:

  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 :frowning:

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

Thanks!


#8

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


#9

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


#10

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


#11

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!


#12

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