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

--

--

--

Goodbye surveys - Hello User Experience driven feedback! User (hence mobile) friendly and super simple. Net Promoter Score and Stop Start Continue question fans

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rekommend.io

Rekommend.io

Goodbye surveys - Hello User Experience driven feedback! User (hence mobile) friendly and super simple. Net Promoter Score and Stop Start Continue question fans

More from Medium

Web 2.0 and Web 3.0

How to determine custom web app development cost

UI Design of An Employment App — Jobye.

Google Playstore Web app