MailChimp Pop-Up based on Click

Bring up pop-up based on a user clicking

The MailChimp pop-up itself is a nice way to get someone to enter their email address.

Like most people, we absolutely loathe the automatic pop-ups though and with a bit of Googling and playing around found a way to get that pop-up to appear when they click a button.

Here’s how:-

Place a button on your website and give it an id:

<button id=”open-popup”>Subscribe to our mailing list</button>

Now, we take the code we get from MailChimp to create that pop-up and modify it slightly.

The first part doesn’t change:

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

But the second part, where your pop-up form gets pulled in needs to change: We want to trigger it based on someone clicking the button:

<script>
function showMailingPopUp() {
require([“mojo/signup-forms/Loader”], function(L) { L.start({“baseUrl”:”…”,”uuid”:”….",”lid”:”…."}) })
document.cookie = “MCPopupClosed=; expires=Thu, 01 Jan 1970 00:00:00 UTC”;
};
document.getElementById(“open-popup”).onclick = function() {showMailingPopUp()};
</script>

Essentially you wrap the require([“mojo/signup-forms….]) in a bit of Javascript which is triggered when the user clicks the button.

It’s important to add the document.cookie piece as you now want the pop-up to appear every time the button is clicked (before when it appeared automatically that would be annoying).

Hope this is useful!

The code itself we found here, just note that the cookie name needs changing: https://gist.github.com/scottmagdalein/259d878ad46ed6f2cdce

Like what you read? Give Rekommend.io a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.