Search HubSpot’s knowledge base for a countdown timer and you’ll find one. It’s a custom module for the design manager, built with JavaScript, and it’s meant for landing pages. HubSpot’s own docs note that modules used in emails don’t include CSS or JavaScript, so that module is no use in the inbox. For a HubSpot countdown timer in marketing email, the clock has to be an image drawn at the moment of opening.
That’s what an Alterable countdown timer is, and HubSpot’s drag-and-drop editor has an HTML module that takes it without complaint. This guide covers the module, the contact tokens that make the deadline personal, and the one HubSpot habit that trips people up: tokens only render when the editor knows which contact it’s rendering for.
Step 1: Create the timer in Alterable
1. Open the Alterable countdown timer page.
2. Pick the type. Standard is one deadline for everyone. Evergreen starts each contact’s own window on their first open. Merge tag takes the deadline from a token in the image URL, which suits a renewal or quote expiry that already lives on the contact record.
3. Set the date, time and timezone, then adjust the style to match your email.
Step 2: Add the countdown timer to your HubSpot email
1. Open the email in HubSpot’s drag-and-drop editor.
2. In the Add tab on the left, click More.
3. Drag the HTML - email module into the layout where the timer should sit.
4. Click the module, and in the Content tab paste the Alterable embed into the HTML field.
Workflow emails are built in the same editor, so nothing changes for automated sends. If your team still uses the classic editor with coded templates, the embed goes straight into the template HTML instead.
Per-contact deadlines with HubSpot tokens
Standard timers need nothing from HubSpot. The other two take a token on the image URL.
An evergreen timer needs a stable identifier so Alterable can start and keep each contact’s clock. The email address does the job:
<img src="https://next.alterable.com/countdown-timers/YOUR-TIMER-ID.png?uid={{ contact.email }}" />A merge tag timer takes the deadline itself. HubSpot renders a custom datetime property as something like 2025-01-14 14:00:00 in the portal’s timezone, and default date properties as the date alone, neither of which is quite the ISO form the timer wants. The reliable route is a single-line text property, say offer_expiry, holding 2026-10-01T18:00:00Z, set by a workflow or by whatever system owns the deadline:
<img src="https://next.alterable.com/countdown-timers/YOUR-TIMER-ID.png?d={{ contact.offer_expiry }}" />Quote expiries, trial ends and renewal dates are the obvious candidates. I’ve seen a sales team put a live clock on the quote-valid-until date and get replies the same afternoon, which a sentence saying “valid for 14 days” had never managed.
Previewing a HubSpot countdown timer
HubSpot only fills personalization tokens when it knows the contact. Click Preview, choose Preview as contact and pick a real record, and the token in the image URL resolves and the timer draws. The same applies to test sends: send as a specific contact, or the URL arrives with the token unfilled and the image fails. Test emails also come from a HubSpot address rather than your own, which is normal.
After the deadline the timer holds at zero. If you’d rather late openers saw a message or a different image, set the expiry placeholder on the timer in Alterable, and every copy already sitting in an inbox picks it up on the next open.