Tutorial: How to add a countdown timer in email

As we looked at last week, brands are using countdown timers in their email design. Countdown timers are dynamic, attention-grabbing, and fun to use. Brands are integrating them to encourage subscribers to snag a last-minute deal, register for a workshop, watch an event, and more.

In today’s workshop, we’ll be showing you how easy it is to add a countdown timer in your email messages. Our tools for this workshop will be the new custom HTML block in the BEE editor, along with a simple, free-to-use online tool that will generate the HTML for our countdown email timer.

Here’s our video recap:

Tools You’ll Need

Today, we’re going to use two tools to build our email with a dynamic countdown timer:

  • We’ll be using our BEE email editor. If you’re not already using BEE, sign-up for a BEE Pro free trial and have access to additional templates and design features.
  • A tool that can create and generate the HTML for a countdown timer. Be sure to use a tool that creates the countdown as an animated GIF so that you’re sure that it will render in email. We chose a simple tool called Sendtric. There are a number of online tools you can choose as well (just scroll down to our last section of this post).

A new content block: Custom HTML in BEE

Our BEE editor just got a new feature: an HTML content block (6th square below) that allows us to plug in custom HTML code. It’s exactly what we need to add features like countdown timers, and it’s super easy to do.

Screen Shot 2016-03-17 at 2.49.14 PM

Step 1: Design the email in BEE

We’re going to recreate a countdown timer email from last Tuesday’s Design Inspiration post: this J. Crew Factory email promoting shoppers’ last chance at holiday shipping:

jcrew

In BEE, we’ll open up a basic single column template and begin assembling the header.

First we need an image block for the logo…

Screen Shot 2016-03-17 at 3.37.01 PM

Text for the navigation menu…

Screen Shot 2016-03-17 at 3.38.08 PM

And an HTML block for the timer…

Screen Shot 2016-03-17 at 3.39.26 PM

We’ll also add another text block for the text underneath the timer, then start customizing the email design.

To add content, we’ll:

  • Drop in the J. Crew Factory logo
  • Update the text

To format, we’ll:

  • Update the font color and style (we went with Tahoma, size 14; black on the white background and white on the black background)
  • Change the HTML background color to black for the bottom portion of the header
  • Drop in divider lines above and below the navigation menu

We’re in good shape so far! This is our progress:

bee-1-prog

Let’s make the timer and see how it looks in our header.

Step 2: Make the countdown timer with Sendtric

Over at Sendtric.com, creating our timer is pretty straightforward.

First, we’ll enter our end date. Sendtric allows you to set the date up to a month out.

Then, we’ll update the colors. The background can remain black, but we’ll make the numbers green to match J. Crew’s email. We could also plug in HTML color codes for an exact match.

To create the timer, we also need to add an email address (presumably so Sentric can do their own email marketing to us later on!). We also recommend checking the box to encapsulate in a centered table.

Screen Shot 2016-03-17 at 4.10.24 PM

After we press the Generate button, Sendtric takes us to a new window with a preview of our timer and a block of HTML code.

Screen Shot 2016-03-17 at 4.11.26 PM

The timer is ready to use!

Step 3: Add the timer to your email

In Sendtric, simply copy the code provided:

Screen Shot 2016-03-17 at 3.59.36 PM

Back in the BEE editor, when we click on the HTML block, we can drop the code into the Content Properties field on the right. Just like that, our timer becomes active in the email:

Screen Shot 2016-03-17 at 4.12.00 PM

In Preview Mode, we can see how the width of the timer adjusts to fit a smaller screen. It looks great!

Screen Shot 2016-03-17 at 4.13.45 PM

Additional tools for creating countdown timers

A number of online platforms offer easy-to-use countdown timers you can add to your email campaigns. Here’s a quick list of additional options:

Using a countdown timer in email? Go Pro!

We hope you enjoy this new custom HTML feature, as we’re striving to build the Best Email Editor or BEE in short! If you’re not already using BEE, sign-up for a BEE Pro free trial and have access to additional templates and design features.

  • Neha Singh

    Is the timer compatible will most of the email clients? Where can I find the compatibility listing? Thank you

  • Horatiu Manea

    very good timer. congrats! one question though: How can i change the labels “Days” “Hours” etc. to be displayed in another language? 10x!

    • Hi Horatiu, sorry for the late reply. The labels “Days”, “Hours”, etc are automatically generated by the countdown timer tool. I would check if the tools we mentioned in the blog post are supported in other languages. Thanks!

    • Sendtric

      We have recently added support for other languages! If you don’t see yours, please email us: support@sendtric.com

  • Carolyne Bouchard

    I would like to use the timer with “Sendtric” but i would like the timer to have a bgcolor of the full width of the email. How can i do that, for example if my timer is “black” with “white” text, to make it look nice on the page i want the “black to be the full width 640 pixel of my email.

    Thanking you in advance 🙂

    • NiftyImages

      Carolyn, with NiftyImages you can change the size of the font or increase the padding around the image to take up the full width of the email.

  • pATREUS

    I use https://niftyimages.com/ with more colour and padding options and transparent backgrounds.

  • NiftyImages

    Thanks for mentioning us pATREUS! Our tools to let you use any text color and background color, including a transparent background. We also have features that let you hide the days column, change the font size, select a language for the labels, hide the labels, select your timezone, change the separator, change the image padding, and even choose different colors for each column.

    The biggest feature though, is you can select a font. We have about 40 fonts that will give you different looks for your timer. You can even upload your own font, as long as it is a .TTF.

    Lastly, you can use our timers dynamically. You can place an email merge field to the end of the image URL and each subscriber will have their own countdown. Great for transactional email where each subscriber has their own Trial End Date, Abandoned Shopping Cart Coupon, Birthday, etc..

    You can sign up for a free trial and get 10,000 impressions right now. These work in all email service providers, landing pages and websites! https://niftyimages.com/Signup

  • Ryan

    Great article. I have never heard of beefree.io before, what a great product. In searching I also found https://www.widgmail.com/. to work well.

    Thanks again for the post.

  • Javier Fernandez

    t does not work on mobile

    1. The html code is not the same as the image
    2. When writing the code as it appears in the image, the countdown is not responsive

    some help? 🙁

  • Mark ca

    the countdown timer does NOT responsive on mobile, ,,,,,

  • Hi Javier and Jason,
    Yes, you’re right: the countdown timer in this workshop could be further optimized for mobile since the countdown timer is an animated GIF in a simple table in the custom HTML block in the BEE editor.

    My advice here is to check out our more advanced workshop tutorial on dynamic images, which are mobile responsive in the BEE editor: https://emaildesign.beefree.io/2017/06/tutorial-personalized-email-birthday-example/

Design Beautiful Emails in the BEE Editor

Give it a try! Design stunning, fully responsive emails in our easy-to-use, drag-n-drop BEE editor. No HTML or CSS coding knowledge required. What more? It's free and online!

Take me to the BEE email editor