Embedding Guides


Step by step

Each GuitarApp Embed Widget has it's 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 or metronome 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.com") within our iframe is not a weblink and you are required to create your own link back to guitarapp.com outside of the iframe.

See below for available customisations on each GuitarApp Embed Widget



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

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