Adding MailChimp Popup Signup Form to Your WordPress Website

MailChimp email marketing service now gives you an option of creating popup signup form that can be embedded on any website.  When all set and done, MailChimp provides you with the following code:

You can just copy and paste this code into header.php or better yet in footer.php because you want the signup form to popup when the website is loaded in a browser.  This is not the best solution because you are hard-coding the code into your website, plus you may break your WordPress code if you make an error while adding MailChimp code.  A better and safer solution is to create a plugin that will enqueue your MailChimp code.  If you decide you don’t need the popup signup form anymore, or MailChimp code interferes with your website’s code, you can simply deactivate the plugin.

Let’s take a closer look at the MailChimp code.  The first part in <script> tags is a code provided by CDN.  The part in the second <script> tags is a specific javascript code.  So, we can enqueue the CDN part as a remote file, and the second part can be saved in .js file and enqueued as a javascript local file.

The structure of our plugin will look as follows:

/mailchimp-popup
      /js
        mchimp-code.js
 mailchimp-popup.php

Contents of mchimp-code.js is simply the contents encapsulated in the second pair of <script> tags and in my case looks like this:

require(["mojo/signup-forms/Loader"], 
function(L) { L.start({"baseUrl":"mc.us12.list-manage.com","uuid":"977bf95d3615805b1d550ec5f","lid":"92d0af1999"}) });

Now let’s take a look at the actual plugin file mailchimp-popup.php

<?php
/*
Plugin Name: Mailchimp Popup Plugin
Plugin URI: https://blog.alexrusin.com/?p=80
Description: This pluggin adds mailchimp popup form to the wordpress website.
Version: 1.0.0
Author: Alex Rusin
Author URI: https://blog.alexrusin.com
License: GPL2
*/

define('VERSION', 1);

function mchimp_code_enqueue_script(){
	/*if(!is_page('home'))
		return;*/

	wp_register_script(
		'mchimp-cdn-script',
		'//s3.amazonaws.com/downloads.mailchimp.com/js/signup-forms/popup/embed.js',
		array(),
		false,
		true

	);
        wp_enqueue_script('mchimp-cdn-script');

	wp_enqueue_script(
		'mail-chimp-script',
		plugins_url('js/mchimp-code.js', __FILE__),
		array('mchimp-cdn-script'),
		VERSION,
		true
	);
}

add_action('wp_head','mchimp_code_enqueue_script')

 

The beginning of the file is a standard plugin header with its name and other information. Then we define a version for our javascript file in js folder.  Function mchimp_code_enqueue_script() is the main part of our plugin file.  Uncomment the if statement if you want your form to popup only on home page.  First we register and enqueue mchimp-cdn-script. Parameters are the following (handle, source, attendances, version, and include in footer).  mchimp-cdn-script does not have any dependencies (thus empty array), we don’t give it any version, and we include it in footer.  Next we include the local javascript file.  The parameters are the same: we make it dependent on previously included script, give it VERSION = 1, and include it in footer.

Zip the folder, install and activate the plugin and you will see the popup form when you load your website.

After the form pops up MailChimp leaves a cookie in your browser called MCEvilPopupClosed.  Its expiration by default is set to be 1 year after the user closes popup form, meaning the form won’t popup for this user using the same browser for another year.  What if you want to bug your user more often then just once a year, let’s say every 10 days?  You can add the following piece of code:

functions mchimp_popup_cookie(){

    $cookie_name='MCEvilPopupClosed';

    if (isset($_COOKIE[$cookie_name])){

	setcookie($cookie_name, 'yes', time() + 60*60*24*10, '/'); // time is in seconds
	
    }
}
add_action('init','mchimp_popup_cookie'); 

 

This code snippet detects if there is MCEvilPopupClosed cookie set in your browser and re-sets its expiration date to be 10 days.