Mailchimp Subscriber Pop-Up Form via Click Instead of Timer

While working on the JoshuaLozoff.com site, he wanted to have a popup Mailchimp form.  There are other ways to do it, like a Gravity Forms form that syncs to Mailchimp, but using the Subscriber Pop-Up form within Mailchimp allowed him to design and maintain the form himself.  However, it doesn’t work on a click-basis (at the time of this writing).

We added a menu item, but it could also be an icon in the header, or link within text.  However you implement it, this is how you’d make the popup work over and over.  Because by default, when you X out of the popup, Mailchimp sets a cookie to not pop up again.

When you create the form and click View Code, you’ll get something like this.

<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.us2.list-manage.com","uuid":"1042eeab7cdd87c00298","lid":"ef55r43tg7c0"}) })</script>

Modify it like this (lines 5 and 6).  We’re just adding a click event to the link / icon that we want to use to trigger the popup, and then set the Mailchimp cookie so it expires.

<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">
            $('.menu-newsletter').click(function() {
                require(['mojo/signup-forms/Loader'], function(L) {
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;'; // So it'll always work on click
L.start({baseUrl: 'mc.us2.list-manage.com', uuid: '<PROVIDED BY MC>', lid: '<PROVIDED BY MC>'});
                });
            });
        </script>