← Customize 500+ templates for your next newsletter

Workshops

Tutorial: How to add a countdown timer in email

Tutorial: How to add a countdown timer in email

More and more brands are using countdown timers in their email design. Countdown timers are dynamic, attention-grabbing, and fun to use. Brands are integrating these timers 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 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 the BEE email editor. If you’re not already using BEE, sign up for a free two-week trial of BEE Pro to gain access to additional templates and design features.
  • Second, we’re going to use a tool called Sendtric that can create and generate the HTML for a countdown timer. Sendtric creates the countdown as an animated GIF so it will render in email. 

Let’s get started making our countdown email!

Step 1: Design the email in BEE

We’re going to recreate a countdown timer email that The Company Store recently sent its subscribers to announce the last chance for holiday shipping:

email countdown timer

In BEE, we opened up a basic template and now it’s time to start customizing the email design.

To add content, we’ll:

  • Drop in The Company Store logo
  • Add text to the navigation menu

We’re also going to create an additional image block underneath to add the first part of the email. We’re in good shape so far! This is our progress:

email countdown timer

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 — here, all we need is a beige background and black numbers, and we’re going to plug in the HTML color code from the background of the email (#f3f3f3) for an exact match.

sendtric homepage

After we press the Generate button, Sendtric gives us the HTML code and the timer is ready to use!

Step 3: Add the timer to your email

In Sendtric, copy only the link that’s in the middle of the code. Back in the BEE editor, we added a new image block in the email and we’re going to paste the code for our timer in the URL box for the image. Just like that, our timer is active in the email.

email countdown timer

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

email countdown timer

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 using BEE to jazz up your emails with some countdown timers. If you’re not already using BEE, sign up for a BEE Pro free trial to have access to even more email templates and design features!

Our Reader Score:

Total: 1 - Average: 5

Kelly Shetron