Extending Mailchimp Design Editor

Mailchimp has a really excellent “Drag and drop” email builder, thats quite easy to work with, but sometimes it needs a bit more. I found no “official” way to extend mailchimp, so I had to resort to a chrome browser extension. Which turned out to be an interesting and insightful experience on its own.

A new template design for our company’s newsletter were commissioned, and designing a brand new interface to enter all the data seemed like too much work, so I started to dig around how can I not do work that’s been already done by somebody else (a useful trait not only for programmers).

Mailchimp had just done a new “drag and drop” email builder and the new design could “almost” completely implemented with it. Only a small part — displaying actual products — had to be inserted, and nobody wants to add all of these titles and images manually, when that information is available in our database already.

Adding a simple interface for these products proved a bit more challenging than I expected though. Mailchimp themselves do not officially (and unofficially) support it, no docs no nothing. Contacting their customer support also proved futile — apparently they don’t have the manpower to answer to these types of emails anymore, so no luck there either.

I ended up using the “custom html” block.

However, doing custom html for us code monkeys is all well and good, but editors generally frown on fiddling with <tr> and <td> tags. So a new interface had to be made.

Chrome extensions seemed like a natural choice, but they are not allowed to access the page’s javascript itself so no way to communicate with the CodeMirror html editor there.

So no way to “fill in” the html automatically, but at least, through some content script trickery, I could get access to the contents of the CodeMirror editor, so at least I could “read back” the data.

var content = ‘’; 

[].forEach.call(
  document.querySelectorAll(‘.CodeMirror pre’), 
  function(item) { 
    content += item.textContent + “\n”; 
  }
);

Not pretty, but it works.

So build an extension that allows you to build some html, and have a textarea field to get the html and then paste it to the code area inside mailchimp — easy peasy.

One more trouble — how to read the data back? Well I didn’t want to have to read back the html and piece it back together (especially if it later changes for some reason) so I solved it by just putting a json blob at the bottom of the html with all the data inside of it — problem solved.

Mailchimp should really step up their game a bit and allow for custom Drag’n’Drop extensions — this would be simply huge for all the commerce integrations and will save quite a lot of man hours setting up newsletters.