Embedded Players

Adding a Samply embedded player to your site allows your site visitors to listen to high-fidelity audio directly on the page. And, your custom project color applies to the embedded widget, so you can be assured that the streamlined player UI will look great on your site in addition to sounding exceptional — in typical Samply fashion!

Using embedded players requires just a few simple steps:

Copying the embed code

Customizing embed code

There are three ways to copy the embed code for your player:

Upon sharing a group of files via the share button, click the 'Embed' button in the dialog that appears. If you would like to embed an existing player instead, use a different method.

Method 2: via the Player view

Navigate to the player and click the 'Embed' button in the upper-right hand corner.

Method 3: via the Players tab

Navigate to the 'Players' tab and select a Player by either long-pressing, shift-clicking, or command/control-clicking, and select 'Copy embed' from the action bar.

The copied embed code will take the form:

<iframe src="https://samply.app/embed/<Player ID>"frameborder="0">
</iframe>

Dimensions

A common customization is to adjust the player width and height. This is simply done by adding width="<length>" or height="<length>" to the iframe tag:

<iframe 
  src="https://samply.app/embed/<Player ID>"
  width="100%"
  height="480px"
  frameborder="0">
</iframe>

Embedded Player Variants

Color

Embedded players, like in-app players, assume the color of their project by default. However, unlike in-app players, you may change the color of embedded players to better match your site. This is done by adding a color query parameter to the source url.

The color query parameter takes a six-digit hex color value string, in the RGB hex format #rrggbb . The hash/pound character can be omitted, meaning the actual string in the query parameter becomes rrggbb :

<iframe 
  src="https://samply.app/embed/<Player ID>?color=rrggbb"
  width="100%"
  frameborder="0">
</iframe>

Conclusion

It's as easy as that - copy the embed code and style as desired! Feel free to contact us with any questions; we would love to help enliven your website with our signature lossless & gapless streaming.

Updated on: 09/01/2024

Was this article helpful?