How to Add a Countdown Timer to HubSpot Emails

HubSpot's drag-and-drop email editor has no countdown timer module. But it has an image module that can load an image from a file URL, and a countdown timer for email is exactly that: a URL that returns a freshly rendered image on every open. There are two ways in: the fast one (image module) and the flexible one (a custom HTML module). This guide covers both.

What you need

• A HubSpot account with marketing email access.
• A Countello countdown, free plan works.
• One test send to yourself.

Step 1: Design the timer

Create a countdown in Countello and pick a mode: Fixed for one shared deadline (a launch, an event, a sale end), Evergreen to start the clock when each email goes out, or Personalized to give each contact their own deadline via the URL. Style it, set the expired state (zeros, a message, or your own image) and save.

Step 2: Copy the image URL

From the countdown's Embed panel you can copy either the raw image URL or a full HTML snippet. The URL looks like this:

https://img.bestcountdownapp.com/t/your-timer.gif

Step 3: Insert it, two ways

Option A: image module. In the drag-and-drop editor, add an image module, click Replace/Add image, and choose the option to add an image by file URL. Paste the countdown URL, set the alt text (for example "Sale ends soon. Time remaining shown above") and an optional link to your offer page. HubSpot's docs confirm .gif is an accepted format for marketing emails.

Option B: custom HTML. If your template uses custom modules, a raw HTML module can take Countello's table-wrapped snippet directly. Useful when you want the timer wrapped in a click-through link exactly as generated:

<a href="https://your-store.example/sale"><img src="https://img.bestcountdownapp.com/t/your-timer.gif" alt="Countdown timer" width="600"></a>

Step 4: Optional: personal deadlines with tokens

HubSpot personalization tokens like {{ contact.property }} can render inside module content. For a Personalized countdown, store the deadline as a contact property formatted as ISO 8601 UTC (2030-01-31T12:00:00Z) or Unix seconds, and put it in the image URL's ?end= parameter:

<img src="https://img.bestcountdownapp.com/t/your-timer.gif?end={{ contact.countdown_deadline }}">

If you require signed URLs in Countello, &sig= must be a per-contact HMAC precomputed by your own backend and stored as another contact property. HubSpot can't compute signatures for you. Test with a real contact before a campaign send.

Placement and sizing

One timer per email. Place the module directly above your main button. Keep the image width at 600px or under; HubSpot templates are typically ~600px wide, and an oversized image can overflow on mobile. If you use the image-module route, add descriptive alt text like "Time remaining in the sale". It's what appears if a recipient's client blocks remote images.

One-off sends vs workflows

A Fixed countdown fits a one-off marketing email: every contact shares the deadline. In a HubSpot workflow that enrolls contacts continuously (nurture, cart follow-up), a Fixed date expires for later enrollments. Use Evergreen mode (a duration counted from each send) or Personalized mode with a contact-property deadline.

Which option should you pick?

If your drag-and-drop editor accepts an image by file URL, use that. It's the simplest path and requires no HTML. Fall back to the custom HTML module if the image picker doesn't offer a URL option in your editor version, or if you want the timer wrapped in a click-through link exactly as generated. Both render identically in the inbox; the difference is only authoring effort.

Before you hit send

1. Send a real test email to yourself, not just a preview, previews don't resolve personalization tokens.
2. Open on phone and desktop; check the image is centered and within the email column.
3. If you used a contact property in ?end=, verify the timer in the received email shows a real countdown. An expired state means the token didn't resolve.
4. Click the timer to confirm it lands on your offer page.
5. Check the first frame, that's all Outlook desktop renders.

A note on deadlines and honesty

A countdown only works if readers trust it. Keep the deadline real (an offer that quietly extends makes the next countdown inert) and design the expired state (zeros, a message, or a swapped image) so late openers see a finished email. The trust is the asset; the timer just displays it.

If something doesn't work

• The image module won't take the URL. Some HubSpot image pickers proxy or re-host files; if pasting a URL isn't offered in your editor version, use the custom HTML module route instead.
• Timer shows a stale time on re-open. Email clients and proxies cache images. The served image is correct at fetch time; put the deadline in plain text near the timer as the durable backup.
• GIF doesn't loop. Countello timers play up to 60 frames once, then hold. A looping timer would show a wrong time on re-open.
• Outlook desktop shows a static image. Outlook desktop renders only the first frame; Countello's first frame is a complete, correct countdown.
• Personalized URL shows the expired state. The token isn't resolving. Confirm the contact property exists, is populated for your test contact, and is formatted as ISO 8601 UTC or Unix seconds ('+' offsets need %2B).

Related reading

See how other platforms handle this in the Mailchimp and Klaviyo guides, or check the email client compatibility guide. Ready? Start a free countdown.