How to Embed a Timer Widget on Any Website (No Code Required)

You do not need a developer, a plugin, or a paid subscription. Embedding a free countdown timer, Pomodoro timer, or interval timer on your website takes about 90 seconds — and it works on WordPress, Notion, Squarespace, Wix, Google Sites, Webflow, and any standard HTML page.

This guide covers every major platform with step-by-step instructions for each one.

The Embed Code

Every GoTimer widget is embedded using a standard iframe. Here is the simplest possible version — a 5-minute countdown timer:

<iframe
  src="https://gotimer.org/embed/countdown?duration=300"
  width="480"
  height="400"
  frameborder="0"
  allow="autoplay"
  loading="lazy"
  style="border-radius: 8px;">
</iframe>

Paste this into any HTML editor and you have a working timer. Everything else in this guide is just showing you where to find that HTML editor on each platform.

Customise Your Timer

Adjust the embed URL to change the timer type, appearance, and behaviour. All customisation happens in the URL — no code editing needed beyond swapping out parameter values.

duration — How long the timer runs, in seconds. 300 = 5 minutes, 1500 = 25 minutes (Pomodoro), 3600 = 1 hour.

theme — Visual style of the widget: light, dark, or auto. Auto follows the visitor's system preference and is the best default for most sites.

accent — Highlight colour as a hex code without the # symbol. For example, E86135 gives an orange accent to match your brand.

controls — Which control buttons to show: full (all controls), minimal (start/stop only), or none (display only, no interaction).

branding — How much GoTimer branding to show: full or minimal. Use minimal to keep the focus on the timer itself.

autostart — Set to true to start the timer automatically the moment the widget loads, with no visitor interaction needed.

label — A text label displayed on the timer. Use + instead of spaces — for example, label=Focus+Session shows "Focus Session" on the widget.

Timer types available: countdown, interval (work/rest), chess clock, round timer, Pomodoro, HIIT, and more. Visit the GoTimer embed docs for the full list.

Sizes: 300×250 compact (sidebars) · 480×400 standard (content area) · 640×500 large (full-width)

WordPress

WordPress has two methods. The shortcode is the easiest.

Method 1: Shortcode (Recommended)

Add a timer anywhere using a shortcode — no HTML required:

[gotimer type="countdown" duration="300" theme="dark"]

Place this shortcode in any post, page, or widget area.

Method 2: HTML Block

In the Block Editor (Gutenberg):

1. Click the + button to add a new block
2. Search for HTML and select the Custom HTML block
3. Paste the iframe code into the block
4. Click Preview to confirm the timer appears
5. Publish or update the page

In the Classic Editor, switch to the Text tab (not Visual) and paste the iframe directly into your content.

Notion

Notion does not allow raw iframe HTML, but its native embed feature works perfectly with GoTimer.

1. Open the Notion page where you want the timer
2. Type /embed and select the Embed option from the menu
3. Paste the GoTimer embed URL — for example: https://gotimer.org/embed/countdown?duration=1500&theme=dark
4. Press Embed link

The timer appears inline in your Notion page. Resize it by dragging the corners.

Squarespace

1. In the Squarespace editor, click Edit on the page
2. Click the + button to add a block
3. Scroll down and select Code (under More)
4. Paste the GoTimer iframe code into the code editor
5. Click Apply

The timer appears in your page layout and can be dragged to reposition. Squarespace's free plan may show a placeholder in the editor — the timer renders correctly for visitors on the published site.

Wix

1. In the Wix Editor, click Add Elements (the + icon on the left)
2. Select Embed → Embed a Widget (or Custom Embeds → Embed HTML)
3. Click Enter Code in the element that appears on your canvas
4. Paste the GoTimer iframe code and click Update
5. Resize and reposition the element on your canvas

Google Sites

Google Sites is popular with teachers, educators, and Google Workspace teams. It embeds by URL — no HTML needed.

1. Open your Google Site in edit mode
2. Click Insert in the right panel
3. Select Embed
4. Choose By URL
5. Paste the GoTimer embed URL: https://gotimer.org/embed/countdown?duration=300
6. Click Insert

Resize the timer by dragging its corners in the editor. This works especially well for classroom pages — try embedding a classroom timer directly on your class site.

Webflow

1. In the Webflow Designer, drag an Embed element from the Components panel onto your canvas
2. Double-click the element to open the code editor
3. Paste the GoTimer iframe code
4. Click Save and Close

Webflow's Embed element respects all standard iframe attributes. For responsive sizing, wrap the iframe in a div with percentage-based widths.

Any HTML Website

For static sites, Jekyll blogs, GitHub Pages, or custom CMS setups — paste the iframe wherever you want the timer to appear:

<iframe
  src="https://gotimer.org/embed/countdown?duration=1500&theme=auto&label=Focus+Session"
  width="480"
  height="400"
  frameborder="0"
  allow="autoplay"
  loading="lazy"
  style="border-radius: 8px; display: block; margin: 0 auto;">
