[{"data":1,"prerenderedAt":555},["ShallowReactive",2],{"page-or-post-\u002Fadd-countdown-timer-customer-io-email\u002F":3,"related-blog\u002Fblog\u002Fadd-countdown-timer-customer-io-email.md":554},{"type":4,"data":5,"prevPost":548,"nextPost":552},"post",{"id":6,"title":7,"body":8,"categories":518,"coverImage":521,"date":522,"description":523,"extension":524,"head":525,"meta":528,"navigation":529,"ogDescription":530,"ogTitle":531,"path":532,"readTime":533,"seo":534,"slug":535,"stem":536,"summary":537,"tags":538,"updatedAt":546,"__hash__":547},"blog\u002Fblog\u002Fadd-countdown-timer-customer-io-email.md","How to Add a Countdown Timer to a Customer.io Email",{"type":9,"value":10,"toc":503},"minimark",[11,31,34,39,42,45,49,65,69,72,79,85,89,130,134,168,171,175,178,184,189,194,213,218,236,241,257,267,270,274,289,318,339,352,356,376,380,398,402,407,410,415,418,423,429,434,437,441,444,452,456,490,493],[12,13,14,23,24,30],"p",{},[15,16,22],"a",{"href":17,"target":18,"rel":19},"https:\u002F\u002Fcustomer.io\u002F","_blank",[20,21],"noopener","noreferrer","Customer.io"," gives you four ways to build an email — the new ",[15,25,29],{"href":26,"rel":27},"https:\u002F\u002Fdocs.customer.io\u002Fmessaging\u002Fchannels\u002Femail\u002Feditors\u002Fchoose\u002F",[28],"nofollow","Design Studio",", the drag-and-drop editor, the rich text editor, and the code editor — and none of them ships a countdown component. What they can all do is load an image from a URL, and an image countdown timer lives at a URL. That's the whole opening.",[12,32,33],{},"This tutorial covers the rest: building the timer, getting it into a Customer.io message through three routes (plain image URL, Liquid in the image URL, or raw HTML), and testing the result against a real profile before it goes out. The examples use Countdown Builder, the timer service behind this blog.",[35,36,38],"h2",{"id":37},"how-email-countdown-timers-work","How Email Countdown Timers Work",[12,40,41],{},"No email client runs JavaScript, so nothing ticks live inside the inbox. Countdown timers work around this by being animated images: a service renders the countdown as a GIF at a URL, and each time the email is opened, the image regenerates with the correct time remaining at that moment.",[12,43,44],{},"Two things follow. The end date and time zone you set on the timer are what the image is built from, so they have to be the campaign's real deadline. And the email has to load the image from the timer's URL — not from a copy stored inside Customer.io's asset library. Step 3 explains what goes wrong when that rule gets broken.",[35,46,48],{"id":47},"what-you-need","What You Need",[50,51,52,56,59,62],"ul",{},[53,54,55],"li",{},"A Customer.io account with a campaign or workflow email you're building",[53,57,58],{},"A Countdown Builder account (the free tier works) with a timer set to your real end date",[53,60,61],{},"The timer's GIF URL or HTML embed code, copied from the timer's page",[53,63,64],{},"For per-profile deadlines (Route B and C): a profile attribute holding each person's deadline",[35,66,68],{"id":67},"the-flow-at-a-glance","The Flow at a Glance",[12,70,71],{},"Four steps, start to send:",[12,73,74],{},[75,76],"img",{"alt":77,"src":78},"Four steps to add a countdown timer to a Customer.io email: create the timer, copy the embed, add it in Customer.io via the image block URL, an HTML block, or the code editor, then preview and test","\u002Fblog-images\u002Fcustomerio-email-countdown-steps.svg",[12,80,81],{},[82,83,84],"em",{},"Build the timer once outside Customer.io — from there it's a single paste in the message editor.",[35,86,88],{"id":87},"step-1-create-the-timer-in-countdown-builder","Step 1: Create the Timer in Countdown Builder",[90,91,92,100,107,113,124],"ol",{},[53,93,94,95,99],{},"Go to ",[15,96,98],{"href":97},"https:\u002F\u002Fapp.countdownbuilder.com\u002Fcountdowns\u002Fcreate","app.countdownbuilder.com"," and create a timer, or sign up free if you don't have an account yet.",[53,101,102,106],{},[103,104,105],"strong",{},"Set the end date, time, and time zone"," to the campaign's actual deadline. If the offer doesn't really end, leave the timer out — a countdown that resets or lies trains readers to ignore the next one.",[53,108,109,112],{},[103,110,111],{},"Design it."," Pick a starting point from the 65+ templates, then adjust colors, fonts, and labels to match the campaign.",[53,114,115,118,119,123],{},[103,116,117],{},"Set expiry behavior"," — zeros, a message like \"Offer ended,\" or a custom image for after the deadline. Details are on the ",[15,120,122],{"href":121},"https:\u002F\u002Fcountdownbuilder.com\u002Ffeatures\u002Fexpiry-settings\u002F","expiry settings page",".",[53,125,126,129],{},[103,127,128],{},"Copy both the GIF URL and the HTML embed."," Which one you use depends on the route in Step 3.",[35,131,133],{"id":132},"step-2-create-the-email-in-customerio","Step 2: Create the Email in Customer.io",[90,135,136,151],{},[53,137,138,139,142,143,146,147,150],{},"In Customer.io, create a ",[103,140,141],{},"campaign"," (or open a workflow and add a ",[103,144,145],{},"Send Email"," step), and add an ",[103,148,149],{},"Email"," content block.",[53,152,153,154],{},"Choose your editor. For this guide the two practical ones are:\n",[50,155,156,162],{},[53,157,158,161],{},[103,159,160],{},"The drag-and-drop editor"," — assemble the email from content blocks. You can't import a full HTML document into it, but you can add HTML blocks, which is what Route C uses.",[53,163,164,167],{},[103,165,166],{},"The code editor"," — complete control over the message's HTML. If your team hand-builds emails as templates, this is your route, and the timer embed pastes straight in.",[12,169,170],{},"Design Studio, Customer.io's newest editor, supports the same block concepts — the routes below apply there too. One caution that applies to all of them: switching editors after you've built the message resets the content, so pick your editor before you start pasting.",[35,172,174],{"id":173},"step-3-add-the-timer-to-the-email","Step 3: Add the Timer to the Email",[12,176,177],{},"Three routes, and they're not interchangeable — the one you pick decides whether the whole list shares a deadline or every profile gets their own:",[12,179,180],{},[75,181],{"alt":182,"src":183},"Three routes for a countdown timer in a Customer.io email — the image block's plain URL for one shared deadline, the Dynamic image toggle with Liquid for per-profile deadlines, and an HTML block or the code editor for per-profile deadlines plus a clickable timer","\u002Fblog-images\u002Fcustomerio-email-countdown-routes.svg",[12,185,186],{},[82,187,188],{},"Route A for one deadline shared by the whole list; B or C when each profile counts to their own moment.",[12,190,191],{},[103,192,193],{},"Route A — the image block (shared deadline):",[90,195,196,203,210],{},[53,197,198,199,202],{},"Drag an ",[103,200,201],{},"Image"," block into the email where the timer belongs.",[53,204,205,206,123],{},"In the block's settings, supply a link to the externally hosted image — paste the timer's GIF URL. It has to start with ",[207,208,209],"code",{},"https:\u002F\u002F",[53,211,212],{},"Set alt text (something like \"Sale ends Sunday at midnight\") and, if the timer should be clickable, give the block a link to your sale page.",[12,214,215],{},[103,216,217],{},"Route B — the image block with Liquid (per-profile deadline):",[90,219,220,227,233],{},[53,221,222,223,226],{},"On the same image block, turn on the ",[103,224,225],{},"Dynamic image"," toggle.",[53,228,229,230,123],{},"Instead of a plain URL, the URL field now takes Liquid — append the dynamic parameter: ",[207,231,232],{},"https:\u002F\u002Fapp.countdownbuilder.com\u002Fcountdowns\u002F\u003Ctimer-id>\u002Fdisplay.gif?endsAt={{ customer.trial_ends_at }}",[53,234,235],{},"Customer.io resolves the tag per profile at send time, so each person's timer counts to their own moment — without ever leaving the image block.",[12,237,238],{},[103,239,240],{},"Route C — an HTML block or the code editor (per-profile deadline + clickable):",[90,242,243,250],{},[53,244,245,246,249],{},"In the drag-and-drop editor, add an ",[103,247,248],{},"HTML"," block; in the code editor, just find the spot in your markup.",[53,251,252,253,256],{},"Paste the timer's HTML embed, and add the same ",[207,254,255],{},"?endsAt="," parameter to both the image source and the link so the click honors the personal deadline:",[258,259,264],"pre",{"className":260,"code":262,"language":263},[261],"language-text","\u003Ca href=\"https:\u002F\u002Fapp.countdownbuilder.com\u002Fcountdowns\u002F\u003Ctimer-id>\u002Fclick?endsAt={{ customer.trial_ends_at }}\">\n  \u003Cimg src=\"https:\u002F\u002Fapp.countdownbuilder.com\u002Fcountdowns\u002F\u003Ctimer-id>\u002Fdisplay.gif?endsAt={{ customer.trial_ends_at }}\" alt=\"Your trial ends soon\" \u002F>\n\u003C\u002Fa>\n","text",[207,265,262],{"__ignoreMap":266},"",[12,268,269],{},"Whatever the route, the image URL stays pointed at the timer service. Downloading the GIF and uploading it as an asset bakes in the frame at upload time — the \"countdown\" shows a frozen time to everyone forever.",[35,271,273],{"id":272},"one-deadline-per-profile-getting-the-liquid-right","One Deadline Per Profile: Getting the Liquid Right",[12,275,276,277,280,281,284,285,288],{},"The ",[207,278,279],{},"endsAt"," parameter takes a ",[103,282,283],{},"Unix timestamp in seconds"," — 10 digits, like ",[207,286,287],{},"1760029200",". Two ways to get there in Customer.io Liquid:",[50,290,291,305],{},[53,292,293,296,297,300,301,304],{},[103,294,295],{},"The attribute already holds a timestamp."," If your pipeline writes ",[207,298,299],{},"trial_ends_at"," as Unix seconds, ",[207,302,303],{},"{{ customer.trial_ends_at }}"," is the whole job.",[53,306,307,310,311,314,315,123],{},[103,308,309],{},"The attribute is an ISO date string."," Customer.io's Liquid ",[207,312,313],{},"date"," filter converts it: ",[207,316,317],{},"{{ customer.trial_ends_at | date: \"%s\" }}",[12,319,320,321,325,326,329,330,334,335,123],{},"At send time, Customer.io resolves the tag per profile — a ",[15,322,324],{"href":323},"https:\u002F\u002Fcountdownbuilder.com\u002Fsaas-trial-renewal-countdown-timer\u002F","trial end",", a cart-hold expiry, a renewal date — and each person's timer counts down to their own moment. If the attribute is missing on a profile, the parameter comes out empty and the timer falls back to the default date you saved with it, so nobody gets a broken image. One prerequisite: the attribute has to exist on the profile ",[82,327,328],{},"before"," the message sends, so write it via the API, a CSV import, or an earlier workflow step. The full setup is on the ",[15,331,333],{"href":332},"https:\u002F\u002Fcountdownbuilder.com\u002Fdynamic-timer\u002F","dynamic timer page",", and the broader pattern is covered in ",[15,336,338],{"href":337},"https:\u002F\u002Fcountdownbuilder.com\u002Femail-personalization-beyond-first-name\u002F","Email Personalization Beyond First Name",[12,340,341,342,346,347,351],{},"The same pattern powers the message-first ESP guides: the ",[15,343,345],{"href":344},"https:\u002F\u002Fcountdownbuilder.com\u002Fhow-to-add-email-countdown-timer-in-iterable\u002F","Iterable timer guide"," covers the HTML-block route there, and the ",[15,348,350],{"href":349},"https:\u002F\u002Fcountdownbuilder.com\u002Fadd-countdown-timer-to-braze-email\u002F","Braze timer guide"," does the same for Braze — where, unlike Customer.io, Liquid can't go in the image block's URL, so Route B has no equivalent.",[35,353,355],{"id":354},"where-to-place-the-timer-in-the-email","Where to Place the Timer in the Email",[50,357,358,364,370],{},[53,359,360,363],{},[103,361,362],{},"Between the hero and the CTA."," After the reader knows what the offer is, before they decide. A timer at the very top counts down to something the reader can't yet name.",[53,365,366,369],{},[103,367,368],{},"State the deadline in text as well."," Some recipients block images. A line like \"Offer ends Sunday, Nov 15 at 11:59 PM UTC\" survives without them, and the alt text covers the timer itself.",[53,371,372,375],{},[103,373,374],{},"One timer per email."," Two clocks to two different deadlines in one email say only one thing: nothing here is real.",[35,377,379],{"id":378},"step-4-preview-and-test","Step 4: Preview and Test",[90,381,382,389,392,395],{},[53,383,384,385,388],{},"Use the editor's ",[103,386,387],{},"preview"," and render the message against a real profile you pick — not just sample data. With Liquid in the URL, this is the only way to see the timer resolve against a real attribute value.",[53,390,391],{},"Send tests to inboxes you control: Gmail, Outlook, and Apple Mail cover most lists. Apple Mail Privacy Protection prefetches images at delivery, so those opens may cache an earlier frame — Countdown Builder serves a static fallback for Apple MPP, so check how it reads. Outlook on Windows shows a GIF's first frame, which for a timer is a correct frozen snapshot.",[53,393,394],{},"Confirm the countdown shows the right time remaining, and look at what the expiry setting will display once the deadline passes.",[53,396,397],{},"Approve the send, pick your audience or trigger, and launch.",[35,399,401],{"id":400},"faq","FAQ",[12,403,404],{},[103,405,406],{},"Does Customer.io have a built-in countdown timer?",[12,408,409],{},"No. None of the four editors includes one. The standard approach is what this guide covers: a timer service generates an animated image at a URL, and the email pulls it in through the image block's URL, a Dynamic image URL, or raw HTML.",[12,411,412],{},[103,413,414],{},"Will the countdown update live?",[12,416,417],{},"It regenerates on every open, so each view shows the correct time remaining at that moment. It isn't a running clock inside the inbox — no email client allows that. Outlook on Windows renders the GIF's first frame; the count shown there is still accurate.",[12,419,420],{},[103,421,422],{},"Can I use Liquid with the timer?",[12,424,425,426,428],{},"Yes, and more freely than in most ESPs. HTML blocks and the code editor take Liquid anywhere, and the image block's ",[103,427,225],{}," toggle accepts Liquid in the URL itself — so a per-profile countdown doesn't require touching HTML at all.",[12,430,431],{},[103,432,433],{},"Do timers work in campaigns and workflows?",[12,435,436],{},"Yes. Campaign broadcasts and workflow email steps use the same editors, so all three routes work in both. For event-triggered sends, make sure the deadline attribute is written to the profile before the send step fires — an empty value falls back to the timer's default date.",[35,438,440],{"id":439},"final-thoughts","Final Thoughts",[12,442,443],{},"A countdown timer in a Customer.io email is one paste: the image block's URL property for a deadline the whole list shares, the Dynamic image toggle or an HTML block when Liquid gives every profile their own. Build the timer against the real deadline, link it by URL — never re-upload the GIF — place it between the hero and the button, and test against a real profile before sending.",[12,445,446,447,451],{},"If you want to try it, you can ",[15,448,450],{"href":449},"https:\u002F\u002Fcountdownbuilder.com\u002F","create a free email countdown timer"," — the free plan needs no credit card and adds no watermark.",[35,453,455],{"id":454},"related-guides","Related Guides",[50,457,458,463,468,474,479,484],{},[53,459,460],{},[15,461,462],{"href":344},"How to Add an Email Countdown Timer in Iterable",[53,464,465],{},[15,466,467],{"href":349},"How to Add a Countdown Timer to a Braze Email",[53,469,470],{},[15,471,473],{"href":472},"https:\u002F\u002Fcountdownbuilder.com\u002Fhow-to-add-countdown-timer-in-aweber\u002F","How to Add a Countdown Timer to an AWeber Email",[53,475,476],{},[15,477,478],{"href":323},"Trial-Expiry and Renewal Countdown Emails for SaaS",[53,480,481],{},[15,482,483],{"href":337},"Email Personalization Beyond First Name: Dynamic Countdown Timers",[53,485,486],{},[15,487,489],{"href":488},"https:\u002F\u002Fcountdownbuilder.com\u002Femail-countdown-timer-not-working\u002F","Email Countdown Timer Not Working? 7 Causes and Fixes",[491,492],"hr",{},[12,494,495],{},[82,496,497,498,502],{},"Last updated: October 2026. The Customer.io steps above reflect the message editors as of this date; Customer.io evolves its interface, so exact labels may drift. Countdown Builder features and pricing reflect the product at the time of publication and can change — see the ",[15,499,501],{"href":500},"https:\u002F\u002Fcountdownbuilder.com\u002Fpricing\u002F","pricing page"," for current plans.",{"title":266,"searchDepth":504,"depth":504,"links":505},2,[506,507,508,509,510,511,512,513,514,515,516,517],{"id":37,"depth":504,"text":38},{"id":47,"depth":504,"text":48},{"id":67,"depth":504,"text":68},{"id":87,"depth":504,"text":88},{"id":132,"depth":504,"text":133},{"id":173,"depth":504,"text":174},{"id":272,"depth":504,"text":273},{"id":354,"depth":504,"text":355},{"id":378,"depth":504,"text":379},{"id":400,"depth":504,"text":401},{"id":439,"depth":504,"text":440},{"id":454,"depth":504,"text":455},[519,520],"email-marketing","tutorial","customerio-email-countdown-timer-cover.png","2026-10-26","Customer.io gives you four ways to build an email — the new Design Studio, the drag-and-drop editor, the rich text editor, and the code editor — and none of them ships a countdown component. What they can all do is load an image from a URL, and an image countdown timer lives at a URL. That's the whole opening.","md",{"title":526,"description":527},"How to Add a Countdown Timer to a Customer.io Email | Guide","Add a countdown timer to a Customer.io email: image block URL, HTML block, or the code editor — plus per-profile deadlines with Liquid and the Dynamic image toggle, and preview testing before you send.",{},true,"Build a countdown timer and drop it into a Customer.io email — image block URL for one shared deadline, the Dynamic image toggle or an HTML block for a deadline per profile. Steps, placement, and testing.","Add a Countdown Timer to a Customer.io Email","\u002Fblog\u002Fadd-countdown-timer-customer-io-email","7 min read",{"title":7,"description":523},null,"blog\u002Fadd-countdown-timer-customer-io-email","Customer.io has four email editors and no countdown block, but the image block accepts a hosted URL, the drag-and-drop editor takes HTML blocks, and Liquid works in the image URL itself via the Dynamic image toggle. This guide covers all three routes and how to test before sending.",[539,540,541,542,543,544,545],"customer.io countdown timer","countdown timer in customer.io","customer.io email countdown","email countdown timer","animated countdown gif","countdown timer","email marketing","2026-10-28","RsQWmew1skLM6x9BzaZSfWZIoYK8egrTpdHUfGIic9c",{"title":549,"date":550,"path":551},"Win-Back Emails with a Deadline: Countdown Timers for Re-Engagement","2026-10-25","\u002Fblog\u002Fre-engagement-countdown-timer-email",{"title":473,"date":546,"path":553},"\u002Fblog\u002Fhow-to-add-countdown-timer-in-aweber",[],1793698533179]