Add a Focus Timer to Any Website in Seconds

If you run a website — a portfolio, a productivity tool, a community space, a personal blog — you can add a fully working Pomodoro timer to any page with a single line of HTML. No API keys, no backend changes, no JavaScript required.

The snippet

<iframe
  src="https://tomatoro.com/widget"
  width="460"
  height="620"
  style="border: 0; border-radius: 24px;"
  title="Tomatoro Pomodoro timer"
></iframe>

Paste it anywhere HTML is accepted and the timer is live.

Pin a theme

The default behavior follows the viewer's system preference (light or dark). You can override it with a query parameter:

URL	Result
/widget	Follows OS preference
/widget?theme=light	Always light
/widget?theme=dark	Always dark
/widget?theme=system	Explicit system follow

Add ?theme=light or ?theme=dark to the src attribute if your site has a fixed look.

Sizing it right

460 × 620 px fits the full card without scrollbars. If your layout is narrower, the timer scales down gracefully — just keep the width above 320 px so the controls stay usable.

If you only want to show the countdown and controls without today's harvest, 560 px of height is enough.

No allow-listing needed

The widget is served with a permissive Content-Security-Policy: frame-ancestors * header, which means any origin can embed it. You don't need to request access or configure anything on your end. It just works.

One caveat: the page embedding the widget must be served over HTTPS. Mixed content (HTTPS page + HTTP iframe) is blocked by all modern browsers.

What visitors get

Anyone who opens your page gets a working timer. No sign-in prompt, no interruption. Their session data lives in their own browser. If they already have a Tomatoro account and their browser allows third-party session cookies for your site, their sessions sync automatically — but it's never required.