The following steps will show you how to embed a Chordify player on your website or in your blog in a few simple steps.
Step 1: Select your song
You can share any Chordified song you like by embedding it on your website - just a heads up though, we don't support embedding song edits, only the default versions. Always make sure the chords are in the right place before you share them. When you’re ready to embed a version of a song you can click the vertical ellipsis icon '…' (top left next to the title of the song), which will open a menu. That’s where you’ll find the 'Embed' option.
Step 2: Copy the code
Click the embed icon and a pop-up window appears that holds a piece HTML code. You can copy this by clicking 'copy' or by selecting the text and pressing ctrl + c. The piece of prefabricated code is called an 'inline frame', that is specified in HTML by an <iframe> tag. We have taken care of the markup (i.e. set the width and height values) for you, so all you have to do is copy and paste.
Step 3: Place and customize the iframe code
Most Content Management Systems (like WordPress) will automatically fit the Chordify player into the design of your website. Make sure the 'Text' modus is selected (top right in the image below) and not the 'Visual' modus. As you can see in the code, the display size already has default values: width is set to 100% and height to 500 pixels. This ensures an automatic fit into the layout of your website in most cases. But you can also customize the dimensions by changing the values. Note that the embed’s aspect ratio will be maintained when you change the size. If you want to know more about <iframe> and how to add more parameters, check out the documentation.
Step 4: Testing the embed
As you can see we've embedded a song below into this blog post, so you can see how it works. It's a trimmed version of the interface that you find on our website and app, but it has the essential features that allow people to quickly play along – no hassle, no barriers. On the top left of the player you can choose between the 'CHORDS' or 'DIAGRAMS' view, and in the top right you can select your instrument of choice: 'GUITAR', 'UKULELE' or 'PIANO'. Just like on our website, the YouTube video will be aligned with the chords you’re seeing. Try it out for yourself in the embed below:
Now, with this simple yet effective embed feature you've got the means to easily incorporate a Chordify player on your own website. You can show anyone that's interested how to play your music or your Chordify edits. We've worked hard to guarantee a smooth operation and an interface that makes playing along as easy as possible. And that's what it's all about!