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:

Transparency

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".

Dimensions

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.

Border

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:

		.../embed/audio/qrRS3OOsmx?accent=red
	

Same with playlists:

		.../embed/playlist/cAgkyheZmM?accent=red
	

You can chain multiple settings using the & character:

		.../embed/audio/qrRS3OOsmx?border=false&rounded=true
	

We recommend trying our embed generator to see the effect of each parameter. Also check our player demos to see those in action.

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

			.../embed/audio/qrRS3OOsmx?type=compact_wave
		

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.

Audios

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

Playlists

Value Min width Min height
wave default 250px 300px

Theme

			.../embed/audio/qrRS3OOsmx?theme=dark
		

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

			.../embed/audio/qrRS3OOsmx?accent=blue
		

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.

Border

			.../embed/audio/qrRS3OOsmx?border=false
		

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

Rounded corners

			.../embed/audio/qrRS3OOsmx?rounded=true
		

Adds rounded corners to the player.

Hide the cover image

			.../embed/audio/qrRS3OOsmx?hideCover=true
		

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

Make the player completely transparent

			.../embed/audio/qrRS3OOsmx?transparent=true
		

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

			.../embed/audio/qrRS3OOsmx?ignoreMetrics=true
		

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