How To Use MailChimp’s Subscribe Template In WordPress

MailChimp provides beautiful subscribe templates out-of-the-box. I found that after creating a MailChimp account I was eager to use this neatly crafted template. Shortly, I found out that MailChimp’s code snippet to integrate the template did not work with WordPress. Yes, there are tons of MailChimp plugins that integrate the MailChimp popup subscribe modal. However, You will have to design the modal in most cases and the MailChimp template will not be an option.

Initially, when you embed the code MailChimp will set a cookie via your website. Unfortunately this cookie mixed with WordPress conflicts with the actual functionality of the popup.

Here’s how to fix it. If you’re not technically savvy you should be okay with this task. Just follow the instructions and copy and paste the code.

Step 1. Download Install and Activate this plugin Simple Custom CSS and JS. I realize using this plugin is not the most efficient method. You could obviously put this code directly in a JavaScript file but this tutorial is meant to be for non-technical WordPress users.

Step 2. Once the plugin is installed you’ll see this on the left side of the WordPress dashboard.

Step 3. Click add “Custom JS” then delete everything. The text box should now look like this.

Step 4. Paste the code and ADD your values from your EMBEDDED template (you can see what I mean in the screenshot below.)

jQuery(document).ready(function( $ ){
// Fill in your MailChimp popup settings below.
// These can be found in the original popup script from MailChimp.
var mailchimpConfig = {
baseUrl: ‘xxxxxxxxxxxxxxx’,
uuid: ‘xxxxxxxxxxxxxxx’,
lid: ‘xxxxxxxxxxxxxxx’
};

// No edits below this line are required
var chimpPopupLoader = document.createElement(“script”);
chimpPopupLoader.src = ‘//downloads.mailchimp.com/js/signup-forms/popup/embed.js’;
chimpPopupLoader.setAttribute(‘data-dojo-config’, ‘usePlainJson: true, isDebug: false’);

var chimpPopup = document.createElement(“script”);
chimpPopup.appendChild(document.createTextNode(‘require([“mojo/signup-forms/Loader”], function (L) { L.start({“baseUrl”: “‘ + mailchimpConfig.baseUrl + ‘”, “uuid”: “‘ + mailchimpConfig.uuid + ‘”, “lid”: “‘ + mailchimpConfig.lid + ‘”})});’));

jQuery(function ($) {
document.body.appendChild(chimpPopupLoader);

$(window).load(function () {
document.body.appendChild(chimpPopup);
});

});

});

Step 5. Click update/save and your MailChimp template should now be working! Note: be sure to clear local cache and any server-side cache. If you have any questions at all comment below!