</iframe>

The display:block and margin:0 auto CSS centres the timer horizontally on the page.

Live Synchronized Timers

Standard embeds let each visitor control their own timer independently. Live synchronized timers show the same remaining time to all viewers simultaneously — useful for webinars, live classes, and event countdowns.

Add a started parameter with an ISO 8601 timestamp:

<iframe
  src="https://gotimer.org/embed/countdown?duration=3600&started=2026-05-01T09:00:00Z"
  width="480"
  height="400"
  frameborder="0"
  allow="autoplay">
</iframe>

Every visitor sees the same countdown, calculated from the start timestamp. No server required. Timers expire after 24 hours.

Why Embed a Timer Instead of Linking to One?

Linking to GoTimer works — your readers can click through and use the timer on a separate tab. But embedding keeps the experience inside your content, which matters more than it might seem.

A teacher who embeds a countdown timer directly on a Google Sites class page removes the step where a student has to open a new tab, find the timer, and then switch back. The timer is just there, on the page, already running. A blogger writing a HIIT workout guide who embeds the interval timer inline turns a passive article into an interactive session — the reader does not leave to get a timer, they do the workout right there.

Embedded timers are also useful for:

• Presentations and webinar pages — a live countdown shows speakers and audiences exactly how much time is left without requiring anyone to check their phone
• Online courses and LMS pages — timed exercises become genuinely timed when the timer is in the same view as the instructions
• Study notes and personal dashboards — Notion users embed Pomodoro timers directly in their study pages so the timer and the notes are always together
• Recipe and cooking blogs — a pasta timer embedded next to the recipe step removes all friction from the "set a timer for 8 minutes" instruction
• Fitness and training guides — HIIT and Tabata timers embedded in workout articles make the article the actual workout tool

In every case, the timer being on the page rather than on a separate tab reduces friction and increases the chance that visitors actually use it. That is the core argument for embedding over linking.

Which Platform Should You Use?

If you are choosing a platform specifically to embed timers (for example, building a classroom resource site or a coaching page), here is how the platforms compare for ease of embedding:

Easiest: Google Sites and Notion — both accept a URL paste with no HTML involved, which means no chance of making a code mistake. Google Sites is ideal for educators in Google Workspace schools; Notion is ideal for individuals and small teams.

Very easy: WordPress with the GoTimer shortcode — one line, no HTML, works everywhere the shortcode is allowed including widgets, pages, and posts.

Easy: Squarespace, Wix, and Webflow — all use a "code block" or "embed" component that accepts the iframe HTML. The process is slightly more involved but still takes under two minutes.

Any skill level: Standard HTML — if you manage your own HTML files, pasting an iframe is the most flexible option and gives you the most control over sizing and positioning.

For most teachers and bloggers, Google Sites and Notion are the most forgiving options. For WordPress site owners, the shortcode is by far the cleanest approach. For professional developers building client sites, the Webflow or raw HTML method gives full control.

Whichever platform you use, test the embed on a mobile device before publishing. Resize the iframe width if needed — the Standard size (480px wide) can be slightly too wide for some mobile column layouts. Compact (300px) is the safe default for anything that might be viewed on a phone.

Troubleshooting

The timer is not showing up. Check that your platform allows iframes. Some website builders block third-party iframes on certain plan levels. Publish the page and check the live site — some editors show a blank in preview mode only.

The timer is cut off or too small. Adjust the width and height values in the iframe. Use compact size (300×250) for sidebars, standard (480×400) for content columns.

Notion shows "This content is not supported." You are pasting the full iframe HTML. Notion only accepts URLs in its embed block. Copy just the src URL (e.g. https://gotimer.org/embed/countdown?duration=300) and paste that into the Notion embed field instead.

The timer resets when visitors navigate away. This is expected for standard embeds. For persistent timers, use the live synchronized timer with a fixed started timestamp, or link visitors to their own free timer on GoTimer.

Generating Embed Code Automatically

If you would rather not build the URL by hand, GoTimer's API can generate embed code for you. Send a request to the embed endpoint with the timer type and options you want, and it returns the ready-to-paste HTML:

curl "https://gotimer.org/api/v1/timer-url/embed?type=countdown&duration=300&theme=dark&size=standard"

The response includes both the embed URL and a complete HTML snippet. This is useful if you are building a tool, a workflow, or an internal dashboard that generates timer embeds programmatically.

GoTimer also supports the Model Context Protocol (MCP), which means AI assistants like Claude can generate embed code on your behalf using natural language. If you use Claude Desktop, Cursor, or Windsurf, you can ask your AI assistant to generate a timer embed and it will produce the correct iframe code via the GoTimer MCP server. This is the fastest way to create a customised embed without looking up any parameters.