How to Add a Countdown Timer in Email Template using Sendtric and NiftyImages
Prerequisites
- A Designmodo account
- A Sendtric account (not required for the free generator)
- A NiftyImages account
In this tutorial, we’ll add a live countdown to your Postcards email template using Sendtric and NiftyImages. You’ll embed the timer via Custom Code or as an Image directly into Postcards, then export as usual. Since the timer is rendered as a dynamic image, it remains compatible with almost all major email clients.
Video Tutorial: Adding a Countdown Timer to Email Templates
Adding Countdown Timers to Email Templates Step-by-Step
Before you start, choose your countdown provider:
- Sendtric: It's free to use with no account required and no watermark. Pro plans unlock longer date ranges and additional features. The free plan includes up to 10,000 views.
- NiftyImages: It starts with a free tier and offers upgrade options. It provides advanced styling and customization, including personalized deadlines powered by your ESP’s merge tags.
1. Open the Postcards project
Open the project you want to work on; we'll go through how to insert the timer in the next step.
2. Create the timer
Option 1 - Sendtric
- Go to Sendric: Sendtric Timer Generator and scroll down until you see the generator.
- Set the time zone, end date/time, and colors, and click Generate.
- You’ll receive an HTML snippet with a URL. Copy either the full code (A) for Custom Code or just the image URL (B).
Option 2 - NiftyImages
1. Log in to NiftyImages, then go to https://ux.niftyimages.com/Images. You’ll see the option to create a countdown timer.
- Choose the timer style you like, and you’ll be taken to the design editor.
- In the design editor, use the left panel to adjust labels, fonts, colors, spacing, and other styling options until the timer matches your brand.
- Once you have finished editing, press Save (top-right corner) and give your timer a name. Once saved, NiftyImages redirects you to the Export/Share page.
Here you’ll find:
- The full <img> embed snippet
- A live preview
- Several additional options for customization
- An expiration image setting, which lets you display a fallback image once the timer runs out
- You can either copy the full HTML embed (A) by clicking the icon on the right or copy just the image URL from the snippet (B) to insert into Postcards as an image.
C) Adding your timer to Postcards
Method 1 - Custom Code
- In Postcards, open the layout panel and navigate to the module where you want the timer.
- Hover above or below any element inside the module until you see the blue plus (+) button. This determines exactly where the timer will be placed within your template.
- Click the plus sign and select Custom Code from the menu.
- In the right panel, paste the provider’s HTML snippet into the code editor, below "Code".
- (Optional) Place the timer inside a Group element. Navigate to the Custom Code element, right-click it, and choose Group to wrap it inside a container. This creates a dedicated container that makes spacing and alignment easier to control without affecting surrounding elements.
Method 2 - Image block (URL-only)
- Click the + button and add an Image element or a content module that includes an image slot.
- Select the Image element, and in the right panel, paste the timer Image URL.
- Add helpful Alt text (e.g., “Sale ends in 03:12:54”).
- Adjust the spacing and alignment so the timer fits smoothly with the surrounding content.
Style tips in Postcards Email Builder
- Make sure the timer digits stand out clearly against the background.
- Keep the timer on its own line for mobile; avoid squeezing it into a two-column layout.
- Always include descriptive alt text, such as “Countdown to launch: 2 days, 3 hours."
- In dark mode, some clients may invert nearby colors. Use a neutral background around the timer to maintain contrast.
Client Warnings
- Keep in mind that Outlook often blocks images by default, especially in older versions. Since timers are rendered as images, they won’t appear until the recipient enables images. In that case, Outlook will show either alt text or a blank placeholder.
- Gmail clips messages over ~102 KB. If your email is very large, the clipped portion (including the timer) may only be visible after clicking “View entire message.”
- GIF support is inconsistent across email clients; if the provider renders the timer as an animated GIF, some clients may show only the first frame.
- The countdown refreshes each time the email is opened; it doesn’t tick in real time. Reopening the email loads a fresh image showing the updated time left.
Related Articles: