Embedding Guides

GuitarApp provides music education tools which you can embed on your website for free! We currently offer an online tuner for guitar, bass and ukulele. We also provide an extensive chord library for guitar, ukulele and mandolin. You can also add our metronome to your website! You can see examples of the tools and how they will appear down below. The following guide explains how to include our tools on your website. Check back regularly as we are adding new tools all the time!

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 or use the embed codes below
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. Examples of a valid backlink can be seen below:

<p>Tuner provided by <a href="https://www.guitarapp.com/tuner.html" target="_blank" rel="noopener">GuitarApp</a></p>

<p>Metronome provided by <a href="https://www.guitarapp.com/metronome.html" target="_blank" rel="noopener">GuitarApp</a></p>

<p>Music tools provided by <a href="https://www.guitarapp.com/" target="_blank" rel="noopener">GuitarApp</a></p>

Tuner Parameters

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, "8" = Bouzouki, 9 = "Chromatic"	&instrument=0
2	tuning	"0" = standard, Each instrument has numerous tunings available. Check the drop down menu on the tuner for the tuning number you require (starting at 0)	&tuning=0
3	theme	"light"	&theme=light

Metronome Parameters

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

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