Customization reference

For customizing Wavekit's player we recommend using our embed generator but power users might prefer to generate the embed code themselves.

<iframe> properties#

These are the minimum properties we recommend for the embed iframe:


The background of our player can be configured to be transparent but to allow the <iframe> to be transparent you need to set allowtransparency="true".


Our player is responsive and will adapt to the dimensions you set to the <iframe> itself. Depending on the player type, there will be some minimum dimensions. See below for more information.


By default, our player will render a border so we recommend removing the border of the <iframe> with style="border: none;".

Lazy loading#

You can use loading="lazy" so that the <iframe> is only loaded once visible after the user starts scrolling. This feature is supported in the latest version of all major browsers.

Referrer policy#

If you'd like our player to store the referer in the metrics set referrerpolicy to a valid value. We recommend using referrerpolicy="origin" to store the domain that was used to embed a player. For more information check MDN. Check the metrics section to know more about the metrics we collect.

Using settings

To customize the player you will need to add query parameters to the embed URL of the <iframe>. For example to add a red accent color:


Same with playlists:


You can chain multiple settings using the & character:


We recommend trying our embed generator to see the effect of each parameter.

Available settings

These are all the available settings. Except for the player type, the paramaters are the same for both audios and playlists.

Player type#


You can set the player type with the type parameter.

The player is responsive and will adapt to the dimensions of the <iframe> but depending on the player type there are some minimum dimensions.


Value Min width Min height
wave default 250px 150px
compact 200px 80px
compact_wave 200px 100px
micro 200px 30px
micro_wave 250px 50px


Value Min width Min height
wave default 250px 300px



The theme parameter controls the overall color theme of the player.

Value Description
auto default The theme will change automatically depending on the OS
light The player will always render with the light theme
dark The player will always render with the dark theme

Accent colors#


The accent color is controlled via the accent parameter. Any valid CSS color value can be used like red or rgb(255,0,0). When using hex colors like #ff0000 be sure to escape the # character like this %23ff0000.

You can also define different accent colors for the light or dark themes using accentLight and accentDark. This is useful when using the auto theme because some colors don't work well in both light and dark scenarios.

More colors#


You can control the background and border colors with backgroundColor and borderColor. Same rules apply as with accent colors. You can use any CSS value but remember to escape the # character with %23.



Enable or disable a visual border around the player. The default value is border=true.

Rounded corners#


Adds rounded corners to the player.

Hide the cover image#


Always hide the cover for this player regardless of whether the audio or playlist have an assigned cover.

Make the player completely transparent#


Makes the whole background color of the player transparent.

This allows you to create your own container around the <iframe>. Be sure to also add the allowtransparency="true" paremeter to the <iframe>.

Opting out of metrics collection#


If you do not wish for the player to store metrics for this player, just use ignoreMetrics=true. For more information about the metrics we collect see the metrics section.