How to Embed a Countdown Timer

Want your countdown to live where your audience already is? Below you’ll find quick, copy-paste instructions for adding a timer to WordPress (Gutenberg & Classic), Notion, Squarespace, Wix, and popular link in bio tools — plus a plain HTML snippet for any site.

Before you start: create your timer and copy its share link. You’ll paste that link into the examples below.

Copy-paste embed (works on most website builders)

Replace PASTE_YOUR_TIMER_LINK_HERE with your countdown link. Width and height are adjustable.

<iframe
  src="PASTE_YOUR_TIMER_LINK_HERE"
  title="Countdown timer"
  loading="lazy"
  style="width:100%;height:260px;border:0;max-width:800px;"
  referrerpolicy="no-referrer-when-downgrade"
  allowfullscreen></iframe>

Tip: For TVs or live events, link the text “Open full screen” below the iframe to the same timer link so people can pop it out.

WordPress (Gutenberg)

Open your page/post → click + and add a Custom HTML block.
Paste the iframe from the copy-paste embed section.
Click Preview to check sizing → Update.

Tip: If your theme has narrow content width, add max-width:800px;margin:auto;display:block; to center the timer.

WordPress (Classic Editor)

Switch the editor tab from Visual to Text.
Paste the iframe code where you want the timer to appear.
Update the post and view it on mobile to confirm responsiveness.

Notion

Copy your countdown link.
In Notion, type /embed → choose Embed.
Paste the link and confirm. Drag the block edges to resize.

Note: If Notion shows a preview instead of an interactive view, keep the link above the fold and add a “Open full screen” link for easy viewing.

Squarespace

Edit the page → add a Code block.
Paste the iframe code and apply. Disable “Display Source” if visible.
Use section spacing to give the timer breathing room.

Tip: On very narrow sections, set height:320px or higher in the iframe style.

Wix

Go to Add → Embed → Embed a Widget.
Choose Website Address (URL) or Custom Embeds → Embed a Widget for HTML.
Paste the timer link (URL embed) or the iframe HTML, then resize the box.

Link in Bio (Linktree, Beacons, bio.link)

Create a new Link titled “Countdown to [Your Event]”.
Paste your timer link as the URL.
Pin it to the top during your campaign so visitors see it first.

Pro move: Add the end time (and timezone) in the link subtitle to reduce DMs like “what time exactly?”

Plain HTML sites (no builder)

Drop the iframe where you want the timer to appear. This minimal wrapper keeps it centered and responsive:

<div style="max-width:820px;margin:24px auto;padding:0 12px;">
  <iframe
    src="PASTE_YOUR_TIMER_LINK_HERE"
    title="Countdown timer"
    loading="lazy"
    style="width:100%;height:280px;border:0;"
    allowfullscreen></iframe>
  <p style="text-align:center;margin-top:8px;">
    <a href="PASTE_YOUR_TIMER_LINK_HERE">Open full screen</a>
  </p>
</div>

Best practices (speed, accessibility, SEO)

Use HTTPS: your page and the timer link should both be https:// to avoid mixed-content blocking.
Make it readable: place on a high-contrast section; avoid busy image backgrounds right behind the iframe.
Size for mobile first: 260–320px height usually fits well; increase on desktop sections.
Explain zero: add a caption like “Doors open at 18:00 (Europe/Warsaw)” so visitors know what happens when the timer ends.
Don’t overdo it: one primary timer per page beats multiple small ones competing for attention.

Troubleshooting

The timer area looks blank

Open the timer link directly in a new tab to confirm it loads.
Check that the link starts with https:// and has no typos.
If your platform blocks iframes, use a regular hyperlink to the timer with “Open full screen”.

Time shows incorrectly for some viewers

Edit the timer and select the correct timezone (e.g., Europe/Warsaw).
Spell out start/end times in the caption to avoid ambiguity.

It looks cramped on mobile

Increase the iframe height (e.g., height:320px).
Add vertical spacing in your page section above and below the timer.

← Back to PerfectCountdown