Embeddable Chord Diagrams
Teaching guitar on your own site? Drop a live, playable chord diagram into any page with one line of HTML.
Why embed instead of a screenshot?
A screenshot goes stale and stays silent. The widget is live — readers tap it and hear the chord — and it always renders crisply on any screen. If we improve the diagrams, every embed on the web improves with them.
The widget shows one shape — the full chord finder shows every voicing up the neck (CAGED), real fingerings, and how each chord is built.
Open the chord finderFrequently asked
How do I add a chord diagram to my website?
Pick the chord above and copy the iframe snippet into your page's HTML (or a WordPress custom-HTML block). The diagram loads from thunderfret.com, so it stays up to date and costs your site nothing.
Is it really free? What's the catch?
Free, no API key, no rate limits for normal use. The widget carries a small 'thunderfret.com' credit link — that's the whole deal.
Can readers interact with it?
Yes — tapping the chord name plays the chord, so your readers can hear what they're about to finger. For scales, voicings up the neck and the full interactive fretboard, the credit link takes them to the tool.
Which chords are available?
All 12 roots in major, minor, dominant 7 and minor 7 — famous open shapes where they exist, correct barre shapes everywhere else. Use s or %23 for sharps in the URL (F#m → /embed/chord/Fsm) and b for flats (Bb → /embed/chord/Bb).