How To: Add a Countdown Timer to Your Mailchimp Campaigns


Q: I have designed a promotion that I’d like to send to my email list. It is going to be a limited time offer. How do I insert a countdown timer into my emails?

A: Adding a dynamic countdown timer to your campaign emails introduces a sense of urgency and can be a great way to nudge your audience to act promptly.

A tool that has come highly recommended for this sort of thing is called MotionMail. Their timers are delivered as an animated GIF and they display the actual time remaining on your countdown at the moment the user opens their email (not when you sent it).

MailChimp

Adding a countdown timer to your email is simple. Here are the steps (assuming you don’t already have a MotionMail account):

Step 1:

Go to www.motionmailapp.com

Step 2:

Sign up for a MotionMail account

Step 3:

Once logged in, click on “Create timer”

  • You’ll be asked to choose a timer style and set the parameters of your timer.
  • You’ll also be able to align elements like fonts and colours to your own business brand and identity. 

Step 4:

Copy the embed code for your new timer

Step 5:

Go back to the window with your MailChimp email

Step 6:

Click on the left pane, so that the right pane opens up for you

Step 7:

In the right pane, you will see a Code content block. Drag it across to your email and drop it in exactly the spot you want the timer to appear

Step 8:

A new area called “Code” will open up on the right. It should read: <div class=”mcnTextContent”>Use your own custom HTML</div>. Replace “Use your own custom HTML” with your timer embed code.

Step 9:

Click “Save & Close” in the lower right to save your code.  You should now see a sample of your timer in the email and in your previews.

Step 10:

The email is ready to be sent off.

Tip: The countdown timer code as it stands will be aligned to the left of your email. If this is how you want it, super. But, if what you want is to centre align the timer, you just need to tweak the code a wee bit.

Here’s how the code would stack up:

What the original code in MailChimp looks like:

<div class=”mcnTextContent”>Use your own custom HTML</div>

An example of what your Motionmail code might look like (Hint: You would use your own code from the timer you’ve just created, not this one )

<img src=”http://s.mmgo.io/t/BMs-” alt=”motionmailapp.com” />

What the code looks like when put together:

<div class=”mcnTextContent”><img src=”http://s.mmgo.io/t/BMs-” alt=”motionmailapp.com” /></div>

Now to align the timer so it sits centred:

Step 1:

Copy style=”text-align:center;”

Step 2:

Paste it into the code as follows:

<div class=”mcnTextContent” style=”text-align:center;”><img src=”http://s.mmgo.io/t/BMs-” alt=”motionmailapp.com”/></div>

If you’re curious, you can learn how to paste text directly into MailChimp without messing up the formatting HERE. Plus, if you’re curious if MailChimp is right for you, click HERE.