How to add a countdown to your website
- 1
Design your countdown
Enter a title, date and time, and choose a light or dark theme and a number color. The preview updates as you go.
- 2
Copy the embed code
Press “Copy embed code”. It's a single iframe plus a small credit link.
- 3
Paste it into your site
Add an HTML, Custom Code or Embed block where you want the countdown, and paste the code. Publish, and it's live.
Where to paste the code
| Platform | Where to paste it |
|---|---|
| WordPress (block editor) | Add a “Custom HTML” block |
| Squarespace | Add a “Code” block |
| Wix | Add → Embed Code → “Embed HTML” |
| Shopify | Online Store → Customize → add a “Custom Liquid” section |
| Webflow | Add an “Embed” element |
| Plain HTML site | Paste it anywhere inside the page body |
Menu names change from time to time, but every major builder has a block for embedding HTML.
Ideas for using a countdown widget
Sales and launches
Show how long a sale, preorder or product launch has left. A visible deadline encourages people to act.
Events and webinars
Put a countdown on your event page, registration form or newsletter landing page.
Weddings and personal sites
Add a countdown to your wedding website or a family blog for a big trip or arrival.
Schools and clubs
Count down to exams, term start, sports day or a fundraising deadline.
Make it look right
Choose the light theme for white or pale pages and the dark theme for dark backgrounds. Pick a number color that matches your brand or the event. Keep the title short so it fits on one line on phones. The widget is 100% wide up to 560 pixels, so it fits sidebars and main content columns alike. To change the height, edit the height value in the code.
Widget sizes
The embed code sets a sensible height for you. If you change the design or want more space around it, adjust the height:
| Layout | Recommended height |
|---|---|
| With a title | 150 px |
| Without a title | 120 px |
| Narrow sidebar (under 300 px wide) | 140 to 170 px |
| Large hero section | Keep 150 px; the widget caps at 560 px wide |
Troubleshooting
- Nothing appears. Some site builders only allow embedded code on paid plans, or only show it on the published site, not in the editor. Publish the page and check it there.
- The timer shows zero. The date and time are in the past. Make a new widget with a future date.
- The box is cut off. Increase the
heightvalue in the embed code by 20 to 30 pixels. - The colors don't match. Switch between the light and dark themes, and pick a number color closer to your brand.
- Wrong end time. The widget counts down to the time on each visitor's own clock. For a single global moment, set the time as it will be in your audience's main time zone.
Why add a countdown to your site
A countdown turns a date into something visitors can feel. On a sale page it shows exactly how long is left, which helps people decide now instead of later. On an event page it builds anticipation and reminds people to register. On a wedding or personal site, it's a simple, friendly way to share the excitement. Because the widget updates every second on its own, you never have to edit your page as the date gets closer.
Privacy and performance
The widget doesn't set cookies, track visitors or load ads. It loads lazily, so it only starts when someone scrolls near it, and it's served from a global CDN. Your settings live in the embed code itself, so there's no account to manage.
Just want a countdown for yourself, or one you can share with a link? Use the Countdown Timer, which also has a fullscreen mode for TVs and projectors.