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

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

Check out these free guitar courses and lessons!

Beginner Guitar Courses
Song Tutorials
Learn Music Theory
Gear Demos
Gear Shootouts
Guitar Heroes
Guitar Technique
Guitar DIY
Build Your Own Guitar
Fun & Interesting
Backing Tracks
Get The Tone
Music Production Courses
Learn The Modes
Learn the CAGED System
Learn Chords
Pentatonic Scales
Blues Lessons
Exotic Scales
Picking Techniques
Learn Jazz Guitar
Circle of Fifths
Intervals
Ear Training
Chord Progressions
2-5-1 Chord Progressions
Improvisation
Guitar Effects Pedals
Djent
Acoustic Guitar
Fingerstyle