You can add a free countdown widget to your website by copying one line of iframe code from any of our holiday countdown pages. Open a countdown such as days until Christmas, choose “Embed this countdown”, pick a size and color scheme, copy the code and paste it into your page’s HTML.
The widget shows the event, its date, the number of days to go and a live days, hours, minutes and seconds counter. It updates itself every day, so you never need to edit it, and when the event has passed it moves on to the next year’s date. This guide shows the code, explains the options, covers where to paste it on common site builders, and describes exactly what the widget loads, for anyone who cares about accessibility and privacy.
How to add the countdown widget to your website
- Find your event. Every holiday and date we track has its own “days until” page; the full list of countdowns covers holidays, seasons, school dates and more.
- Open “Embed this countdown”. It sits on the event’s page, below the countdown milestones.
- Choose the size (Standard or Compact) and colors (Light or Dark). The preview updates as you choose.
- Select “Copy code” and paste it where you want the widget to appear.
No account or sign-up is needed. The code for a standard, light Christmas countdown looks like this:
<iframe src="https://upcomingdays.com/embed/days-until/christmas/" title="Days until Christmas countdown" width="100%" height="220" style="border:0;max-width:640px" loading="lazy"></iframe>
The code also includes a one-line credit link underneath, “Days until Christmas countdown by UpcomingDays”. That outer line is optional and you can delete it; we only ask that you keep the small credit inside the widget itself.
Size and color options
| Option | What changes | Code |
|---|---|---|
| Standard (default) | 220 pixels tall; full date (“Friday, December 25, 2026”), full unit labels and light decorative shapes in the event’s colors | No extra setting |
| Compact | 120 pixels tall; short date, a smaller number and d/h/m/s labels, with no decorations, for sidebars and narrow columns | ?size=compact |
| Light (default) | White card for light pages | No extra setting |
| Dark | Dark navy card for dark pages | ?theme=dark |
The options combine. A compact, dark widget uses https://upcomingdays.com/embed/days-until/christmas/?size=compact&theme=dark with height="120". The width is 100% of the space you give it, up to 640 pixels, so it fits a phone screen as well as a desktop column. Each event keeps its own colors and icon, so a Halloween widget looks different from a Christmas one.
What the widget shows and how it counts
- The headline: the event and year, such as “Christmas 2026”, with its date underneath.
- The number of days to go: on October 2, 2026, the Christmas widget reads 84 days.
- A live counter in days, hours, minutes and seconds, counting to midnight at the start of the event day in each visitor’s own time zone. If a visitor’s date differs from ours, the day count adjusts to their date.
- On the day itself it reads “It’s today!”, and for events that last several days, such as Hanukkah, it shows which day of the event it is.
- Afterwards it switches to counting down to the next occurrence, so a widget you add this year keeps working next year.
The address follows the pattern /embed/days-until/{event}/, where {event} is the last part of the countdown page’s address. For events that also have weeks, months, weekends or sleeps pages, the same widget works with weeks-until, months-until, weekends-until or sleeps-until in place of days-until. If the address doesn’t match an event, the frame shows a short “countdown not found” message with a link to the full list.
Where to paste it
- WordPress: add a Custom HTML block and paste the code into it.
- Other site builders: most have an “embed”, “code” or “HTML” block that accepts an iframe. Some hosted platforms limit iframes on certain plans, so check your platform’s help pages if the widget doesn’t appear.
- Hand-written HTML: paste it anywhere inside the body of the page. It also works in a saved HTML file opened from your own computer, which is handy for testing.
- Class pages and web newsletters: any page that allows iframes will work. Email programs generally don’t run iframes, so link to the countdown page in an email instead.
If the widget looks cut off, check the height. Use 220 for standard and 120 for compact, as in the copied code.
Accessibility
The widget is built to work for everyone who visits your page:
- The iframe has a title, such as “Days until Christmas countdown”, so screen reader users know what the frame contains. Keep the title attribute if you edit the code.
- The live counter is marked as a timer with the label “Time left”, so assistive technology doesn’t read out every tick.
- It works without JavaScript. If scripts are blocked, the widget still shows the number of days, worked out on our server; the seconds counter appears only when scripts run.
- Motion respects your visitors’ settings. The background shapes on the standard size drift slowly only when the visitor hasn’t asked their device to reduce motion.
- The credit link is underlined and shows a visible outline when reached with the keyboard.
Pick Dark on dark pages and Light on light ones, so the card stands out clearly from the page around it.
Privacy and performance
The widget page has no ads and no tracking. It is a small standalone page with its styles and one short counter script written inline; it loads no analytics, advertising or other third-party scripts, and none of the main site’s theme or plugins. The code uses loading="lazy", so browsers can wait to load the widget until a visitor scrolls near it.
A few details for site owners:
- As with any embedded content, your visitors’ browsers request the widget from our server, and depending on your own site’s referrer policy, that request can include the address of the page it’s on.
- The widget page tells search engines not to index it and points them to the main countdown page, so it won’t compete with your own page in search results.
- Each widget’s content changes once a day, at midnight, and is cached in between, so it loads quickly.
Ideas for using it
- A Christmas or Advent countdown on a school, church or family site.
- A compact Halloween countdown in a blog sidebar during October.
- A last day of school countdown on a class page.
- A countdown to summer for a camp, pool or travel site.
Frequently asked questions
Is the countdown widget free?
Yes. There’s no charge and no sign-up. Copy the code from any countdown page and paste it into your site.
Can I make a countdown to my own date?
The embeddable widget is available for the holidays and events we track, which you can browse in the list of all countdowns. For a one-off date, link to a countdown page or use our date tools instead.
Does the widget update automatically?
Yes. The day count changes every day, the live counter ticks every second, and after the event it starts counting to the next year’s date.
Can I change the size or colors?
Choose Standard or Compact and Light or Dark. The width adapts to your layout up to 640 pixels; other colors and fonts are fixed for each event.
Does the widget track my visitors?
No. It has no ads, no analytics and no third-party scripts. Your visitors’ browsers load it from our server, as with any embedded content.