May 13, 2010

Embedding Signup Forms on your Email Archives

You probably know that you can use the LIST:SUBSCRIBE merge tag in MailChimp to insert a nice "subscribe to this list" link in your email newsletter. It’s handy if someone gets a forwarded copy in their inbox. But what if your newsletter was being shared on twitter? Typically, people would go to your email archive page.

If you know they’re looking at a browser-hosted version of your email, wouldn’t it be cool to remove that little "subscribe" link and use a miniature signup form instead?

Yep, you can do that with MailChimp. Here’s how…

First, I took a newsletter, and inserted my simple subscribe link with that merge tag:

subscribe-link-editor

I have to switch the pop-up content editor to "Source" mode to code the link by hand (and I grabbed the merge tag code from this cheatsheet, which you should totally bookmark):

subscribe-to-list-mergetag-code

and here’s what it’ll look like when people get the email:

subscribe-link-inbox

Okay, that’s the easy part.

Now, let’s use some advanced merge tags.

Namely, the IF:ARCHIVE_PAGE tag, which hides (or displays) stuff when it detects you’re on an email archive in the browser.

Here’s a screenshot of the merge tag code:

if-archive-else

See what it’s doing? If the reader is on the archive page, show something. Otherwise (else), show that simple link.

Now, I need to copy-paste my signup form inside that merge tag. Only thing is, my signup form is ginormous!

I need to create a mini-signup form. We actually have a tool for creating miniature signup forms. Just go to your list’s settings screen, and look for the "For Your Website" link. It’ll take you to this page:

list-settings-for-your-website

Click on "Signup Form Embed Code" and it’ll take you to a page where you can generate a customized, embeddable signup form for your website (or, in my case, for my email archive page):

embed-form-options

Be sure to play with the customization options in the right column. I turned off a lot of the headings, borders, and fluff that we put in there by default (hey, some people like fluff). I also turned on my list’s subscriber chiclet, so that when the form is displayed, people will see that over 35k subscribe to my list, so it must be somewhat useful.

Then I just copy-paste that big block of code into my email newsletter template, inside that IF:ARCHIVE merge tag.

Now, if someone visits the email archive, they see the full subscribe form, not just the subscribe link:

subscribe-form-in-archive

Hmm, it’s not quite right. I think that above the subscribe form, there should be some kind of heading, that says, "Like this newsletter? Subscribe for free:" or something. So I go back to my content editor, and type that in:

type-that-in

then send myself an email test. Clicking on the "view this in your browser" link, the archive opens up and voilà:

subscribe-form-in-archive2

Kinda cool, huh? You can use the IF:ARCHIVE merge tag to do other nifty stuff, too. I use it in my templates to hide the unsub link and permission reminder. If someone is viewing a forwarded copy in their browser, that just makes no sense to display.

You can also use the IF:ARCHIVE merge tag’s cousin: IFNOT:ARCHIVE_PAGE. To make stuff only show up in emails, but not to the general public, viewing your archives.

Loosely Related: