Embed mariachi chord charts

Rehearsal pages for a section can show every armonía shape next to the song it belongs to.

Every widget is a small page under mariachiwarrior.com/embed/… that you frame on your own site. It follows the colour theme you pick, resizes to fit, sets no cookies or trackers inside your page, and carries a link back to Mariachi Warrior.

Single chord diagram

One chord chart, named in the path by its root and type. Add /0, /1, … after the type for a specific voicing instead of the default shape.

<iframe
  src="https://mariachiwarrior.com/embed/chord/vihuela/c/major"
  title="C major chord — Mariachi Warrior"
  width="340" height="300" loading="lazy"
  style="border:0;max-width:100%"
  sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox allow-same-origin">
</iframe>

Path: /embed/chord/vihuela/{note}/{type}[/{voicing}]. Find the chord you want in the chord library.

A set of chords

Several charts side by side: a song’s chords, a key’s family, the shapes in a lesson. List them in chords=, dash-separated, sharps as s (Cs), and pick layout=row, grid or column.

<iframe
  src="https://mariachiwarrior.com/embed/chords/vihuela?chords=C-F-G&layout=row"
  title="C, F and G chords — Mariachi Warrior"
  width="100%" height="300" loading="lazy"
  style="border:0"
  sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox allow-same-origin">
</iframe>

Path: /embed/chords/vihuela?chords=C-F-G&layout=grid|row|column. Pick the chords from the chord library.

Fretboard explorer

The whole interactive neck: readers tap a note or a fret and every matching spot lights up. Preselect notes with notes=; the rest of the Explorer’s state rides in the same query string.

<iframe
  src="https://mariachiwarrior.com/embed/fretboard/vihuela?notes=c,e,g"
  title="Fretboard explorer with C, E and G — Mariachi Warrior"
  width="100%" height="520" loading="lazy"
  style="border:0"
  sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox allow-same-origin">
</iframe>

Path: /embed/fretboard/vihuela?notes=c,e,g. Set it up on the fretboard explorer.

As a plain image, no iframe

Every chord this site draws is also a self-contained SVG image: it works anywhere an <img> does, in a Markdown README, a forum post, an email, or a platform that strips iframes and scripts. It stays sharp at any size and carries a text description for screen readers.

<img
  src="https://mariachiwarrior.com/images/diagrams/vihuela/c/major.svg"
  alt="C Major chord diagram"
  width="194" height="212" loading="lazy">

In Markdown: ![C Major chord diagram](https://mariachiwarrior.com/images/diagrams/vihuela/c/major.svg)

Path: /images/diagrams/vihuela/{note}/{type}.svg; sharps are written s (cs for C#) and the type matches the chord library.

Make it fit its content (optional)

Each widget knows its own height and reports it to your page. A fixed height works on its own; to have the frame grow and shrink with the widget, add origin and id to the URL and put this listener on your page once:

<iframe
  src="https://mariachiwarrior.com/embed/chord/vihuela/c/major?origin=https://YOURSITE.com&id=w1"
  data-sw-embed="w1" title="C major chord — Mariachi Warrior"
  width="340" height="300" loading="lazy" style="border:0;max-width:100%"
  sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox allow-same-origin"></iframe>
<script>
  window.addEventListener('message', function (e) {
    if (e.origin !== 'https://mariachiwarrior.com') return;
    var d = e.data;
    if (!d || d.type !== 'stringwarrior:embed:size') return;
    var f = document.querySelector('[data-sw-embed="' + d.id + '"]');
    if (f) f.style.height = d.height + 'px';
  });
</script>

Set origin to your own site's address, and give each widget on a page its own id.

Or paste a placeholder

If your editor strips iframes, paste a placeholder and one script tag instead: mariachiwarrior.com/embed.js turns every .mariachiwarrior-embed on the page into the widget its data-embed names, with the same live sizing.

<div class="mariachiwarrior-embed" data-embed="chord/vihuela/c/major" data-title="C major chord"></div>
<script src="https://mariachiwarrior.com/embed.js" async></script>

Options

Add these to any widget URL as query parameters (?theme=forge):

Parameter	What it does
`theme`	The colour palette: any of this site’s themes.
`layout`	Chord set only: `row`, `grid` or `column`.
`mode`	Chord diagrams: `fingers`, `shape` or `notes`.
`origin`, `id`	For the resize listener above: your site and a unique id per widget.

Good to know

Is it free? Do I need an account?: It is free, with no signup and no key. Keep the credit line under each widget: it is how readers find Mariachi Warrior.
Does it track my visitors or set cookies?: No. The widget pages carry no analytics and set no cookies inside your page, so your own privacy and consent tooling is untouched.
Where does it work?: Anywhere that accepts an <iframe>: an HTML or embed block in most site builders, or a plain page. Where iframes are stripped, use the placeholder above.