The questions that come up once the code is pasted: height, width, transparency, platforms.
How do I resize the countdown iframe?
An iframe doesn't take the height of its content on its own: you set it. The code provided uses width="100%" and height="500": the width follows your column, the height is fixed. Allow 300 to 380 px when the title, description and date are hidden, 450 to 500 px with everything, and a bit more on mobile where text wraps. The countdown centers itself in the available height: too tall, the iframe leaves empty space; too short, it cuts the description.
For a different height on mobile, give the iframe a class:
<style>
.wiu-countdown { width: 100%; height: 480px; border: 0; }
@media (max-width: 600px) { .wiu-countdown { height: 560px; } }
</style>
<iframe class="wiu-countdown" src="https://www.watchisup.com/event/your-countdown/embed" title="Countdown" loading="lazy"></iframe>
Automatic iframe height (Pro)
With Pro embed, the code copied from the Embed window adds one script line under the iframe. The widget then sends the height of its content and the iframe adjusts on its own: no empty space or cut-off description, on desktop and mobile alike, and the height follows when the live bar appears. Paste the line once per page, even with several widgets.
It works anywhere you can paste a script: WordPress (Custom HTML block), Squarespace, Webflow, Shopify, a hand-made site. Notion and Google Sites strip scripts, and Wix wraps pasted code in its own frame: there, the iframe keeps the height of its height attribute.
<iframe src="https://www.watchisup.com/event/your-countdown/embed?live=1" width="100%" height="500" frameborder="0"
title="Countdown" loading="lazy"></iframe>
<script src="https://www.watchisup.com/embed.js" async></script>
How do I center the widget and limit its width?
On a wide page, a countdown stretched across the full width is harder to read. Limit the width and center it:
<iframe src="https://www.watchisup.com/event/your-countdown/embed" width="100%" height="420"
style="display:block; max-width:720px; margin:0 auto; border:0;"
title="Countdown" loading="lazy"></iframe>
How do I make the background transparent?
With Pro embed, add bg=transparent to the address: your site's background shows behind the digits. On the iframe, allowtransparency and background:transparent prevent a white background in some browsers. Then pick a text color that reads well on your background (text parameter).
<iframe src="https://www.watchisup.com/event/your-countdown/embed?bg=transparent&live=1&hide=description"
width="100%" height="420" frameborder="0" allowtransparency="true"
style="background:transparent; border:0;" title="Countdown" loading="lazy"></iframe>
How do I embed it without slowing the page?
Add loading="lazy": the browser only loads the widget as it nears the screen, ideal for a countdown lower on the page. Also add a title attribute describing the countdown: that's what screen readers announce.
<iframe src="https://www.watchisup.com/event/your-countdown/embed" width="100%" height="480" frameborder="0"
loading="lazy" title="Countdown to …"></iframe>
Which platform do I paste the code into?
Anywhere you can paste HTML or an address to embed. The full code (the iframe) goes into an HTML block; tools that ask for a plain URL take the embed link, the one ending in /embed.
- WordPress
- “Custom HTML” block in the editor, or a Custom HTML widget in a sidebar.
- Notion
- Type /embed and paste the embed link, the one ending in /embed.
- Wix
- Add > Embed Code > Embed HTML, then paste the iframe.
- Squarespace
- Add a Code block and paste the iframe.
- Webflow
- Add an Embed element and paste the iframe.
- Shopify
- “Custom Liquid” section of the theme, paste the iframe.
- Google Sites
- Insert > Embed > By URL, paste the embed link.
- Framer, Carrd, Jimdo…
- HTML or Embed block: paste the iframe.
How do I change the date without pasting the code again?
Open your edit link and change the date or title: the widget is updated on every site that shows it. The iframe code itself doesn't change.
Is the countdown correct in every time zone?
Yes. The countdown targets an exact instant: it hits zero at the same moment for every visitor, wherever they are, daylight saving included. The date written under the title is shown in the event's time zone.