Get The Mailchimp Popup Working OnClick In WordPress

 
If you have a mailing list with MailChimp you may have noticed that MailChimp give you the option of adding a popup to your website to try and encourage people to subscribe to your list. Along with this popup is gives you a few different options of when you want the popup to appear being immediately, after 5 seconds, after 20 seconds, after the visitors scrolls to the middle of the page, after the visitor scrolls to the bottom of the page or when the visitor tries to exit the page.

The option is doesn’t give you though, is for the popup to appear when the visitor clicks a link or button. Although this is not the way we would generally recommend to display a popup on click it is something a few people have been asking for, so here we show you how you can do it:

 
1 – Amend the default script MailChimp give you to the script below ensuring that your own UUID and your own LID which you can find in the code that MailChimp give you. Also check the base URL to make sure it is the same as the code below, if not you will need to change this as well. You need to add the code to the footer section of your website.

[code lang=”js”]
<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”:”YOUR_UUID”,”lid”:”YOUR_LID”})
}
);

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>
[/code] 
2 – Now all you need to do is add a link your page content. The popup uses the OnClick and ID tag to activate so you will need to add the link and then edit it in the text mode of the WordPress editor as shown below.

[sourcecode language=”plain”]<button id=”open-popup” onclick=”showMailingPopUp(); return false;”>Subscribe to our mailing list</button>[/sourcecode]View original GitHub post about this here