How to Add a Free Metronome to Any Website (WordPress, Squarespace, Ghost & More)

If you run a music blog, teaching website, or any site about instruments and practice, there's a good chance you've wished you could give your visitors access to a real, working metronome — right on the page, without sending them to a different app or opening a new tab.

Now you can. The TempoFix free embeddable metronome lets you drop a professional, WASM-powered metronome into any webpage with a single line of code. No accounts, no fees, nothing to configure on your end.

Why Embed a Metronome on Your Site?

A metronome isn't passive content — it's something people actually use. Embedding one means:

More time on page: Visitors who interact with a tool stay much longer than those just reading
Real value for your audience: Teachers, students, and hobbyists can practice directly on your site
Something other sites don't offer: Most music sites link out to tools. You can put one in context, right next to your lessons or articles
Better engagement signals: Lower bounce rates and more return visits reflect well on search rankings

The TempoFix Embeddable Metronome

The widget is available at:

https://tempofix.app/tools/metronome/embed

It includes:

✅ BPM control (40–240 BPM) with smooth scrolling
✅ Four time signatures: 2/4, 3/4, 4/4, 6/8
✅ Visual beat indicator with animated accent
✅ WASM-powered precision timing (no drift, no lag)
✅ Dark/light mode (adapts to visitor preference)
✅ Fully responsive — works perfectly on phone, tablet, or desktop
✅ Free to use, no attribution required (though linking back is appreciated!)

The Embed Code

Copy this snippet and paste it anywhere on your site:

<iframe
  src="https://tempofix.app/tools/metronome/embed"
  width="100%"
  height="420"
  style="border: none; border-radius: 12px; display: block;"
  allow="autoplay"
  loading="lazy"
  title="Free Online Metronome by TempoFix"
></iframe>
<p style="text-align: center; font-size: 0.8rem; margin-top: 8px;">
  Free metronome tool by <a href="https://tempofix.app" target="_blank" rel="noopener noreferrer">TempoFix</a>
</p>

💡 You can also find this exact code on the TempoFix metronome page — just click the "Embed on your site" button.

Step-by-Step Instructions for Every Platform

WordPress

Method 1: Block Editor (Gutenberg)

Open the post or page you want to edit
Click the + button to add a new block
Search for "Custom HTML" and select it
Paste the embed code into the block
Click Preview to see the metronome in action
Click Update or Publish

Method 2: Classic Editor

In the editing area, switch to the Text tab (not Visual)
Paste the embed code where you want the metronome to appear
Switch back to Visual to confirm it renders correctly
Save or publish

⚠️ WordPress.com free plan may restrict iframes from external domains. If it doesn't appear, you may need a Business plan or a self-hosted WordPress.org installation.

Squarespace

Navigate to the page you want to edit
Click Edit Page and then click + to add a content block
Choose Embed (or search "Code" for a code block)
Select Code to open the HTML editor
Paste the embed code
Click Apply
Save your page

💡 For Squarespace 7.1, use the HTML block type. The metronome will render in the live preview.

Wix

Open the Wix Editor for your site
Click Add Elements (+) in the left sidebar
Go to Embed & Social → HTML iFrame
A blank HTML embed box will appear on your page
Click the box and select Enter Code
Paste the embed code
Click Update
Drag the embed box to your desired position and resize as needed

💡 Wix iframes can be resized by dragging the corners. Set it to at least 420px tall for the best experience.

Ghost (CMS)

Open the post or page in the Ghost Editor
Click the + button at the start of a new line
Select HTML from the insert menu
Paste the embed code
Click away to render the preview
Publish or update your post

Ghost natively supports HTML cards with full iframe functionality — no plugins needed.

Webflow

Open your project in the Webflow Designer
Drag an Embed element from the Elements panel onto your canvas
Double-click the element to open the code editor
Paste the embed code
Click Save & Close
Publish your site

Notion (with third-party publishing, e.g. Super.so or Potion)

If you publish your Notion pages as a website using a tool like Super.so:

In your Notion document, type /embed and press Enter
Paste the embed URL: https://tempofix.app/tools/metronome/embed
Notion will create an iframe block

Note: Notion's native embed functionality may show a preview or require an interaction to load due to iframe sandboxing. For full functionality, use a publishing tool that renders raw HTML.

Plain HTML Website

If you manage a static site or hand-coded HTML, this is the easiest method:

Open the relevant .html file in your editor
Paste the embed code wherever you want the metronome to appear within the <body> tag
Save and upload to your server

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Music Lessons</title>
</head>
<body>
  <h2>Practice with our online metronome</h2>

  <iframe
    src="https://tempofix.app/tools/metronome/embed"
    width="100%"
    height="420"
    style="border: none; border-radius: 12px; display: block;"
    allow="autoplay"
    loading="lazy"
    title="Free Online Metronome by TempoFix"
  ></iframe>
  <p style="text-align: center; font-size: 0.8rem; margin-top: 8px;">
    Free metronome tool by <a href="https://tempofix.app" target="_blank" rel="noopener noreferrer">TempoFix</a>
  </p>

</body>
</html>

Customization Tips

Adjust the height

The default 420px height is optimized for the full interface. If you want a more compact embed, you can try 360px — but avoid going below 320px as controls may get cut off.

height="360"

Make it fully responsive

The width="100%" in the embed code already makes the iframe fill its container. To ensure a consistent aspect on all screen sizes, you can wrap it in a responsive container:

<div style="max-width: 600px; margin: 0 auto;">
  <iframe
    src="https://tempofix.app/tools/metronome/embed"
    width="100%"
    height="420"
    style="border: none; border-radius: 12px; display: block;"
    allow="autoplay"
    loading="lazy"
    title="Free Online Metronome by TempoFix"
  ></iframe>
</div>

Center it on the page

Add margin: 0 auto; and max-width to center a fixed-width embed:

<div style="max-width: 480px; margin: 32px auto;">
  <!-- paste embed code here -->
</div>

Frequently Asked Questions

Will it work on mobile devices? Yes. The metronome widget is fully mobile-responsive. It adapts its layout for small screens automatically.

Does it require JavaScript from my page? No. The metronome runs entirely inside the iframe with its own scripts. Your page provides only the <iframe> tag.

Does it need the visitor to install anything? No. It runs in the browser, powered by WebAssembly for precision timing — no plugins, no downloads.

Will it affect my page load speed? The loading="lazy" attribute means the iframe won't load until the visitor scrolls near it, so it won't delay your initial page load.

Is the metronome accurate? Yes. The metronome uses a high-precision WASM timing engine — the same engine that powers the TempoFix mobile app.

Is it free forever? Yes, the embed widget is a free tool from TempoFix with no usage limits.

Want the Full Experience?

The embedded metronome covers the essentials — but the full TempoFix app goes quite a bit further:

🎵 Tap Tempo — find the BPM of any song instantly
⏱️ Advanced time signatures — 5/4, 7/8, 9/8, and more
📊 Practice session tracking with detailed analytics
🎸 Chord & scale library for guitar, bass, piano, ukulele
🎵 Ear training — interval and chord recognition
⌚ Apple Watch companion app