It prices the delay
An offer with no visible end costs nothing to postpone. When the page shows what leaving now forfeits — a price, a seat, a bonus — postponing has a cost the visitor can see.
Website countdown timers for landing pages, sales and launches
Add a live countdown to the website you already use. Match the timer to your brand, set a real deadline and paste the generated embed code into your page.
northwind.store/spring-sale
NORTHWINDShopAboutContact
SPRING SALE ENDS IN
Everything must go
02DAYS
14HOURS
35MINUTES
48SECONDS
One iframe · responsive · updates without republishing the page
Why it works
Show the deadline beside the action it belongs to
A launch date, registration cutoff or limited offer is easier to understand when the deadline is visible beside the page button. Keep the date, timezone and offer terms clear. A timer supports the decision; measure its effect on your own page rather than assuming that every campaign will convert better.
It answers the objection at the point of doubt
Placed beside the price or the button, the countdown lands exactly where hesitation happens, instead of in a banner the visitor scrolled past on the way down.
It matches what you already promised
If the email said tonight, the page has to agree. One countdown drives both surfaces, so the deadline a visitor arrives with is the deadline they land on — and consistency is what makes it credible.
Plan what the page says after zero, too. A countdown that hits nothing — an expired sale still showing the old price, a webinar page still selling seats — costs more trust than the urgency earned.
Designs
Website countdown timer designs that match your brand
A few of the designs the builder ships, drawn here by the builder’s own renderer and shown on the themes that give them their colours — there are more of both inside, along with full-page templates when you want the whole page designed rather than the timer alone.
Start from any of them and change what you like — digit size, spacing, radius, borders, box size, and every colour — or write custom CSS when a design system needs exact values. The embed keeps the design you published, so the timer on your page looks like the rest of your page.
These are a few of the designs in the builder, and each one changes again with the theme behind it — the theme gives a design every colour it does not set for itself. Digit size, spacing, radius, borders, box size, and every colour stay editable, and you can add your own CSS when a design system needs exact values.
Worked examples
Where a website countdown timer earns its place
A countdown works when the deadline is the reason to act now. These are the three placements you can adapt to your own website.
northwind.store/products/winter-parka
NORTHWINDShopAboutContact
SALE PRICE ENDS IN
Winter Parka — 40% off
Free returns. Ships in 24 hours.
Add to basket02DAYS
14HOURS
35MINUTES
48SECONDS
On the page
Put a deadline on a product page
Design: Midnight
Sale pricing that visibly expires converts better than a price with no story. The embed sits in a theme section and needs no plugin.
Embed workflow
How to copy and paste the HTML embed
The website embed loads a hosted countdown inside an iframe. Depending on the embed option, the generated code can also include a sizing helper. Copy the complete website snippet so its layout settings stay together.
1
Create the timer
Set the deadline and timezone, then match the design to your page. In Pro, publish the countdown before generating its embed code.
2
Copy the iframe HTML
Open the website embed options and copy the generated website code. Keep its URL and any sizing script intact.
3
Paste into your website
Add the snippet to a Custom HTML, Embed, Code, or theme section where the deadline supports the page CTA.
4
Publish and test
Check the live page, not only the editor preview. Confirm mobile width, height, spacing, deadline, and post-expiry behavior.
For a broader technical walkthrough, read the HTML countdown timer embed guide.
Works with every major website builder
The website embed is a standard <iframe>. If your builder and plan allow iframes in an embed, code or custom-HTML block, you can paste the generated snippet there and publish.
Because the timer renders from our side, the page you paste it into stays static. On Pro, publish your updated timer settings and check the existing embed on the live page.
- Copy the code into a supported HTML or embed block.
- Set the container width and check the height on mobile.
- Publish updated Pro settings while keeping the same embed URL.
- Hosted separately; test loading performance on your published page.
Platform installation
Add the iframe embed to your website platform
The exact block names vary, but the pattern is the same: create the timer, copy the iframe HTML, paste it into the platform's custom-code area, publish, and test the live page.
WordPress installation
Add a Custom HTML block in Gutenberg, an HTML widget in a sidebar, or the equivalent HTML element in Elementor, Divi, or another page builder. Paste the iframe where the offer or event deadline is explained.
WordPress countdown timer guideShopify installation
Use a Custom Liquid section, theme block, page content area, or landing-page builder that allows HTML. Product pages and sale landing pages usually work better than hidden footer placements.
Shopify countdown timer guideWix installation
Add an Embed HTML element, paste the iframe code, and resize the element so the countdown is not clipped. Test the published desktop and mobile layouts separately because Wix editor previews can differ from the live page.
Wix countdown timer guideWebflow installation
Drop an Embed element into the section where the timer belongs, paste the iframe, and publish. Give the parent wrapper a clear width and enough height for the timer at each breakpoint.
Webflow countdown timer guideSquarespace installation
On a plan that supports iframes, insert a Code block, paste the embed, and check the published page. If the section crops the timer, increase the block height or move the countdown to a wider page section.
Squarespace countdown timer guideCustom HTML website installation
Paste the iframe into your HTML where the countdown should render. Wrap it in a container that controls spacing, max width, and alignment. Avoid hiding it behind tabs or accordions if it is central to the conversion path.
Copy iframe embed stepsResponsive and mobile behavior
The iframe can scale to the width of its container, but your page builder still controls the surrounding layout. Use a single-column mobile section, avoid very narrow sidebars, and reserve enough height so the timer labels remain visible.
Custom CSS and branding
Free embeds include CountdownShare branding. Pro is the right fit when the countdown needs to match a paid campaign, remove the watermark, use stronger brand controls, or apply custom CSS in the Pro builder.
Compare Pro pricingCampaign control
Timer expiration behavior
A website timer should not be the only part of the page that knows the offer has ended. Plan the after-zero page state before you publish the embed.
Sale page
Move to standard pricing, remove the discount CTA, or explain when the next offer opens.
Webinar page
Switch from registration to replay, waitlist, or next-session messaging.
Launch page
Replace waitlist language with access, closed beta, or product availability copy.
Evergreen page
Use personal windows only when the deadline is assigned by a real user action.
Fix common website countdown embed problems
The timer is blank or the code disappears
Open the generated embed URL directly. If it loads, check whether your website plan and editor allow iframes. Paste the code in an HTML or embed block, then inspect the published page while logged out.
The timer is cropped on a phone
Give both the iframe and its containing block enough height. Use a full-width section on narrow screens and keep any generated resizing script when supported.
My website CSS does not style the digits
Style the countdown in CountdownShare. Your site theme controls the space around the iframe; the timer has its own design inside it. Pro offers custom CSS for the timer.
The deadline changed but the embed looks old
Edit the original timer, publish the changes and reload the page. Confirm the website still uses that timer’s embed URL rather than a different timer or a saved image.
An iframe still loads a separate page and uses browser resources. Keep the generated loading settings and compare your published page before and after adding the timer. See MDN’s iframe loading guidance.
Plan fit
Free versus Pro
Free is useful for testing a live iframe countdown and sharing a hosted page. Pro is built for business pages where the timer needs to stay branded, editable, measurable, and reusable across campaigns.
| Website need | Free | Pro |
|---|---|---|
| Iframe embed | Included with CountdownShare branding | Included without watermark |
| Active timers | Up to 3 active free timers | Unlimited active timers |
| Brand controls | Basic visual presets | Branding, custom CSS, editable settings and cleaner assets |
| Campaign measurement | Basic creation flow | Analytics, evergreen timers and reusable Pro workflows |
FAQ
Frequently asked questions
What embed technology does CountdownShare use for websites?+-
CountdownShare website embeds use an HTML iframe. The generated code loads the hosted timer from a CountdownShare embed URL, with lazy loading and responsive width styling.
Is this the same as an email countdown timer?+-
No. Website embeds use iframe HTML because browsers can render embedded web content. Email clients generally block iframes, so email timers use image or animated GIF output instead.
Can I use the embed on WordPress, Shopify, Wix, Webflow and Squarespace?+-
Yes, when the page or theme area accepts custom HTML, code, or embed blocks. Each platform has slightly different publishing and preview behavior, so test the live page.
Do I need a CountdownShare plugin or Shopify app?+-
No. CountdownShare does not offer a WordPress plugin or Shopify app. Create the countdown on CountdownShare and paste the generated website embed code into a supported HTML, embed or Custom Liquid block. Your website plan must allow iframe embeds.
Will the countdown resize on mobile?+-
The generated iframe code uses width="100%" and max-width styling. Give the embed a page section with enough height so the timer can stay readable on mobile.
Can I remove CountdownShare branding from the website timer?+-
Yes. Pro removes the watermark and includes unlimited views, editable timer settings, analytics and custom CSS. Your Pro access must remain active for Pro delivery features.
Can I edit an embedded countdown without replacing its code?+-
On Pro, update the existing countdown and publish the changes. Keep the same embed URL, then reload your website to verify the new settings. Creating a different countdown produces a different embed URL.
Why is my countdown embed cut off on mobile?+-
The website block controls the space around the timer. Check the iframe height and the height of the parent block at mobile widths. If the generated code includes a resizing script, keep it with the iframe when your website platform supports scripts.
What should happen when the website countdown expires?+-
Choose the timer end state before publishing. The embed does not automatically change your store prices, disable discount codes or close registrations; configure those changes in the website or checkout that owns the offer.
Create your website countdown embed
Generate the iframe code, paste it into your page, then test the published website before sending campaign traffic.