Have you received any emails with Christmas countdown timers and thought, I wonder how they did that? You’re in luckâ€”today, we’ll show you how. Countdown timers in emails are a fun tool for adding dynamic, attention-grabbing motion. Here’sÂ how to create aÂ festive one, just in time for the final holiday stretch.
Why add a Christmas countdown timer?
Honestly, we’re surprised we haven’t seen moreÂ December timers in emails this season. More brands should consider using them! Here’s why:
- Adding timers is easy! Seriously. It’s just a matter of copying-and-pasting a few lines of code.
- Timers captivateÂ readers’ attention better than static images.
- A countdown creates urgency. Seeing a ticking clock gives readers an incentive to act now.
- Including a timer demonstrates thatÂ your brand is visually sophisticated, innovative, and thoughtful.
Plus, the festive season is the perfect time to use them. With time-sensitive promotions and shipping deadlinesâ€”not to mention aÂ flood of competing emailsâ€”the seasonal timers are a smart way to send a clear message, add visual interest, and help your message stand out. So, let’s get started on our tutorial!
ToolsÂ Youâ€™ll Need
Here are two tools to build an email with a merry countdown:
- Open the BEE editorÂ to build and design our email message.
- Use a countdown timer generator. We like Sendtric because it’s free and simple to use. Plus, the timer it creates is an animated GIF, so itÂ will render well in email. AÂ number of online platforms (listed below) also offer easy-to-use countdown timers to add to any email campaign:
Find your holiday inspiration
To show how easy it is to add Christmas countdown timers to emails, let’s recreate this email from Paper Culture, the online card shop. Here’s the first module:
This email actually doesn’t have a timer in its original design. Instead, the message (i.e a static image) simply says there are XÂ hours left in the sale. But wouldn’t the email be more compelling if it showedÂ how many hours are left in a countdown timer?
Video overview: How to add a countdown timer
How easy is it to add one in your email message? As easy as watching our two-minute video tutorial! Be sure to check out our steps below for all the details.
Step 1: Design the email in BEE
Open up the BEE editorÂ and start with a basic single-column template. Trim Paper Culture’s image and add it to the template. You don’t need the “HOURS LEFT” text at the top because that’s where the timer will be placed, and plain text (the fine print) will also be added to the bottom of the email. Doing this will balance the text-image ratio better, which is an email design best practice.
To create a placeholder for the countdown timer, add an HTML block. This is where the timer code will be dropped once it’s created.
Here’s how the HTML block looks in the Content menu. Just grab and drag it into the template.
Place it above the 50% off image, as seen below.
Now, the message is ready for the timer.
Step 2: MakeÂ the countdown timer with Sendtric
Creating a countdown timer at Sendtric is a pretty straightforward process.
After entering an email address, add the campaignÂ end date. You can set a date that’s up to a month out. Paper Culture’s sale already ended, so let’s choose a future date just to illustrate how the timer works.
Next, update the background and numberÂ colors. Use an online HTML match tool to find the exact colors (with hex codes) that you want. Here, the background color is #eaeae9,Â and the text color is #f26d45.
Also, check the box to make sure it’s a centered table.
Now, simply click Generate, and here is the HTML code for the timer:
Then, copy the code from the text box and paste it into the HTML content block.
And…voilĂˇ! Here is the result:
To give some context, drag in a text box either above or below it. Finally, add a short line of copy.
Using a countdown timer in email? Go Pro!
We hope you enjoyed this workshop. There’s no excuse not to try it in your next holiday email campaign! If you’re not already using BEE, sign-up for a BEE Pro free trial and have access to additional templates and design features.