Embed the capo calculator

If you have published a capo chart, your readers are reading a table and doing the arithmetic themselves. This is the interactive version: they pick a key, it shows the capo position that makes the song easiest and the chord shapes for it. Free, one iframe, no account.

Live preview

This is the widget itself, in an iframe, exactly as it will appear on your page.

Start in key:

1. Paste this

Works anywhere HTML does — WordPress custom HTML block, Squarespace code block, Ghost, plain HTML. No script tag, so it survives editors that strip them.

<iframe src="https://capochart.com/embed/capo"
        width="100%" height="680" loading="lazy"
        style="border:1px solid #27272a;border-radius:12px;max-width:720px"
        title="Capo calculator"></iframe>
<p style="font-size:13px;margin-top:6px">
  <a href="https://capochart.com/capo-calculator">Capo calculator</a> by
  <a href="https://capochart.com">CapoChart.com</a>
</p>

2. Or this, if you want it to size itself

Same widget, plus a six-line listener so the frame grows and shrinks with its content instead of using a fixed height.

<iframe id="capochart-capo" src="https://capochart.com/embed/capo"
        width="100%" height="680" loading="lazy"
        style="border:1px solid #27272a;border-radius:12px;max-width:720px"
        title="Capo calculator"></iframe>
<p style="font-size:13px;margin-top:6px">
  <a href="https://capochart.com/capo-calculator">Capo calculator</a> by
  <a href="https://capochart.com">CapoChart.com</a>
</p>
<script>
  window.addEventListener("message", function (e) {
    if (!e.data || e.data.source !== "capochart-embed") return;
    var f = document.getElementById("capochart-capo");
    if (f) f.style.height = e.data.height + "px";
  });
</script>

Options

ParameterValuesEffect
keyC, G, D, A, E, B, F#, Db, Ab, Eb, Bb, F, Am, Em, …Key the widget opens on. Defaults to G.
modekey, chordsOpen the key picker, or the box where a reader pastes a chord list.

Example: https://capochart.com/embed/capo?key=Am&mode=chords

Terms, in plain words

  • • Free for any site, including commercial ones. No account, no key, no cap.
  • • Attribution is optional, and nofollow on it is fine.
  • • Don't claim you built it, and don't re-host the code — link the widget.
  • • It may be improved at any time. The URL and the height message stay stable.

Need the whole chart transposed?

The site the widget comes from does the bigger job: upload a chord chart PDF or a photo of one, pick a key or capo, and every chord is re-stamped in place with the layout untouched.

Questions

Is the embed free?
Yes. It is free for any site, commercial or not, with no account and no API key. There is no usage cap.
Do I have to credit CapoChart?
The attribution line in the snippet is appreciated but optional, and you are welcome to reword it or mark it nofollow. The widget works either way — nothing is checked or disabled.
Does the widget track my visitors?
It sets no cookie and stores nothing in the browser. It loads the same analytics the rest of capochart.com uses, which counts a pageview and no personal data. Nothing is shared back to your site.
Will it slow my page down?
The snippet uses loading="lazy", so the iframe is only fetched when the reader scrolls near it. Your own page renders first regardless.
Can I choose which key it opens in?
Yes. Add ?key=D (or any key, including minors like Am) to the iframe src. Add ?mode=chords to open the chord-list input instead of the key picker.
What happens if you change the widget?
Improvements appear on your page automatically because it is served from capochart.com. The URL and the postMessage height contract are treated as stable; the calculator inside them can improve.