Productivity·7 min read

How to embed free timers on your website, blog, or Notion page

By Cyril Yevdokimov·February 23, 2026

Why embed a timer on your website?

A timer on your page keeps visitors engaged. Instead of leaving to find a separate timer app, they stay on your site. Teachers use embedded classroom timers on Google Sites dashboards. Bloggers add Pomodoro timers to productivity articles. Developers drop stopwatches into internal tools. The result: more time on page, lower bounce rates, and a useful feature that earns backlinks naturally.

Timerjoy's embeddable widgets are free, require no sign-up, and work on any platform that supports iframes — WordPress, Notion, Google Sites, Squarespace, raw HTML, and more.

How to embed a Timerjoy timer (3 steps)

Step 1: Choose a preset

Go to the Embed page and pick a preset — Pomodoro, classroom timer, meeting timer, Tabata, meditation, study session, or stopwatch. Each preset comes with sensible defaults for duration and label.

Step 2: Customize

Adjust the duration, label text, and theme (dark or light). The live preview updates in real time so you see exactly what your visitors will see.

Step 3: Copy and paste

Click Copy iframe code. You get a standard `` snippet ready to paste into any HTML editor, CMS, or embed block.</p> <p>That's it — three clicks and you have a working timer on your page.</p> <h2>Platform-specific guides</h2> <h3>WordPress</h3> <p>In the Gutenberg editor, add a <strong>Custom HTML</strong> block. Paste the iframe code from the <a href="/embed" class="text-[#e8592f] hover:underline">Embed page</a>. The timer is responsive and fills the block width automatically. If you use Elementor or other page builders, use their HTML widget instead.</p> <h3>Notion</h3> <p>Type `/embed` in any Notion page. Paste the <strong>widget URL</strong> (the `src` attribute from the iframe, not the full HTML tag). Resize the block by dragging the corners. This works in personal wikis, team dashboards, and shared workspaces.</p> <h3>Google Sites</h3> <p>Click <strong>Insert → Embed → Embed code</strong>. Paste the full iframe snippet. Drag the element to position and resize it. Google Sites supports iframes natively, so the timer works without any plugins.</p> <h3>Squarespace</h3> <p>Add a <strong>Code</strong> block in the section editor. Paste the iframe code. Squarespace renders it as a live widget in preview and published modes.</p> <h3>Raw HTML</h3> <p>Paste the iframe anywhere inside your `<body>` tag. Set `width` and `height` attributes to match your layout. The widget defaults to `100%` width and `400px` height, but you can adjust both.</p> <h2>Available presets</h2> <ul><li><strong>Classroom Timer (5 min)</strong> — perfect for timed activities, transitions, and group work. See our <a href="/blog/best-classroom-timers-for-teachers" class="text-[#e8592f] hover:underline">classroom timer guide</a> for teaching strategies.</li> <li><strong>Pomodoro (25 min)</strong> — the classic <a href="/blog/pomodoro-technique-complete-guide" class="text-[#e8592f] hover:underline">Pomodoro technique</a> work interval. Embed it in your productivity dashboard.</li> <li><strong>Tabata (4 min)</strong> — high-intensity interval timer for fitness pages and workout blogs. Compare with <a href="/blog/tabata-vs-hiit-complete-comparison" class="text-[#e8592f] hover:underline">HIIT timers</a>.</li> <li><strong>Meeting Timer (30 min)</strong> — keep meetings on track. Embed in your team's Notion workspace.</li> <li><strong>Meditation (10 min)</strong> — calm countdown for wellness and mindfulness pages. Pairs well with <a href="/breathing-timer" class="text-[#e8592f] hover:underline">breathing timers</a>.</li> <li><strong>Study Session (50 min)</strong> — long-form focus blocks for <a href="/blog/best-study-timer-techniques" class="text-[#e8592f] hover:underline">study technique</a> articles.</li> <li><strong>Stopwatch</strong> — count up instead of down. Great for tracking, demos, and experiments.</li> <li><strong>Custom Timer</strong> — set any duration from 1 to 720 minutes.</li></ul> <h2>Use cases: who embeds timers?</h2> <p><strong>Teachers</strong> embed <a href="/classroom-timer" class="text-[#e8592f] hover:underline">classroom timers</a> on Google Sites and Notion dashboards that students access daily. A <a href="/visual-timer" class="text-[#e8592f] hover:underline">visual timer</a> on the class page eliminates the need for a separate device.</p> <p><strong>Bloggers</strong> add timers to productivity and study guides. A <a href="/timer/5-minute-timer" class="text-[#e8592f] hover:underline">5-minute timer</a> in a meditation article or a <a href="/timer/25-minute-timer" class="text-[#e8592f] hover:underline">Pomodoro timer</a> in a focus guide makes the content interactive and increases time on page.</p> <p><strong>Course creators</strong> embed timers in lesson modules. A timed writing exercise or quiz countdown keeps students engaged without leaving the learning platform.</p> <p><strong>Developers</strong> use the <a href="/stopwatch" class="text-[#e8592f] hover:underline">stopwatch</a> widget in internal tools, admin dashboards, and demo pages. The iframe approach means zero dependencies — no npm packages, no build steps.</p> <p><strong>Event organizers</strong> embed countdown timers on event pages. A <a href="/timer/60-minute-timer" class="text-[#e8592f] hover:underline">60-minute timer</a> for a webinar or a custom countdown to a launch date keeps visitors returning to check the clock.</p> <h2>Tips for getting the most from embedded timers</h2> <ul><li><strong>Match the theme to your site.</strong> Use the dark theme on dark backgrounds and the light theme on white pages.</li> <li><strong>Keep the label descriptive.</strong> Instead of "Timer," use "Writing Sprint" or "Break Time" — it helps visitors understand the context instantly.</li> <li><strong>Set the right height.</strong> The default 400px works for most layouts. On mobile-heavy pages, 350px is enough. For hero sections, try 500px.</li> <li><strong>Link back to the full tool.</strong> The widget includes a small "Timerjoy" credit link. If you want to give your readers the full experience, link to the <a href="/online-timer" class="text-[#e8592f] hover:underline">online timer</a> or <a href="/stopwatch" class="text-[#e8592f] hover:underline">stopwatch</a> page.</li></ul> <h2>Common questions</h2> <p><strong>Does the timer keep running if visitors scroll away?</strong><br />Yes. The countdown continues in the iframe even when it's scrolled out of view. The alarm sounds when time is up, as long as the user clicked Start.</p> <p><strong>Can I embed multiple timers on the same page?</strong><br />Absolutely. Each iframe is independent — you can have a Pomodoro timer and a break timer side by side.</p> <p><strong>Does it affect my page speed?</strong><br />The widget is lightweight — under 20KB total. It loads asynchronously in the iframe and doesn't block your page rendering.</p> <p><strong>Can I remove the Timerjoy credit link?</strong><br />The credit link is small and optional. It helps other people discover the tool, but the timer works the same with or without it.</p> <h2>Start embedding</h2> <p>Head to the <a href="/embed" class="text-[#e8592f] hover:underline">Embed page</a>, pick your preset, customize the settings, and copy the code. In under a minute you'll have a working timer on your website — free, responsive, and zero maintenance.</p></div><a class="mt-10 max-w-3xl mx-auto flex items-center gap-5 p-6 md:p-8 rounded-2xl border-2 border-[var(--braun-orange)]/30 bg-[var(--braun-orange)]/[0.04] hover:border-[var(--braun-orange)] hover:bg-[var(--braun-orange)]/[0.08] transition-all group block" href="/embed"><span class="text-4xl md:text-5xl shrink-0">📦</span><div class="flex-1 min-w-0"><p class="text-[10px] uppercase tracking-[0.2em] text-[var(--braun-text-muted)] mb-1">Try it free</p><p class="text-lg md:text-xl font-medium text-[var(--braun-text)] group-hover:text-[var(--braun-orange)] transition-colors truncate">Embed Timers</p></div><span class="shrink-0 braun-btn braun-btn-orange !px-5 !py-2.5 text-sm font-medium whitespace-nowrap">Get embed code →</span></a><div class="braun-groove my-8"></div><div class="braun-inset p-5 mb-8 not-prose"><div class="flex items-start gap-4"><div class="shrink-0 w-12 h-12 rounded-full bg-[var(--braun-orange)] text-white flex items-center justify-center text-lg font-light">K</div><div class="flex-1"><div class="text-sm font-medium text-[var(--braun-text)] mb-1">Cyril Yevdokimov</div><div class="text-xs text-[#999] mb-2 uppercase tracking-wider">Senior Product Designer · Founder, Timerjoy</div><p class="text-sm text-[var(--braun-text-muted)] leading-relaxed">Builds tools that get used. Founded Timerjoy after a frustrated search for an ad-free online timer. <a class="text-[var(--braun-orange)] hover:underline" href="/about">More about the project</a>.</p></div></div></div><div class="flex items-center gap-2 flex-wrap"><span class="text-xs text-[#555553] uppercase tracking-widest mr-1">Share</span><a href="https://x.com/intent/tweet?url=https%3A%2F%2Ftimerjoy.com%2Fblog%2Fhow-to-embed-timerjoy-on-your-website&text=How%20to%20embed%20free%20timers%20on%20your%20website%2C%20blog%2C%20or%20Notion%20page" target="_blank" rel="noopener noreferrer" aria-label="Share on X" class="braun-pill !inline-flex items-center gap-1.5 text-xs hover:bg-[#e8592f] hover:text-white transition-colors"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path></svg>X</a><a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Ftimerjoy.com%2Fblog%2Fhow-to-embed-timerjoy-on-your-website" target="_blank" rel="noopener noreferrer" aria-label="Share on Facebook" class="braun-pill !inline-flex items-center gap-1.5 text-xs hover:bg-[#e8592f] hover:text-white transition-colors"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"></path></svg>Facebook</a><a href="https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Ftimerjoy.com%2Fblog%2Fhow-to-embed-timerjoy-on-your-website" target="_blank" rel="noopener noreferrer" aria-label="Share on LinkedIn" class="braun-pill !inline-flex items-center gap-1.5 text-xs hover:bg-[#e8592f] hover:text-white transition-colors"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"></path></svg>LinkedIn</a><a href="https://reddit.com/submit?url=https%3A%2F%2Ftimerjoy.com%2Fblog%2Fhow-to-embed-timerjoy-on-your-website&title=How%20to%20embed%20free%20timers%20on%20your%20website%2C%20blog%2C%20or%20Notion%20page" target="_blank" rel="noopener noreferrer" aria-label="Share on Reddit" class="braun-pill !inline-flex items-center gap-1.5 text-xs hover:bg-[#e8592f] hover:text-white transition-colors"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.373 0 0 5.373 0 12c0 6.627 5.373 12 12 12s12-5.373 12-12c0-6.627-5.373-12-12-12zm6.066 13.71c.147.307.22.64.22.988 0 2.718-3.166 4.925-7.065 4.925S4.156 17.416 4.156 14.7c0-.348.073-.681.22-.988a1.562 1.562 0 01-.391-1.028c0-.868.71-1.575 1.582-1.575.418 0 .81.164 1.104.458 1.14-.758 2.675-1.23 4.372-1.287l.893-4.208a.372.372 0 01.443-.283l2.984.627c.206-.4.618-.673 1.093-.673.672 0 1.22.548 1.22 1.22s-.548 1.22-1.22 1.22-1.22-.548-1.22-1.22l-.001-.04-2.674-.562-.8 3.768c1.658.073 3.152.548 4.267 1.293a1.566 1.566 0 011.104-.458c.872 0 1.582.707 1.582 1.575 0 .396-.147.755-.391 1.028zM9.05 14.7c0 .672.548 1.22 1.22 1.22s1.22-.548 1.22-1.22-.548-1.22-1.22-1.22-1.22.548-1.22 1.22zm6.9 2.508a.372.372 0 00-.525 0c-.467.467-1.264.7-2.425.7s-1.958-.233-2.425-.7a.372.372 0 00-.525.525c.636.636 1.636.95 2.95.95s2.314-.314 2.95-.95a.372.372 0 000-.525zm-.175-3.728c-.672 0-1.22.548-1.22 1.22s.548 1.22 1.22 1.22 1.22-.548 1.22-1.22-.548-1.22-1.22-1.22z"></path></svg>Reddit</a><button class="braun-pill !inline-flex items-center gap-1.5 text-xs hover:bg-[#e8592f] hover:text-white transition-colors cursor-pointer"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"></path></svg>Copy link</button></div></article><section class="mt-10 md:mt-12"><div class="flex items-center gap-2 mb-6"><div class="braun-indicator braun-indicator-off"></div><h2 class="text-xs font-medium text-[#555553] uppercase tracking-[0.2em]">Read also</h2></div><div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-5"><a class="braun-panel p-4 md:p-5 group hover:shadow-md transition-shadow flex flex-col" href="/blog/why-your-pomodoro-timer-drifts"><div class="w-full rounded-xl overflow-hidden aspect-[1.6/1] mb-3 relative"><img alt="Why your browser-tab Pomodoro timer drifts (and the fix that actually works)" loading="lazy" decoding="async" data-nimg="fill" class="object-cover" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw" srcSet="/_next/image?url=%2Fblog%2Fwhy-your-pomodoro-timer-drifts.webp&w=256&q=75&dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV 256w, /_next/image?url=%2Fblog%2Fwhy-your-pomodoro-timer-drifts.webp&w=384&q=75&dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV 384w, /_next/image?url=%2Fblog%2Fwhy-your-pomodoro-timer-drifts.webp&w=640&q=75&dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV 640w, /_next/image?url=%2Fblog%2Fwhy-your-pomodoro-timer-drifts.webp&w=750&q=75&dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV 750w, /_next/image?url=%2Fblog%2Fwhy-your-pomodoro-timer-drifts.webp&w=828&q=75&dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV 828w, /_next/image?url=%2Fblog%2Fwhy-your-pomodoro-timer-drifts.webp&w=1080&q=75&dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV 1080w, /_next/image?url=%2Fblog%2Fwhy-your-pomodoro-timer-drifts.webp&w=1200&q=75&dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV 1200w, /_next/image?url=%2Fblog%2Fwhy-your-pomodoro-timer-drifts.webp&w=1920&q=75&dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV 1920w, /_next/image?url=%2Fblog%2Fwhy-your-pomodoro-timer-drifts.webp&w=2048&q=75&dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV 2048w, /_next/image?url=%2Fblog%2Fwhy-your-pomodoro-timer-drifts.webp&w=3840&q=75&dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV 3840w" src="/_next/image?url=%2Fblog%2Fwhy-your-pomodoro-timer-drifts.webp&w=3840&q=75&dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV"/></div><div class="flex items-center gap-2 mb-2"><span class="text-[10px] font-medium uppercase tracking-widest text-[#e8592f]">Productivity</span><span class="text-[10px] text-[#999]">·</span><span class="text-[10px] text-[#999]">10 min</span></div><h3 class="text-sm md:text-base font-medium text-[var(--braun-text)] group-hover:text-[#e8592f] transition-colors leading-snug">Why your browser-tab Pomodoro timer drifts (and the fix that actually works)</h3><p class="text-[var(--braun-text-muted)] mt-1.5 text-xs leading-relaxed line-clamp-2 flex-1">setInterval drifts up to 30 seconds in backgrounded tabs because of Chrome throttling. Here's the AudioContext fix that makes browser timers reliable, with code and diagnostics.</p></a><a class="braun-panel p-4 md:p-5 group hover:shadow-md transition-shadow flex flex-col" href="/blog/pomodoro-technique-complete-guide"><div class="w-full rounded-xl overflow-hidden aspect-[1.6/1] mb-3 relative"><img alt="Pomodoro technique: a complete guide to focused work" loading="lazy" decoding="async" data-nimg="fill" class="object-cover" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw" srcSet="/_next/image?url=%2Fblog%2Fpomodoro-technique-complete-guide.webp&w=256&q=75&dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV 256w, /_next/image?url=%2Fblog%2Fpomodoro-technique-complete-guide.webp&w=384&q=75&dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV 384w, /_next/image?url=%2Fblog%2Fpomodoro-technique-complete-guide.webp&w=640&q=75&dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV 640w, /_next/image?url=%2Fblog%2Fpomodoro-technique-complete-guide.webp&w=750&q=75&dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV 750w, /_next/image?url=%2Fblog%2Fpomodoro-technique-complete-guide.webp&w=828&q=75&dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV 828w, /_next/image?url=%2Fblog%2Fpomodoro-technique-complete-guide.webp&w=1080&q=75&dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV 1080w, /_next/image?url=%2Fblog%2Fpomodoro-technique-complete-guide.webp&w=1200&q=75&dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV 1200w, /_next/image?url=%2Fblog%2Fpomodoro-technique-complete-guide.webp&w=1920&q=75&dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV 1920w, /_next/image?url=%2Fblog%2Fpomodoro-technique-complete-guide.webp&w=2048&q=75&dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV 2048w, /_next/image?url=%2Fblog%2Fpomodoro-technique-complete-guide.webp&w=3840&q=75&dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV 3840w" src="/_next/image?url=%2Fblog%2Fpomodoro-technique-complete-guide.webp&w=3840&q=75&dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV"/></div><div class="flex items-center gap-2 mb-2"><span class="text-[10px] font-medium uppercase tracking-widest text-[#e8592f]">Productivity</span><span class="text-[10px] text-[#999]">·</span><span class="text-[10px] text-[#999]">8 min</span></div><h3 class="text-sm md:text-base font-medium text-[var(--braun-text)] group-hover:text-[#e8592f] transition-colors leading-snug">Pomodoro technique: a complete guide to focused work</h3><p class="text-[var(--braun-text-muted)] mt-1.5 text-xs leading-relaxed line-clamp-2 flex-1">Learn the Pomodoro technique - a proven time management method using 25-minute focused intervals. Step-by-step guide with tips, science, and a free timer.</p></a><a class="braun-panel p-4 md:p-5 group hover:shadow-md transition-shadow flex flex-col" href="/blog/stay-focused-working-from-home"><div class="w-full rounded-xl overflow-hidden aspect-[1.6/1] mb-3 relative"><img alt="How to stay focused while working from home" loading="lazy" decoding="async" data-nimg="fill" class="object-cover" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw" srcSet="/_next/image?url=%2Fblog%2Fstay-focused-working-from-home.webp&w=256&q=75&dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV 256w, /_next/image?url=%2Fblog%2Fstay-focused-working-from-home.webp&w=384&q=75&dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV 384w, /_next/image?url=%2Fblog%2Fstay-focused-working-from-home.webp&w=640&q=75&dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV 640w, /_next/image?url=%2Fblog%2Fstay-focused-working-from-home.webp&w=750&q=75&dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV 750w, /_next/image?url=%2Fblog%2Fstay-focused-working-from-home.webp&w=828&q=75&dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV 828w, /_next/image?url=%2Fblog%2Fstay-focused-working-from-home.webp&w=1080&q=75&dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV 1080w, /_next/image?url=%2Fblog%2Fstay-focused-working-from-home.webp&w=1200&q=75&dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV 1200w, /_next/image?url=%2Fblog%2Fstay-focused-working-from-home.webp&w=1920&q=75&dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV 1920w, /_next/image?url=%2Fblog%2Fstay-focused-working-from-home.webp&w=2048&q=75&dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV 2048w, /_next/image?url=%2Fblog%2Fstay-focused-working-from-home.webp&w=3840&q=75&dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV 3840w" src="/_next/image?url=%2Fblog%2Fstay-focused-working-from-home.webp&w=3840&q=75&dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV"/></div><div class="flex items-center gap-2 mb-2"><span class="text-[10px] font-medium uppercase tracking-widest text-[#e8592f]">Productivity</span><span class="text-[10px] text-[#999]">·</span><span class="text-[10px] text-[#999]">7 min</span></div><h3 class="text-sm md:text-base font-medium text-[var(--braun-text)] group-hover:text-[#e8592f] transition-colors leading-snug">How to stay focused while working from home</h3><p class="text-[var(--braun-text-muted)] mt-1.5 text-xs leading-relaxed line-clamp-2 flex-1">Practical strategies to maintain focus and productivity when working remotely. Timer-based techniques, environment setup, and daily routine tips.</p></a></div></section></div></div></main><footer class="mt-auto bg-[#1a1a1a] border-t border-[#111111] print:hidden"><div class="mx-auto max-w-7xl px-4 md:px-6 lg:px-8 py-8 md:py-10"><div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-sm"><div><h3 class="text-xs font-semibold text-[#7a7a76] uppercase tracking-[0.15em] mb-4">Popular Timers</h3><ul class="space-y-2.5"><li><a class="text-[#999996] hover:text-[#e8592f] transition-colors text-sm" href="/timer/1-minute-timer">1 minute timer</a></li><li><a class="text-[#999996] hover:text-[#e8592f] transition-colors text-sm" href="/timer/5-minute-timer">5 minute timer</a></li><li><a class="text-[#999996] hover:text-[#e8592f] transition-colors text-sm" href="/timer/10-minute-timer">10 minute timer</a></li><li><a class="text-[#999996] hover:text-[#e8592f] transition-colors text-sm" href="/timer/15-minute-timer">15 minute timer</a></li><li><a class="text-[#999996] hover:text-[#e8592f] transition-colors text-sm" href="/timer/25-minute-timer">25 minute timer</a></li><li><a class="text-[#999996] hover:text-[#e8592f] transition-colors text-sm" href="/timer/30-minute-timer">30 minute timer</a></li></ul></div><div><h3 class="text-xs font-semibold text-[#7a7a76] uppercase tracking-[0.15em] mb-4">Countdowns</h3><ul class="space-y-2.5"><li><a class="text-[#999996] hover:text-[#e8592f] transition-colors text-sm capitalize" href="/days-until/christmas">christmas</a></li><li><a class="text-[#999996] hover:text-[#e8592f] transition-colors text-sm capitalize" href="/days-until/halloween">halloween</a></li><li><a class="text-[#999996] hover:text-[#e8592f] transition-colors text-sm capitalize" href="/days-until/new-years">new years</a></li><li><a class="text-[#999996] hover:text-[#e8592f] transition-colors text-sm capitalize" href="/days-until/thanksgiving">thanksgiving</a></li><li><a class="text-[#999996] hover:text-[#e8592f] transition-colors text-sm capitalize" href="/days-until/easter">easter</a></li><li><a class="text-[#999996] hover:text-[#e8592f] transition-colors text-sm capitalize" href="/days-until/valentines-day">valentines day</a></li></ul></div><div><h3 class="text-xs font-semibold text-[#7a7a76] uppercase tracking-[0.15em] mb-4">Tools</h3><ul class="space-y-2.5"><li><a class="text-[#999996] hover:text-[#e8592f] transition-colors text-sm" href="/date-calculator">Date calculators</a></li><li><a class="text-[#999996] hover:text-[#e8592f] transition-colors text-sm" href="/world-clock">World clock</a></li><li><a class="text-[#999996] hover:text-[#e8592f] transition-colors text-sm" href="/sunrise-sunset">Sunrise & sunset</a></li><li><a class="text-[#999996] hover:text-[#e8592f] transition-colors text-sm" href="/prayer-times">Prayer times</a></li><li><a class="text-[#999996] hover:text-[#e8592f] transition-colors text-sm" href="/moon-phases">Moon phases</a></li><li><a class="text-[#999996] hover:text-[#e8592f] transition-colors text-sm" href="/calendar">Calendar 2026</a></li><li><a class="text-[#999996] hover:text-[#e8592f] transition-colors text-sm" href="/breathing-timer">Breathing timer</a></li><li><a class="text-[#999996] hover:text-[#e8592f] transition-colors text-sm" href="/fitness-timer">Fitness timer</a></li><li><a class="text-[#999996] hover:text-[#e8592f] transition-colors text-sm" href="/pomodoro-timer">Pomodoro timer</a></li><li><a class="text-[#999996] hover:text-[#e8592f] transition-colors text-sm" href="/tea-timer">Tea timer</a></li><li><a class="text-[#999996] hover:text-[#e8592f] transition-colors text-sm" href="/cooking-timer">Cooking timer</a></li><li><a class="text-[#999996] hover:text-[#e8592f] transition-colors text-sm" href="/chess-timer">Chess timer</a></li><li><a class="text-[#999996] hover:text-[#e8592f] transition-colors text-sm" href="/embed">Embed timers</a></li></ul></div><div><h3 class="text-xs font-semibold text-[#7a7a76] uppercase tracking-[0.15em] mb-4">More</h3><ul class="space-y-2.5"><li><a class="text-[#999996] hover:text-[#e8592f] transition-colors text-sm" href="/test-dates">Test dates</a></li><li><a class="text-[#999996] hover:text-[#e8592f] transition-colors text-sm" href="/caffeine-calculator">Caffeine calculator</a></li><li><a class="text-[#999996] hover:text-[#e8592f] transition-colors text-sm" href="/life-stats">Life stats</a></li><li><a class="text-[#999996] hover:text-[#e8592f] transition-colors text-sm" href="/long-weekends">Long weekends</a></li><li><a class="text-[#999996] hover:text-[#e8592f] transition-colors text-sm" href="/astronomy">Astronomy events</a></li><li><a class="text-[#999996] hover:text-[#e8592f] transition-colors text-sm" href="/blog">Blog</a></li></ul><h3 class="text-xs font-semibold text-[#7a7a76] uppercase tracking-[0.15em] mt-6 mb-4">Info</h3><ul class="space-y-2.5"><li><a class="text-[#999996] hover:text-[#e8592f] transition-colors text-sm" href="/about">About</a></li><li><a class="text-[#999996] hover:text-[#e8592f] transition-colors text-sm" href="/privacy">Privacy policy</a></li><li><a class="text-[#999996] hover:text-[#e8592f] transition-colors text-sm" href="/terms">Terms of use</a></li><li><a class="text-[#999996] hover:text-[#e8592f] transition-colors text-sm" href="/contact">Contact</a></li></ul></div></div><div class="mt-10 pt-6 border-t border-[#2a2a2a] flex flex-wrap items-center justify-between gap-4"><div class="flex items-center gap-2"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" class="text-[#e8592f]" aria-label="Timerjoy logo"><circle cx="10" cy="10" r="8.8" stroke="currentColor" stroke-width="1.2"></circle><circle cx="7.4" cy="8.8" r="0.8999999999999999" fill="currentColor"></circle><circle cx="12.6" cy="8.8" r="0.8999999999999999" fill="currentColor"></circle><path d="M6.8,11.6 Q10,15.2 13.2,11.6" stroke="currentColor" stroke-width="0.96" stroke-linecap="round" fill="none"></path></svg><span class="text-xs text-[#7a7a76]">© 2026 Timerjoy</span></div><div class="flex items-center gap-4 text-xs text-[#7a7a76]"><a href="https://x.com/cyril_uxion" rel="me noopener" target="_blank" class="hover:text-[#e8592f] transition-colors">X</a><a href="https://github.com/Cyril-Ye" rel="me noopener" target="_blank" class="hover:text-[#e8592f] transition-colors">GitHub</a><a href="https://mastodon.social/@cyril_ye" rel="me noopener" target="_blank" class="hover:text-[#e8592f] transition-colors">Mastodon</a></div><span class="text-xs text-[#555553] tracking-[0.2em] uppercase hidden sm:inline">Designed for function</span></div></div></footer><script src="/_next/static/chunks/0z025ui0g6l0a.js?dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV" id="_R_" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[31362,[\"/_next/static/chunks/09.waaz3g2ij~.js?dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV\"],\"default\"]\n3:I[2971,[\"/_next/static/chunks/09.waaz3g2ij~.js?dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV\"],\"default\"]\n4:I[39756,[\"/_next/static/chunks/01xlw8hd842-c.js?dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV\",\"/_next/static/chunks/0d3shmwh5_nmn.js?dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV\"],\"default\"]\n5:I[16868,[\"/_next/static/chunks/09.waaz3g2ij~.js?dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV\",\"/_next/static/chunks/0x87fb7kg-07q.js?dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV\"],\"default\"]\n6:I[37457,[\"/_next/static/chunks/01xlw8hd842-c.js?dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV\",\"/_next/static/chunks/0d3shmwh5_nmn.js?dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV\"],\"default\"]\n7:I[22016,[\"/_next/static/chunks/09.waaz3g2ij~.js?dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV\",\"/_next/static/chunks/0i2at~.36z4nm.js?dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV\"],\"\"]\n16:I[68027,[\"/_next/static/chunks/09.waaz3g2ij~.js?dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV\"],\"default\",1]\n:HL[\"/_next/static/chunks/0-kh0kek_8zv8.css?dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV\",\"style\"]\n:HL[\"/_next/static/media/83afe278b6a6bb3c-s.p.0q-301v4kxxnr.woff2?dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"c\":[\"\",\"blog\",\"how-to-embed-timerjoy-on-your-website\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"blog\",{\"children\":[[\"slug\",\"how-to-embed-timerjoy-on-your-website\",\"d\",null],{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",16],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/0-kh0kek_8zv8.css?dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/09.waaz3g2ij~.js?dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"inter_5972bc34-module__OU16Qa__className antialiased min-h-screen flex flex-col\",\"children\":[[\"$\",\"$L2\",null,{}],[\"$\",\"$L3\",null,{}],[\"$\",\"main\",null,{\"className\":\"flex-1\",\"children\":[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{\"children\":[\"$\",\"$L6\",null,{}]}],\"templateStyles\":[],\"templateScripts\":[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/0x87fb7kg-07q.js?dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV\",\"async\":true}]],\"notFound\":[[\"$\",\"div\",null,{\"className\":\"mx-auto max-w-7xl px-4 md:px-6 lg:px-8 py-8\",\"children\":[\"$\",\"div\",null,{\"className\":\"braun-panel p-8 md:p-12 text-center\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center justify-center gap-2 mb-6\",\"children\":[[\"$\",\"span\",null,{\"className\":\"braun-indicator braun-indicator-off\"}],[\"$\",\"span\",null,{\"className\":\"text-xs font-medium text-[#555553] uppercase tracking-[0.2em]\",\"children\":\"Error 404\"}]]}],[\"$\",\"div\",null,{\"className\":\"braun-display inline-block px-8 py-6 mb-8\",\"children\":[\"$\",\"span\",null,{\"className\":\"text-5xl md:text-7xl font-light text-[#e8e8e4] font-mono\",\"children\":\"404\"}]}],[\"$\",\"h1\",null,{\"className\":\"text-2xl md:text-3xl font-light text-[var(--braun-text)] tracking-tight mb-3\",\"children\":\"Page not found\"}],[\"$\",\"p\",null,{\"className\":\"text-[var(--braun-text-muted)] mb-8 text-base\",\"children\":\"The page you're looking for doesn't exist or has been moved.\"}],[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-3 justify-center\",\"children\":[[\"$\",\"$L7\",null,{\"href\":\"/\",\"className\":\"braun-btn braun-btn-orange px-6 py-2.5 text-sm\",\"children\":\"Go home\"}],[\"$\",\"$L7\",null,{\"href\":\"/timer/5-minute-timer\",\"className\":\"braun-btn braun-btn-silver px-6 py-2.5 text-sm\",\"children\":\"Start a timer\"}]]}]]}]}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}],[\"$\",\"footer\",null,{\"className\":\"mt-auto bg-[#1a1a1a] border-t border-[#111111] print:hidden\",\"children\":[\"$\",\"div\",null,{\"className\":\"mx-auto max-w-7xl px-4 md:px-6 lg:px-8 py-8 md:py-10\",\"children\":[[\"$\",\"div\",null,{\"className\":\"grid grid-cols-2 md:grid-cols-4 gap-8 text-sm\",\"children\":[[\"$\",\"div\",null,{\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-xs font-semibold text-[#7a7a76] uppercase tracking-[0.15em] mb-4\",\"children\":\"Popular Timers\"}],[\"$\",\"ul\",null,{\"className\":\"space-y-2.5\",\"children\":[[\"$\",\"li\",\"1\",{\"children\":[\"$\",\"$L7\",null,{\"href\":\"/timer/1-minute-timer\",\"className\":\"text-[#999996] hover:text-[#e8592f] transition-colors text-sm\",\"children\":[\"1\",\" minute timer\"]}]}],[\"$\",\"li\",\"5\",{\"children\":[\"$\",\"$L7\",null,{\"href\":\"/timer/5-minute-timer\",\"className\":\"text-[#999996] hover:text-[#e8592f] transition-colors text-sm\",\"children\":[\"5\",\" minute timer\"]}]}],[\"$\",\"li\",\"10\",{\"children\":[\"$\",\"$L7\",null,{\"href\":\"/timer/10-minute-timer\",\"className\":\"text-[#999996] hover:text-[#e8592f] transition-colors text-sm\",\"children\":[\"10\",\" minute timer\"]}]}],[\"$\",\"li\",\"15\",{\"children\":[\"$\",\"$L7\",null,{\"href\":\"/timer/15-minute-timer\",\"className\":\"text-[#999996] hover:text-[#e8592f] transition-colors text-sm\",\"children\":[\"15\",\" minute timer\"]}]}],[\"$\",\"li\",\"25\",{\"children\":[\"$\",\"$L7\",null,{\"href\":\"/timer/25-minute-timer\",\"className\":\"text-[#999996] hover:text-[#e8592f] transition-colors text-sm\",\"children\":[\"25\",\" minute timer\"]}]}],[\"$\",\"li\",\"30\",{\"children\":[\"$\",\"$L7\",null,{\"href\":\"/timer/30-minute-timer\",\"className\":\"text-[#999996] hover:text-[#e8592f] transition-colors text-sm\",\"children\":[\"30\",\" minute timer\"]}]}]]}]]}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-xs font-semibold text-[#7a7a76] uppercase tracking-[0.15em] mb-4\",\"children\":\"Countdowns\"}],[\"$\",\"ul\",null,{\"className\":\"space-y-2.5\",\"children\":[[\"$\",\"li\",\"christmas\",{\"children\":\"$L8\"}],\"$L9\",\"$La\",\"$Lb\",\"$Lc\",\"$Ld\"]}]]}],\"$Le\",\"$Lf\"]}],\"$L10\"]}]}]]}]}]]}],{\"children\":[\"$L11\",{\"children\":[\"$L12\",{\"children\":[\"$L13\",{},null,false,null]},null,false,\"$@14\"]},null,false,\"$@14\"]},null,false,null],\"$L15\",false]],\"m\":\"$undefined\",\"G\":[\"$16\",[\"$L17\"]],\"S\":true,\"h\":null,\"s\":\"$undefined\",\"l\":\"$undefined\",\"p\":\"$undefined\",\"d\":\"$undefined\"}\n"])</script><script>self.__next_f.push([1,"19:I[97367,[\"/_next/static/chunks/01xlw8hd842-c.js?dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV\",\"/_next/static/chunks/0d3shmwh5_nmn.js?dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV\"],\"OutletBoundary\"]\n1a:\"$Sreact.suspense\"\n1d:I[97367,[\"/_next/static/chunks/01xlw8hd842-c.js?dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV\",\"/_next/static/chunks/0d3shmwh5_nmn.js?dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV\"],\"ViewportBoundary\"]\n1f:I[97367,[\"/_next/static/chunks/01xlw8hd842-c.js?dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV\",\"/_next/static/chunks/0d3shmwh5_nmn.js?dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV\"],\"MetadataBoundary\"]\n8:[\"$\",\"$L7\",null,{\"href\":\"/days-until/christmas\",\"className\":\"text-[#999996] hover:text-[#e8592f] transition-colors text-sm capitalize\",\"children\":\"christmas\"}]\n9:[\"$\",\"li\",\"halloween\",{\"children\":[\"$\",\"$L7\",null,{\"href\":\"/days-until/halloween\",\"className\":\"text-[#999996] hover:text-[#e8592f] transition-colors text-sm capitalize\",\"children\":\"halloween\"}]}]\na:[\"$\",\"li\",\"new-years\",{\"children\":[\"$\",\"$L7\",null,{\"href\":\"/days-until/new-years\",\"className\":\"text-[#999996] hover:text-[#e8592f] transition-colors text-sm capitalize\",\"children\":\"new years\"}]}]\nb:[\"$\",\"li\",\"thanksgiving\",{\"children\":[\"$\",\"$L7\",null,{\"href\":\"/days-until/thanksgiving\",\"className\":\"text-[#999996] hover:text-[#e8592f] transition-colors text-sm capitalize\",\"children\":\"thanksgiving\"}]}]\nc:[\"$\",\"li\",\"easter\",{\"children\":[\"$\",\"$L7\",null,{\"href\":\"/days-until/easter\",\"className\":\"text-[#999996] hover:text-[#e8592f] transition-colors text-sm capitalize\",\"children\":\"easter\"}]}]\nd:[\"$\",\"li\",\"valentines-day\",{\"children\":[\"$\",\"$L7\",null,{\"href\":\"/days-until/valentines-day\",\"className\":\"text-[#999996] hover:text-[#e8592f] transition-colors text-sm capitalize\",\"children\":\"valentines day\"}]}]\n"])</script><script>self.__next_f.push([1,"e:[\"$\",\"div\",null,{\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-xs font-semibold text-[#7a7a76] uppercase tracking-[0.15em] mb-4\",\"children\":\"Tools\"}],[\"$\",\"ul\",null,{\"className\":\"space-y-2.5\",\"children\":[[\"$\",\"li\",null,{\"children\":[\"$\",\"$L7\",null,{\"href\":\"/date-calculator\",\"className\":\"text-[#999996] hover:text-[#e8592f] transition-colors text-sm\",\"children\":\"Date calculators\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L7\",null,{\"href\":\"/world-clock\",\"className\":\"text-[#999996] hover:text-[#e8592f] transition-colors text-sm\",\"children\":\"World clock\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L7\",null,{\"href\":\"/sunrise-sunset\",\"className\":\"text-[#999996] hover:text-[#e8592f] transition-colors text-sm\",\"children\":\"Sunrise \u0026 sunset\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L7\",null,{\"href\":\"/prayer-times\",\"className\":\"text-[#999996] hover:text-[#e8592f] transition-colors text-sm\",\"children\":\"Prayer times\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L7\",null,{\"href\":\"/moon-phases\",\"className\":\"text-[#999996] hover:text-[#e8592f] transition-colors text-sm\",\"children\":\"Moon phases\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L7\",null,{\"href\":\"/calendar\",\"className\":\"text-[#999996] hover:text-[#e8592f] transition-colors text-sm\",\"children\":[\"Calendar \",2026]}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L7\",null,{\"href\":\"/breathing-timer\",\"className\":\"text-[#999996] hover:text-[#e8592f] transition-colors text-sm\",\"children\":\"Breathing timer\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L7\",null,{\"href\":\"/fitness-timer\",\"className\":\"text-[#999996] hover:text-[#e8592f] transition-colors text-sm\",\"children\":\"Fitness timer\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L7\",null,{\"href\":\"/pomodoro-timer\",\"className\":\"text-[#999996] hover:text-[#e8592f] transition-colors text-sm\",\"children\":\"Pomodoro timer\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L7\",null,{\"href\":\"/tea-timer\",\"className\":\"text-[#999996] hover:text-[#e8592f] transition-colors text-sm\",\"children\":\"Tea timer\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L7\",null,{\"href\":\"/cooking-timer\",\"className\":\"text-[#999996] hover:text-[#e8592f] transition-colors text-sm\",\"children\":\"Cooking timer\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L7\",null,{\"href\":\"/chess-timer\",\"className\":\"text-[#999996] hover:text-[#e8592f] transition-colors text-sm\",\"children\":\"Chess timer\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L7\",null,{\"href\":\"/embed\",\"className\":\"text-[#999996] hover:text-[#e8592f] transition-colors text-sm\",\"children\":\"Embed timers\"}]}]]}]]}]\n"])</script><script>self.__next_f.push([1,"f:[\"$\",\"div\",null,{\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-xs font-semibold text-[#7a7a76] uppercase tracking-[0.15em] mb-4\",\"children\":\"More\"}],[\"$\",\"ul\",null,{\"className\":\"space-y-2.5\",\"children\":[[\"$\",\"li\",null,{\"children\":[\"$\",\"$L7\",null,{\"href\":\"/test-dates\",\"className\":\"text-[#999996] hover:text-[#e8592f] transition-colors text-sm\",\"children\":\"Test dates\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L7\",null,{\"href\":\"/caffeine-calculator\",\"className\":\"text-[#999996] hover:text-[#e8592f] transition-colors text-sm\",\"children\":\"Caffeine calculator\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L7\",null,{\"href\":\"/life-stats\",\"className\":\"text-[#999996] hover:text-[#e8592f] transition-colors text-sm\",\"children\":\"Life stats\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L7\",null,{\"href\":\"/long-weekends\",\"className\":\"text-[#999996] hover:text-[#e8592f] transition-colors text-sm\",\"children\":\"Long weekends\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L7\",null,{\"href\":\"/astronomy\",\"className\":\"text-[#999996] hover:text-[#e8592f] transition-colors text-sm\",\"children\":\"Astronomy events\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L7\",null,{\"href\":\"/blog\",\"className\":\"text-[#999996] hover:text-[#e8592f] transition-colors text-sm\",\"children\":\"Blog\"}]}]]}],[\"$\",\"h3\",null,{\"className\":\"text-xs font-semibold text-[#7a7a76] uppercase tracking-[0.15em] mt-6 mb-4\",\"children\":\"Info\"}],[\"$\",\"ul\",null,{\"className\":\"space-y-2.5\",\"children\":[[\"$\",\"li\",null,{\"children\":[\"$\",\"$L7\",null,{\"href\":\"/about\",\"className\":\"text-[#999996] hover:text-[#e8592f] transition-colors text-sm\",\"children\":\"About\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L7\",null,{\"href\":\"/privacy\",\"className\":\"text-[#999996] hover:text-[#e8592f] transition-colors text-sm\",\"children\":\"Privacy policy\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L7\",null,{\"href\":\"/terms\",\"className\":\"text-[#999996] hover:text-[#e8592f] transition-colors text-sm\",\"children\":\"Terms of use\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L7\",null,{\"href\":\"/contact\",\"className\":\"text-[#999996] hover:text-[#e8592f] transition-colors text-sm\",\"children\":\"Contact\"}]}]]}]]}]\n"])</script><script>self.__next_f.push([1,"10:[\"$\",\"div\",null,{\"className\":\"mt-10 pt-6 border-t border-[#2a2a2a] flex flex-wrap items-center justify-between gap-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2\",\"children\":[[\"$\",\"svg\",null,{\"width\":20,\"height\":20,\"viewBox\":\"0 0 20 20\",\"fill\":\"none\",\"className\":\"text-[#e8592f]\",\"aria-label\":\"Timerjoy logo\",\"children\":[[\"$\",\"circle\",null,{\"cx\":10,\"cy\":10,\"r\":8.8,\"stroke\":\"currentColor\",\"strokeWidth\":1.2}],[\"$\",\"circle\",null,{\"cx\":7.4,\"cy\":8.8,\"r\":0.8999999999999999,\"fill\":\"currentColor\"}],[\"$\",\"circle\",null,{\"cx\":12.6,\"cy\":8.8,\"r\":0.8999999999999999,\"fill\":\"currentColor\"}],[\"$\",\"path\",null,{\"d\":\"M6.8,11.6 Q10,15.2 13.2,11.6\",\"stroke\":\"currentColor\",\"strokeWidth\":0.96,\"strokeLinecap\":\"round\",\"fill\":\"none\"}]]}],[\"$\",\"span\",null,{\"className\":\"text-xs text-[#7a7a76]\",\"children\":[\"© \",2026,\" Timerjoy\"]}]]}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-4 text-xs text-[#7a7a76]\",\"children\":[[\"$\",\"a\",null,{\"href\":\"https://x.com/cyril_uxion\",\"rel\":\"me noopener\",\"target\":\"_blank\",\"className\":\"hover:text-[#e8592f] transition-colors\",\"children\":\"X\"}],[\"$\",\"a\",null,{\"href\":\"https://github.com/Cyril-Ye\",\"rel\":\"me noopener\",\"target\":\"_blank\",\"className\":\"hover:text-[#e8592f] transition-colors\",\"children\":\"GitHub\"}],[\"$\",\"a\",null,{\"href\":\"https://mastodon.social/@cyril_ye\",\"rel\":\"me noopener\",\"target\":\"_blank\",\"className\":\"hover:text-[#e8592f] transition-colors\",\"children\":\"Mastodon\"}]]}],[\"$\",\"span\",null,{\"className\":\"text-xs text-[#555553] tracking-[0.2em] uppercase hidden sm:inline\",\"children\":\"Designed for function\"}]]}]\n"])</script><script>self.__next_f.push([1,"11:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\n12:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\n13:[\"$\",\"$1\",\"c\",{\"children\":[\"$L18\",[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/0i2at~.36z4nm.js?dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$L19\",null,{\"children\":[\"$\",\"$1a\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@1b\"}]}]]}]\n1c:[]\n14:\"$W1c\"\n15:[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$L1d\",null,{\"children\":\"$L1e\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$L1f\",null,{\"children\":[\"$\",\"$1a\",null,{\"name\":\"Next.Metadata\",\"children\":\"$L20\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}]\n17:[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/0-kh0kek_8zv8.css?dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]\n"])</script><script>self.__next_f.push([1,"21:T57e,"])</script><script>self.__next_f.push([1,"{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"headline\":\"How to embed free timers on your website, blog, or Notion page\",\"description\":\"Step-by-step guide to embedding countdown timers, Pomodoro timers, and stopwatch widgets on any website. Free iframe code — no sign-up needed.\",\"url\":\"https://timerjoy.com/blog/how-to-embed-timerjoy-on-your-website\",\"datePublished\":\"2026-02-23\",\"dateModified\":\"2026-02-23\",\"image\":\"https://timerjoy.com/blog/how-to-embed-timerjoy-on-your-website.webp\",\"inLanguage\":\"en\",\"author\":{\"@type\":\"Person\",\"name\":\"Cyril Yevdokimov\",\"jobTitle\":\"Senior Product Designer\",\"description\":\"Senior Product Designer with 10+ years building tools that get used. Founded Timerjoy after his own search for a clean, fast, no-signup timer app turned up only ad-laden alternatives. Designs in the Dieter Rams / Braun tradition: every element earns its place.\",\"url\":\"https://timerjoy.com/about\",\"knowsAbout\":[\"Product design\",\"User experience design\",\"Time management tools\",\"Productivity systems\",\"Pomodoro technique\",\"Interval training timing\",\"Web typography\",\"Information architecture\"],\"sameAs\":[\"https://x.com/cyril_uxion\",\"https://github.com/Cyril-Ye\",\"https://mastodon.social/@cyril_ye\",\"https://peerlist.io/cyril_ye\"]},\"publisher\":{\"@type\":\"Organization\",\"name\":\"Timerjoy\",\"url\":\"https://timerjoy.com\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https://timerjoy.com/icon.svg\"}}}"])</script><script>self.__next_f.push([1,"18:[[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"$21\"}}],[\"$\",\"div\",null,{\"className\":\"mx-auto max-w-7xl px-4 md:px-6 lg:px-8 pt-8 md:pt-12 pb-12 md:pb-16\",\"children\":[[[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"BreadcrumbList\\\",\\\"itemListElement\\\":[{\\\"@type\\\":\\\"ListItem\\\",\\\"position\\\":1,\\\"name\\\":\\\"Home\\\",\\\"item\\\":\\\"https://timerjoy.com\\\"},{\\\"@type\\\":\\\"ListItem\\\",\\\"position\\\":2,\\\"name\\\":\\\"Blog\\\",\\\"item\\\":\\\"https://timerjoy.com/blog\\\"},{\\\"@type\\\":\\\"ListItem\\\",\\\"position\\\":3,\\\"name\\\":\\\"How to embed free timers on your website, blog, or Notion page\\\"}]}\"}}],[\"$\",\"nav\",null,{\"aria-label\":\"Breadcrumb\",\"className\":\"mb-5 flex items-center gap-1.5 text-[12px] text-[var(--braun-text-muted)]\",\"children\":[[\"$\",\"$L7\",null,{\"href\":\"/\",\"className\":\"hover:text-[var(--braun-text)] transition-colors\",\"children\":\"Home\"}],[[\"$\",\"span\",\"0\",{\"className\":\"flex items-center gap-1.5 min-w-0\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-[var(--braun-silver)]\",\"children\":\"›\"}],[\"$\",\"$L7\",null,{\"href\":\"/blog\",\"className\":\"hover:text-[var(--braun-text)] transition-colors whitespace-nowrap\",\"children\":\"Blog\"}]]}],[\"$\",\"span\",\"1\",{\"className\":\"flex items-center gap-1.5 min-w-0\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-[var(--braun-silver)]\",\"children\":\"›\"}],[\"$\",\"span\",null,{\"className\":\"text-[var(--braun-text)] truncate\",\"children\":\"How to embed free timers on your website, blog, or Notion page\"}]]}]]]}]],[\"$\",\"article\",null,{\"className\":\"braun-panel p-6 md:p-10\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-3 mb-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"braun-indicator braun-indicator-off\"}],[\"$\",\"span\",null,{\"className\":\"text-xs text-[#555553] uppercase tracking-widest\",\"children\":\"Productivity\"}],[\"$\",\"span\",null,{\"className\":\"text-xs text-[#999]\",\"children\":\"·\"}],[\"$\",\"span\",null,{\"className\":\"text-xs text-[#999]\",\"children\":[7,\" min read\"]}]]}],[\"$\",\"h1\",null,{\"className\":\"text-2xl md:text-4xl font-light tracking-tight text-[var(--braun-text)] mb-6 leading-tight\",\"children\":\"How to embed free timers on your website, blog, or Notion page\"}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-3 text-xs text-[#777] mb-6\",\"children\":[\"$L22\",\"$L23\",\"$L24\"]}],\"$L25\",\"$L26\",\"$L27\",\"$L28\",\"$L29\",\"$L2a\",\"$L2b\"]}],\"$L2c\"]}]]\n"])</script><script>self.__next_f.push([1,"2d:I[5500,[\"/_next/static/chunks/09.waaz3g2ij~.js?dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV\",\"/_next/static/chunks/0i2at~.36z4nm.js?dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV\"],\"Image\"]\n2f:I[23150,[\"/_next/static/chunks/09.waaz3g2ij~.js?dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV\",\"/_next/static/chunks/0i2at~.36z4nm.js?dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV\"],\"default\"]\n22:[\"$\",\"span\",null,{\"children\":[\"By \",[\"$\",\"$L7\",null,{\"href\":\"/about\",\"className\":\"text-[var(--braun-text)] hover:text-[var(--braun-orange)]\",\"children\":\"Cyril Yevdokimov\"}]]}]\n23:[\"$\",\"span\",null,{\"children\":\"·\"}]\n24:[\"$\",\"time\",null,{\"dateTime\":\"2026-02-23\",\"children\":\"February 23, 2026\"}]\n25:[\"$\",\"div\",null,{\"className\":\"w-full rounded-xl overflow-hidden aspect-[2.5/1] mb-6 relative\",\"children\":[\"$\",\"$L2d\",null,{\"src\":\"/blog/how-to-embed-timerjoy-on-your-website.webp\",\"alt\":\"How to embed free timers on your website, blog, or Notion page\",\"fill\":true,\"className\":\"object-cover\",\"sizes\":\"(max-width: 1024px) 100vw, 1024px\"}]}]\n26:[\"$\",\"div\",null,{\"className\":\"braun-groove mb-8\"}]\n2e:T1e13,"])</script><script>self.__next_f.push([1,"\u003ch2\u003eWhy embed a timer on your website?\u003c/h2\u003e\n\u003cp\u003eA timer on your page keeps visitors engaged. Instead of leaving to find a separate timer app, they stay on \u003cem\u003eyour\u003c/em\u003e site. Teachers use embedded classroom timers on Google Sites dashboards. Bloggers add \u003ca href=\"/timer/25-minute-timer\" class=\"text-[#e8592f] hover:underline\"\u003ePomodoro timers\u003c/a\u003e to productivity articles. Developers drop stopwatches into internal tools. The result: more time on page, lower bounce rates, and a useful feature that earns backlinks naturally.\u003c/p\u003e\n\u003cp\u003eTimerjoy's \u003ca href=\"/embed\" class=\"text-[#e8592f] hover:underline\"\u003eembeddable widgets\u003c/a\u003e are free, require no sign-up, and work on any platform that supports iframes — WordPress, Notion, Google Sites, Squarespace, raw HTML, and more.\u003c/p\u003e\n\u003ch2\u003eHow to embed a Timerjoy timer (3 steps)\u003c/h2\u003e\n\u003ch3\u003eStep 1: Choose a preset\u003c/h3\u003e\n\u003cp\u003eGo to the \u003ca href=\"/embed\" class=\"text-[#e8592f] hover:underline\"\u003eEmbed page\u003c/a\u003e and pick a preset — Pomodoro, classroom timer, meeting timer, Tabata, meditation, study session, or stopwatch. Each preset comes with sensible defaults for duration and label.\u003c/p\u003e\n\u003ch3\u003eStep 2: Customize\u003c/h3\u003e\n\u003cp\u003eAdjust the duration, label text, and theme (dark or light). The live preview updates in real time so you see exactly what your visitors will see.\u003c/p\u003e\n\u003ch3\u003eStep 3: Copy and paste\u003c/h3\u003e\n\u003cp\u003eClick \u003cstrong\u003eCopy iframe code\u003c/strong\u003e. You get a standard `\u003ciframe\u003e` snippet ready to paste into any HTML editor, CMS, or embed block.\u003c/p\u003e\n\u003cp\u003eThat's it — three clicks and you have a working timer on your page.\u003c/p\u003e\n\u003ch2\u003ePlatform-specific guides\u003c/h2\u003e\n\u003ch3\u003eWordPress\u003c/h3\u003e\n\u003cp\u003eIn the Gutenberg editor, add a \u003cstrong\u003eCustom HTML\u003c/strong\u003e block. Paste the iframe code from the \u003ca href=\"/embed\" class=\"text-[#e8592f] hover:underline\"\u003eEmbed page\u003c/a\u003e. The timer is responsive and fills the block width automatically. If you use Elementor or other page builders, use their HTML widget instead.\u003c/p\u003e\n\u003ch3\u003eNotion\u003c/h3\u003e\n\u003cp\u003eType `/embed` in any Notion page. Paste the \u003cstrong\u003ewidget URL\u003c/strong\u003e (the `src` attribute from the iframe, not the full HTML tag). Resize the block by dragging the corners. This works in personal wikis, team dashboards, and shared workspaces.\u003c/p\u003e\n\u003ch3\u003eGoogle Sites\u003c/h3\u003e\n\u003cp\u003eClick \u003cstrong\u003eInsert → Embed → Embed code\u003c/strong\u003e. Paste the full iframe snippet. Drag the element to position and resize it. Google Sites supports iframes natively, so the timer works without any plugins.\u003c/p\u003e\n\u003ch3\u003eSquarespace\u003c/h3\u003e\n\u003cp\u003eAdd a \u003cstrong\u003eCode\u003c/strong\u003e block in the section editor. Paste the iframe code. Squarespace renders it as a live widget in preview and published modes.\u003c/p\u003e\n\u003ch3\u003eRaw HTML\u003c/h3\u003e\n\u003cp\u003ePaste the iframe anywhere inside your `\u003cbody\u003e` tag. Set `width` and `height` attributes to match your layout. The widget defaults to `100%` width and `400px` height, but you can adjust both.\u003c/p\u003e\n\u003ch2\u003eAvailable presets\u003c/h2\u003e\n\u003cul\u003e\u003cli\u003e\u003cstrong\u003eClassroom Timer (5 min)\u003c/strong\u003e — perfect for timed activities, transitions, and group work. See our \u003ca href=\"/blog/best-classroom-timers-for-teachers\" class=\"text-[#e8592f] hover:underline\"\u003eclassroom timer guide\u003c/a\u003e for teaching strategies.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003ePomodoro (25 min)\u003c/strong\u003e — the classic \u003ca href=\"/blog/pomodoro-technique-complete-guide\" class=\"text-[#e8592f] hover:underline\"\u003ePomodoro technique\u003c/a\u003e work interval. Embed it in your productivity dashboard.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eTabata (4 min)\u003c/strong\u003e — high-intensity interval timer for fitness pages and workout blogs. Compare with \u003ca href=\"/blog/tabata-vs-hiit-complete-comparison\" class=\"text-[#e8592f] hover:underline\"\u003eHIIT timers\u003c/a\u003e.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eMeeting Timer (30 min)\u003c/strong\u003e — keep meetings on track. Embed in your team's Notion workspace.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eMeditation (10 min)\u003c/strong\u003e — calm countdown for wellness and mindfulness pages. Pairs well with \u003ca href=\"/breathing-timer\" class=\"text-[#e8592f] hover:underline\"\u003ebreathing timers\u003c/a\u003e.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eStudy Session (50 min)\u003c/strong\u003e — long-form focus blocks for \u003ca href=\"/blog/best-study-timer-techniques\" class=\"text-[#e8592f] hover:underline\"\u003estudy technique\u003c/a\u003e articles.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eStopwatch\u003c/strong\u003e — count up instead of down. Great for tracking, demos, and experiments.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eCustom Timer\u003c/strong\u003e — set any duration from 1 to 720 minutes.\u003c/li\u003e\u003c/ul\u003e\n\u003ch2\u003eUse cases: who embeds timers?\u003c/h2\u003e\n\u003cp\u003e\u003cstrong\u003eTeachers\u003c/strong\u003e embed \u003ca href=\"/classroom-timer\" class=\"text-[#e8592f] hover:underline\"\u003eclassroom timers\u003c/a\u003e on Google Sites and Notion dashboards that students access daily. A \u003ca href=\"/visual-timer\" class=\"text-[#e8592f] hover:underline\"\u003evisual timer\u003c/a\u003e on the class page eliminates the need for a separate device.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eBloggers\u003c/strong\u003e add timers to productivity and study guides. A \u003ca href=\"/timer/5-minute-timer\" class=\"text-[#e8592f] hover:underline\"\u003e5-minute timer\u003c/a\u003e in a meditation article or a \u003ca href=\"/timer/25-minute-timer\" class=\"text-[#e8592f] hover:underline\"\u003ePomodoro timer\u003c/a\u003e in a focus guide makes the content interactive and increases time on page.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eCourse creators\u003c/strong\u003e embed timers in lesson modules. A timed writing exercise or quiz countdown keeps students engaged without leaving the learning platform.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eDevelopers\u003c/strong\u003e use the \u003ca href=\"/stopwatch\" class=\"text-[#e8592f] hover:underline\"\u003estopwatch\u003c/a\u003e widget in internal tools, admin dashboards, and demo pages. The iframe approach means zero dependencies — no npm packages, no build steps.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eEvent organizers\u003c/strong\u003e embed countdown timers on event pages. A \u003ca href=\"/timer/60-minute-timer\" class=\"text-[#e8592f] hover:underline\"\u003e60-minute timer\u003c/a\u003e for a webinar or a custom countdown to a launch date keeps visitors returning to check the clock.\u003c/p\u003e\n\u003ch2\u003eTips for getting the most from embedded timers\u003c/h2\u003e\n\u003cul\u003e\u003cli\u003e\u003cstrong\u003eMatch the theme to your site.\u003c/strong\u003e Use the dark theme on dark backgrounds and the light theme on white pages.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eKeep the label descriptive.\u003c/strong\u003e Instead of \"Timer,\" use \"Writing Sprint\" or \"Break Time\" — it helps visitors understand the context instantly.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eSet the right height.\u003c/strong\u003e The default 400px works for most layouts. On mobile-heavy pages, 350px is enough. For hero sections, try 500px.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eLink back to the full tool.\u003c/strong\u003e The widget includes a small \"Timerjoy\" credit link. If you want to give your readers the full experience, link to the \u003ca href=\"/online-timer\" class=\"text-[#e8592f] hover:underline\"\u003eonline timer\u003c/a\u003e or \u003ca href=\"/stopwatch\" class=\"text-[#e8592f] hover:underline\"\u003estopwatch\u003c/a\u003e page.\u003c/li\u003e\u003c/ul\u003e\n\u003ch2\u003eCommon questions\u003c/h2\u003e\n\u003cp\u003e\u003cstrong\u003eDoes the timer keep running if visitors scroll away?\u003c/strong\u003e\u003cbr /\u003eYes. The countdown continues in the iframe even when it's scrolled out of view. The alarm sounds when time is up, as long as the user clicked Start.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eCan I embed multiple timers on the same page?\u003c/strong\u003e\u003cbr /\u003eAbsolutely. Each iframe is independent — you can have a Pomodoro timer and a break timer side by side.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eDoes it affect my page speed?\u003c/strong\u003e\u003cbr /\u003eThe widget is lightweight — under 20KB total. It loads asynchronously in the iframe and doesn't block your page rendering.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eCan I remove the Timerjoy credit link?\u003c/strong\u003e\u003cbr /\u003eThe credit link is small and optional. It helps other people discover the tool, but the timer works the same with or without it.\u003c/p\u003e\n\u003ch2\u003eStart embedding\u003c/h2\u003e\n\u003cp\u003eHead to the \u003ca href=\"/embed\" class=\"text-[#e8592f] hover:underline\"\u003eEmbed page\u003c/a\u003e, pick your preset, customize the settings, and copy the code. In under a minute you'll have a working timer on your website — free, responsive, and zero maintenance.\u003c/p\u003e"])</script><script>self.__next_f.push([1,"27:[\"$\",\"div\",null,{\"className\":\"prose-braun max-w-3xl\",\"dangerouslySetInnerHTML\":{\"__html\":\"$2e\"}}]\n28:[\"$\",\"$L7\",null,{\"href\":\"/embed\",\"className\":\"mt-10 max-w-3xl mx-auto flex items-center gap-5 p-6 md:p-8 rounded-2xl border-2 border-[var(--braun-orange)]/30 bg-[var(--braun-orange)]/[0.04] hover:border-[var(--braun-orange)] hover:bg-[var(--braun-orange)]/[0.08] transition-all group block\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-4xl md:text-5xl shrink-0\",\"children\":\"📦\"}],[\"$\",\"div\",null,{\"className\":\"flex-1 min-w-0\",\"children\":[[\"$\",\"p\",null,{\"className\":\"text-[10px] uppercase tracking-[0.2em] text-[var(--braun-text-muted)] mb-1\",\"children\":\"Try it free\"}],[\"$\",\"p\",null,{\"className\":\"text-lg md:text-xl font-medium text-[var(--braun-text)] group-hover:text-[var(--braun-orange)] transition-colors truncate\",\"children\":\"Embed Timers\"}]]}],[\"$\",\"span\",null,{\"className\":\"shrink-0 braun-btn braun-btn-orange !px-5 !py-2.5 text-sm font-medium whitespace-nowrap\",\"children\":[\"Get embed code\",\" →\"]}]]}]\n29:[\"$\",\"div\",null,{\"className\":\"braun-groove my-8\"}]\n2a:[\"$\",\"div\",null,{\"className\":\"braun-inset p-5 mb-8 not-prose\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex items-start gap-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"shrink-0 w-12 h-12 rounded-full bg-[var(--braun-orange)] text-white flex items-center justify-center text-lg font-light\",\"children\":\"K\"}],[\"$\",\"div\",null,{\"className\":\"flex-1\",\"children\":[[\"$\",\"div\",null,{\"className\":\"text-sm font-medium text-[var(--braun-text)] mb-1\",\"children\":\"Cyril Yevdokimov\"}],[\"$\",\"div\",null,{\"className\":\"text-xs text-[#999] mb-2 uppercase tracking-wider\",\"children\":\"Senior Product Designer · Founder, Timerjoy\"}],[\"$\",\"p\",null,{\"className\":\"text-sm text-[var(--braun-text-muted)] leading-relaxed\",\"children\":[\"Builds tools that get used. Founded Timerjoy after a frustrated search for an ad-free online timer.\",\" \",[\"$\",\"$L7\",null,{\"href\":\"/about\",\"className\":\"text-[var(--braun-orange)] hover:underline\",\"children\":\"More about the project\"}],\".\"]}]]}]]}]}]\n2b:[\"$\",\"$L2f\",null,{\"url\":\"https://timerjoy.com/blog/how-to-embed-timerjoy-on-your-website\",\"title\":\"How to embed free timers on your website, blog, or Notion page\"}]\n"])</script><script>self.__next_f.push([1,"2c:[\"$\",\"section\",null,{\"className\":\"mt-10 md:mt-12\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2 mb-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"braun-indicator braun-indicator-off\"}],[\"$\",\"h2\",null,{\"className\":\"text-xs font-medium text-[#555553] uppercase tracking-[0.2em]\",\"children\":\"Read also\"}]]}],[\"$\",\"div\",null,{\"className\":\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-5\",\"children\":[[\"$\",\"$L7\",\"why-your-pomodoro-timer-drifts\",{\"href\":\"/blog/why-your-pomodoro-timer-drifts\",\"className\":\"braun-panel p-4 md:p-5 group hover:shadow-md transition-shadow flex flex-col\",\"children\":[[\"$\",\"div\",null,{\"className\":\"w-full rounded-xl overflow-hidden aspect-[1.6/1] mb-3 relative\",\"children\":[\"$\",\"$L2d\",null,{\"src\":\"/blog/why-your-pomodoro-timer-drifts.webp\",\"alt\":\"Why your browser-tab Pomodoro timer drifts (and the fix that actually works)\",\"fill\":true,\"className\":\"object-cover\",\"sizes\":\"(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw\"}]}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2 mb-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-[10px] font-medium uppercase tracking-widest text-[#e8592f]\",\"children\":\"Productivity\"}],[\"$\",\"span\",null,{\"className\":\"text-[10px] text-[#999]\",\"children\":\"·\"}],[\"$\",\"span\",null,{\"className\":\"text-[10px] text-[#999]\",\"children\":[10,\" min\"]}]]}],[\"$\",\"h3\",null,{\"className\":\"text-sm md:text-base font-medium text-[var(--braun-text)] group-hover:text-[#e8592f] transition-colors leading-snug\",\"children\":\"Why your browser-tab Pomodoro timer drifts (and the fix that actually works)\"}],[\"$\",\"p\",null,{\"className\":\"text-[var(--braun-text-muted)] mt-1.5 text-xs leading-relaxed line-clamp-2 flex-1\",\"children\":\"setInterval drifts up to 30 seconds in backgrounded tabs because of Chrome throttling. Here's the AudioContext fix that makes browser timers reliable, with code and diagnostics.\"}]]}],[\"$\",\"$L7\",\"pomodoro-technique-complete-guide\",{\"href\":\"/blog/pomodoro-technique-complete-guide\",\"className\":\"braun-panel p-4 md:p-5 group hover:shadow-md transition-shadow flex flex-col\",\"children\":[[\"$\",\"div\",null,{\"className\":\"w-full rounded-xl overflow-hidden aspect-[1.6/1] mb-3 relative\",\"children\":[\"$\",\"$L2d\",null,{\"src\":\"/blog/pomodoro-technique-complete-guide.webp\",\"alt\":\"Pomodoro technique: a complete guide to focused work\",\"fill\":true,\"className\":\"object-cover\",\"sizes\":\"(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw\"}]}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2 mb-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-[10px] font-medium uppercase tracking-widest text-[#e8592f]\",\"children\":\"Productivity\"}],[\"$\",\"span\",null,{\"className\":\"text-[10px] text-[#999]\",\"children\":\"·\"}],[\"$\",\"span\",null,{\"className\":\"text-[10px] text-[#999]\",\"children\":[8,\" min\"]}]]}],[\"$\",\"h3\",null,{\"className\":\"text-sm md:text-base font-medium text-[var(--braun-text)] group-hover:text-[#e8592f] transition-colors leading-snug\",\"children\":\"Pomodoro technique: a complete guide to focused work\"}],[\"$\",\"p\",null,{\"className\":\"text-[var(--braun-text-muted)] mt-1.5 text-xs leading-relaxed line-clamp-2 flex-1\",\"children\":\"Learn the Pomodoro technique - a proven time management method using 25-minute focused intervals. Step-by-step guide with tips, science, and a free timer.\"}]]}],[\"$\",\"$L7\",\"stay-focused-working-from-home\",{\"href\":\"/blog/stay-focused-working-from-home\",\"className\":\"braun-panel p-4 md:p-5 group hover:shadow-md transition-shadow flex flex-col\",\"children\":[[\"$\",\"div\",null,{\"className\":\"w-full rounded-xl overflow-hidden aspect-[1.6/1] mb-3 relative\",\"children\":[\"$\",\"$L2d\",null,{\"src\":\"/blog/stay-focused-working-from-home.webp\",\"alt\":\"How to stay focused while working from home\",\"fill\":true,\"className\":\"object-cover\",\"sizes\":\"(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw\"}]}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2 mb-2\",\"children\":[\"$L30\",\"$L31\",\"$L32\"]}],\"$L33\",\"$L34\"]}]]}]]}]\n"])</script><script>self.__next_f.push([1,"30:[\"$\",\"span\",null,{\"className\":\"text-[10px] font-medium uppercase tracking-widest text-[#e8592f]\",\"children\":\"Productivity\"}]\n31:[\"$\",\"span\",null,{\"className\":\"text-[10px] text-[#999]\",\"children\":\"·\"}]\n32:[\"$\",\"span\",null,{\"className\":\"text-[10px] text-[#999]\",\"children\":[7,\" min\"]}]\n33:[\"$\",\"h3\",null,{\"className\":\"text-sm md:text-base font-medium text-[var(--braun-text)] group-hover:text-[#e8592f] transition-colors leading-snug\",\"children\":\"How to stay focused while working from home\"}]\n34:[\"$\",\"p\",null,{\"className\":\"text-[var(--braun-text-muted)] mt-1.5 text-xs leading-relaxed line-clamp-2 flex-1\",\"children\":\"Practical strategies to maintain focus and productivity when working remotely. Timer-based techniques, environment setup, and daily routine tips.\"}]\n"])</script><script>self.__next_f.push([1,"1e:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script><script>self.__next_f.push([1,"35:I[27201,[\"/_next/static/chunks/01xlw8hd842-c.js?dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV\",\"/_next/static/chunks/0d3shmwh5_nmn.js?dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV\"],\"IconMark\"]\n1b:null\n"])</script><script>self.__next_f.push([1,"20:[[\"$\",\"title\",\"0\",{\"children\":\"How to embed free timers on your website, blog, or Notion page | Timerjoy\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Step-by-step guide to embedding countdown timers, Pomodoro timers, and stopwatch widgets on any website. Free iframe code — no sign-up needed.\"}],[\"$\",\"link\",\"2\",{\"rel\":\"manifest\",\"href\":\"/manifest.webmanifest\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"meta\",\"3\",{\"name\":\"keywords\",\"content\":\"embed timer, timer widget, iframe timer, embed countdown timer, timer for website, pomodoro widget, classroom timer embed, timer for notion\"}],[\"$\",\"meta\",\"4\",{\"name\":\"robots\",\"content\":\"index, follow\"}],[\"$\",\"meta\",\"5\",{\"name\":\"googlebot\",\"content\":\"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1\"}],[\"$\",\"meta\",\"6\",{\"name\":\"theme-color\",\"content\":\"#f4f4f2\"}],[\"$\",\"meta\",\"7\",{\"name\":\"p:domain_verify\",\"content\":\"2e8b8de271c66511849d86e48e5a8d3f\"}],[\"$\",\"link\",\"8\",{\"rel\":\"canonical\",\"href\":\"https://timerjoy.com/blog/how-to-embed-timerjoy-on-your-website\"}],[\"$\",\"meta\",\"9\",{\"property\":\"og:title\",\"content\":\"How to embed free timers on your website, blog, or Notion page\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:description\",\"content\":\"Step-by-step guide to embedding countdown timers, Pomodoro timers, and stopwatch widgets on any website. Free iframe code — no sign-up needed.\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:url\",\"content\":\"https://timerjoy.com/blog/how-to-embed-timerjoy-on-your-website\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:site_name\",\"content\":\"Timerjoy\"}],[\"$\",\"meta\",\"13\",{\"property\":\"og:image\",\"content\":\"https://timerjoy.com/blog/how-to-embed-timerjoy-on-your-website.webp\"}],[\"$\",\"meta\",\"14\",{\"property\":\"og:image:width\",\"content\":\"1792\"}],[\"$\",\"meta\",\"15\",{\"property\":\"og:image:height\",\"content\":\"1024\"}],[\"$\",\"meta\",\"16\",{\"property\":\"og:image:alt\",\"content\":\"How to embed free timers on your website, blog, or Notion page\"}],[\"$\",\"meta\",\"17\",{\"property\":\"og:type\",\"content\":\"article\"}],[\"$\",\"meta\",\"18\",{\"property\":\"article:published_time\",\"content\":\"2026-02-23\"}],[\"$\",\"meta\",\"19\",{\"property\":\"article:author\",\"content\":\"https://timerjoy.com/about\"}],[\"$\",\"meta\",\"20\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"21\",{\"name\":\"twitter:title\",\"content\":\"How to embed free timers on your website, blog, or Notion page\"}],[\"$\",\"meta\",\"22\",{\"name\":\"twitter:description\",\"content\":\"Step-by-step guide to embedding countdown timers, Pomodoro timers, and stopwatch widgets on any website. Free iframe code — no sign-up needed.\"}],[\"$\",\"meta\",\"23\",{\"name\":\"twitter:image\",\"content\":\"https://timerjoy.com/blog/how-to-embed-timerjoy-on-your-website.webp\"}],[\"$\",\"link\",\"24\",{\"rel\":\"icon\",\"href\":\"/favicon.ico?favicon.0x3dzn~oxb6tn.ico?dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV\",\"sizes\":\"256x256\",\"type\":\"image/x-icon\"}],[\"$\",\"link\",\"25\",{\"rel\":\"icon\",\"href\":\"/icon.svg?icon.0hy4zpig8~h0f.svg?dpl=dpl_BGpMkknkzwQENnRfjAd8U25iDxcV\",\"sizes\":\"any\",\"type\":\"image/svg+xml\"}],[\"$\",\"link\",\"26\",{\"rel\":\"apple-touch-icon\",\"href\":\"/apple-icon?417e51602ac1b7b0\",\"alt\":\"$undefined\",\"type\":\"image/png\",\"sizes\":\"180x180\"}],[\"$\",\"$L35\",\"27\",{}]]\n"])</script></body></html>