Custom trigger buttons and timers for Mailchimp subscriber pop-up forms

This post is just a text supplement to go with my Youtube video on how to create custom trigger buttons/links and timers for Mailchimp’s pop-up subscriber forms. The video shows you how to break out beyond the standard option in the Mailchimp admin. Allowing you to set timed popups with any value and also give users the option to open the form on a button click.

 

Create a Mailchimp account using this link and get 30 MonkeyRewards on signup – http://eepurl.com/gt_j5X  

 

You can view the whole tutorial here – https://youtu.be/ctVzcfIoCD0

 

The next video with cover how to create cookies and use them to track whether users have already seen the popup. This gives us the logic to not show the pop up multiple times and stops the user from getting frustrated with it on the site.

<script type=”text/javascript” src=”//downloads.mailchimp.com/js/signup-forms/popup/unique-methods/embed.js” data-dojo-config=”usePlainJson: true, isDebug: false”></script>

 

function popupForm(){

    window.dojoRequire([“mojo/signup-forms/Loader”], function(L) { L.start({“baseUrl”:”copy-your-list-url-here”,”uuid”:”copy-your-uuid-here”,”lid”:”copy-your-lid-here”,”uniqueMethods”:true}) })

}

 

jQuery(‘.popupTrigger’).click(function(){

    popupForm();

});

 

jQuery(document).ready(function(){

    setTimeout(function(){

        popupForm();

    },5000)

});

 

These examples use jQuery instead of $ because this can often lead to conflicts in javascript. You can use vanilla JS to achieve all of this, jQuery was just used because most sites use it and it is nice and easy to write and demonstrate for a quick tutorial. Once you have the functions working then you can do what you like with them in terms of the code around them.

 

Now for me personally, I like to add some custom styles to the forms to make them look a little nicer on the page, but this completely up to you. I tend to up the z-index values on the popups to make sure they are 100% going to show above all my elements on the site.