Embedding Guides


Step by step

Each GuitarApp Embed Widget has its own customisable parameters but there are a few common steps which are covered here. If you manage your own website on WordPress or another similar website builder you will find it very easy to embed these tools. If you use a webmaster to manage your content, just send them this guide

  1. Copy the iframe embed code that was generated for you on the tuner, metronome and chords page
  2. Login to your own website management console
  3. Navigate to the html page where you want to add our tuner or metronome
  4. Paste the iframe embed code from Step 1 into the desired location in the code editor for your web page.
  5. Add a standard href link to https://guitarapp.com on your webpage under the embedded tool or somewhere else prominant on your website. Please note that text ("powered by GuitarApp") within our iframe is not a weblink and you are required to create your own link back to guitarapp.com outside of the iframe. An example of a valid backlink can be seen below:
<p>Generously provided by our friends at <a href="https://www.guitarapp.com/" target="_blank" rel="noopener">GuitarApp</a></p>


Tuner Parameters

Tuner - Dark Theme
<iframe src="https://guitarapp.com/tuner.html?embed=true" allow="microphone" title="GuitarApp Online Tuner" style="width: 360px; height:520px; border-style: none; border-radius: 4px;"></iframe>

Tuner - Light Theme
<iframe src="https://guitarapp.com/tuner.html?embed=true&theme=light" allow="microphone" title="GuitarApp Online Tuner" style="width: 360px; height:520px; border-style: none; border-radius: 4px;"></iframe>


The tuner can be embeded on your website with certain settings already selected. This can be achieved by adding some parameters to the url within the src value contained in the generated iframe snippet. The following parameters can be added:

URL Parameters

# Name Values Example
1 instrument "0" = guitar, "1" = bass, "2" = ukulele, "3" = mandolin, "4" = banjo, "5" = violin, "6" = viola, "7" = cello, &instrument=0
2 theme "light" &theme=light




Metronome Parameters

Metronome - Dark Theme
<iframe src="https://guitarapp.com/metronome.html?embed=true&tempo=120&timeSignature=2&pattern=1" title="Online Metronome" style="width: 360px; height:520px; border-style: none; border-radius: 4px;"></iframe>

Metronome - Light Theme
<iframe src="https://guitarapp.com/metronome.html?embed=true&tempo=120&timeSignature=2&pattern=1&theme=light" title="Online Metronome" style="width: 360px; height:520px; border-style: none; border-radius: 4px;"></iframe>


The metronome can be embeded on your website with certain settings already selected. This can be achieved by adding some parameters to the url within the src value contained in the generated iframe snippet. The following parameters can be added:

URL Parameters

# Name Values Example
1 Tempo 20 to 280 (Unit = BPM) &tempo=145
2 Time Signature "0" = 2/4, "1" = 3/4, "2" = 4/4, "3" = 5/8, "4" = 6/8, "5" = 7/8, "6" = 8/8, "7" = 9/8, "8" = 10/8, "9" = 11/8, "10" = 12/8, "11" = 13/8, &timeSignature=2
3 Accent Pattern "0" = Accent Off, "1" = Accent On. Each time signature has it's own set of unique patterns also. &pattern=1
4 theme "light" &theme=light




Chords Parameters

Chord Library - Dark Theme
<iframe src="https://guitarapp.com/chords/embedtool?labels=fingers&colors=two" title="Online Chord Tool" style="width: 360px; height:560px; border-style: none; border-radius: 4px;"></iframe>

Chord Library - Light Theme
<iframe src="https://guitarapp.com/chords/embedtool?labels=fingers&colors=two&theme=light" title="Online Chord Tool" style="width: 360px; height:560px; border-style: none; border-radius: 4px;"></iframe>


The chord library tool can be embeded on your website with certain settings already selected. This can be achieved by adding some parameters to the url within the src value contained in the generated iframe snippet. The following parameters can be added:

URL Parameters

# Name Values Example
1 Instrument "guitar", "ukulele", "bass", "mandolin" &instrument=ukulele
2 Labels "fingers", "notes", "intervals" &labels=intervals
3 Colors "single", "two", "full" &colors=full
4 Left Handed "lefthanded" &lefthanded
5 Autoplay "autoplay" &autoplay
6 theme "light" &theme=light