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.

 

Code Examples

Add these parts to the footer of your site if you plan to use the popup in multiple places
<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}) })
}
 
Button pop up example (be sure to have an element with the class of ‘popupTrigger’ on the page)
jQuery(‘.popupTrigger’).click(function(){
    popupForm();
});
 
Timer popup example (set to pop up after 5 seconds)
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.

 

The video if you haven’t seen it

I hope you found this information useful, if you managed to get it all set up and working then why not have a break and treat yourself to a game of Fast Fives

Bored?

Yes / No