Embed HTML code generator

To embed a sheet music, paste the corresponding Flat Document URL below, then choose the options for your embed. You will get a preview and the code of the embed at the bottom of this page.

You are in playground mode. You can use the following score to test the embed generator.

Preview of your Embed

Embed Options & Customization

Embed mode

To use the embeddable editor, create an App ID in your Flat account .

Embed size

Layout customization

Language:
Zoom:
x
Premium customization and features
Flat Branding
Theme colors
Score background
Controls Position
Displayed Controls
Audio features
Metronome mode
MIDI Output
Layout Template
Tablatures display
Parts names display
Tempo display
System breaks in Responsive Layout
Notes out of Tessitura (with no playback available)
Quarter tone (editor only)

Your Embed code

You can either insert the iframe in your page or use our JavaScript API to build a more advanced integration.

HTML Code to insert in your page:
<iframe src="https://flat.io/embed/6579cb57899eadf357cd709b?appId=58f0ee6053674e68c81e5646" height="450" width="100%" frameBorder="0" allowfullscreen allow="autoplay; midi"></iframe>
Or
Using our JavaScript API:
<div id="embed-container"></div>
<script src="https://prod.flat-cdn.com/embed-js/v2.4.1/embed.min.js"></script>
<script>
  var container = document.getElementById("embed-container");
  var embed = new Flat.Embed(container, {
    "width": "100%",
    "height": "450",
    "score": "6579cb57899eadf357cd709b",
    "embedParams": {
      "appId": "58f0ee6053674e68c81e5646"
    },
  });
  // You can now use the `embed` instance.
  // Check out the docs at https://flat.io/developers/docs/embed/javascript.html
</script>
Upgrade your Embed accountto get access to the JavaScript API.
Or

Go further with Flat's Embed

JavaScript API

Use our JavaScript API and Client to use the full capabilities of the embed: easily interact with the sheet music, load and export any file on the fly, use our editor... and much more! Discover our JavaScript Client

Full embed customization

Customize the look and the colors of the embed, its different controls and remove our branding. Discover the customization options