Embedding the Player

In this guide:

What’s an Embedded Player?

The embedded player is a player you can include into your own website or blog. It consists of an HTML snippet that you can add to your website that, once executed, replaces a link with the player. The easiest way to configure a player and generate the markup needed to embed it is through our CMS. However, some may need to manually generate this markup - the following documentation is for them.

Spreaker Live Show

Two Ways to Embed a Player

There are two different ways to embed a player:

  1. Using a tiny JS loader (recommended)
  2. Directly embedding an <iframe> tag

Embedding Via a Tiny JS Loader

The recommended way to embed a player is to place one or more HTML anchors <a> into the page, each with its own set of custom data attributes (described below), and a tiny JavaScript file that parses the player’s anchors and replaces them with the player itself. This is the recommended method as it’s more flexible and performant compared to the alternative, and should be used whenever you can embed a JS file into the hosting page.

To embed a player, you should place an HTML anchor element in your page:

<a class="spreaker-player" href="https://www.spreaker.com" data-resource="show_id=1433865" data-width="100%" data-height="200px">Listen to my podcast</a>

And a JS script tag right before the end of your </body>:

<script async src="https://widget.spreaker.com/widgets.js"></script>

The anchor accepts some custom data attributes that give you the freedom to configure many aspects of the player itself.

Attribute Required Description
data-resource Yes The primary episode you want to display in the player. It can be a single episode data-resource="episode_id=EPISODE-ID", or a show’s latest episode data-resource="show_id=SHOW-ID".
data-width No Player’s width (can be in % or px).
data-height No Player’s height (can be in % or px).
data-theme No Player’s UI theme. Supported themes are: light (default) and dark.
data-color No Player’s main color. Supported fromats are short and long hex values (ex: F00 or FF0000). Plan Station or higher is required to use this parameter.
data-cover No HTTPS URL of the image to display as the player’s background.
data-playlist No Configures how the playlist should be built. It can be data-playlist="false" to disable the playlist, or data-playlist="show" to display all episodes from all shows in the playlist. The default behavior depends on the data-resource.
data-playlist-continuous No Enables or disables continuous playlist playback. When set as true, it will continuously play every episode in the playlist until it ends.
data-playlist-loop No Enables or disables loop playlist playback when continuous playback is enabled. When set as true and playlist continuous playback is enabled as well, it will loop the playlist continuously (defaults to false).
data-playlist-autoupdate No Enables or disables playlist autoupdate, when a new episode is published. This feature is enabled by default.
data-chapters-image No Enables or disables the display of chapters images in the player. Defaults to true.
data-episode-image-position No When left/right shows the episode image on the left/right. Defaults to right.
data-hide-likes No When true, it hides the likes icon and function normally present in the player. Defaults to false. Plan Broadcaster or higher is required to use this parameter.
data-hide-comments No When true, it hides the chat / comments icon and function normally present in the player. Defaults to false. Plan Broadcaster or higher is required to use this parameter.
data-hide-sharing No When true, it hides the sharing icon and function normally present in the player. Defaults to false. Plan Broadcaster or higher is required to use this parameter.
data-hide-logo No When true, it hides the Spreaker logo and branding normally present in the player. Defaults to false. Plan Broadcaster or higher is required to use this parameter.
data-hide-episode-description No When true, it hides the info icon from the main episode being played. Defaults to false.
data-hide-playlist-descriptions No When true, it hides the info icons from the playlist. Defaults to false.
data-hide-playlist-images No When true, it hides the episode image thumbnails from the playlist. Defaults to false.
data-hide-download No When true, it hides the episode download button. Defaults to true.
data-gdpr No Possible values are 0 or 1. Meaning 0 GDPR does not apply; 1 GDPR applies.
data-gdpr-consent No URL-safe base64-encoded Transparency & Consent string. Here is more information on how you can build this value.
data-us-privacy No US Privacy String communicates signals regarding consumer privacy and choice under US privacy regulation. Here is more information on how you can build this value.

IMPORTANT: The anchor must have the attribute class="spreaker-player", otherwise it will be ignored by the loader script, and won’t get replaced by the player.

Example: Sharing a single episode, with no playlist

<a class="spreaker-player" href="https://www.spreaker.com" data-resource="episode_id=12794242" data-width="100%" data-height="200px">Listen to my podcast</a>
<script async src="https://widget.spreaker.com/widgets.js"></script>

Example: Sharing a show’s latest episode, with a playlist

<a class="spreaker-player" href="https://www.spreaker.com" data-resource="show_id=1433865" data-width="100%" data-height="200px">Listen to my podcast</a>
<script async src="https://widget.spreaker.com/widgets.js"></script>

Example: Sharing a specific episode, with a playlist displaying all the episodes of a show

<a class="spreaker-player" href="https://www.spreaker.com" data-resource="episode_id=12794242" data-width="100%" data-height="200px" data-playlist="show">Listen to my podcast</a>
<script async src="https://widget.spreaker.com/widgets.js"></script>

Directly Embedding an iFrame

In some circumstances, it may occur that you’ll need to embed the player in a page that doesn’t allow JavaScript files. In these cases, you can directly embed the <iframe> instead:

<iframe src="https://widget.spreaker.com/player?show_id=1433865" width="100%" height="200px" frameborder="0"></iframe>

To configure the player, you can pass a set of options as query string parameters. The following parameters are supported:

Parameter Required Description
episode_id or show_id Yes The primary episode you want to display in the player. It can be a single episode episode_id=EPISODE-ID, or a show’s latest episode show_id=SHOW-ID.
theme No Player’s UI theme. Supported themes are: light (default) and dark.
color No Player’s main color. Supported fromats are short and long hex values (ex: F00 or FF0000). Plan Station or higher is required to use this parameter.
cover_image_url No HTTPS URL of an image to display as the player’s background.
playlist No Configures how the playlist should be built. It can be playlist=false to disable the playlist, or playlist=show to display all of a show’s episodes in the playlist.
playlist-continuous No Enables or disables continuous playlist playback. When set as true, it will continuously play all episodes in the playlist until it ends.
playlist-loop No Enables or disables loop playlist playback when continuous playback is enabled. When set as true and playlist continuous playback is enabled as well, it will loop the playlist continuously (defaults to false).
playlist-autoupdate No Enables or disables the playlist autoupdate, when a new episode is published. This feature is enabled by default.
chapters-image No Enables or disables the display of chapters images in the player. Defaults to true.
episode_image_position No When left/right shows the episode image on the left/right. Defaults to right.
hide-likes No When true, it hides the likes icon and function normally present in the player. Defaults to false. Plan Broadcaster or higher is required to use this parameter.
hide-comments No When true, it hides the chat / comments icon and function normally present in the player. Defaults to false. Plan Broadcaster or higher is required to use this parameter.
hide-sharing No When true, it hides the sharing icon and function normally present in the player. Defaults to false. Plan Broadcaster or higher is required to use this parameter.
hide-logo No When true, it hides the Spreaker logo and branding normally present in the player. Defaults to false. Plan Broadcaster or higher is required to use this parameter.
hide-episode-description No When true, it hides the info icon from the main episode being played. Defaults to false.
hide-playlist-descriptions No When true, it hides the info icons from the playlist. Defaults to false.
hide-playlist-images No When true, it hides the episode image thumbnails from the playlist. Defaults to false.
hide-download No When true, it hides the episode download button. Defaults to true.
gdpr No Possible values are 0 or 1. Meaning 0 GDPR does not apply; 1 GDPR applies.
gdpr_consent No URL-safe base64-encoded Transparency & Consent string. Here is more information on how you can build this value.
us_privacy No US Privacy String communicates signals regarding consumer privacy and choice under US privacy regulation. Here is more information on how you can build this value.

Example: Sharing a single episode, without a playlist

<iframe src="https://widget.spreaker.com/player?episode_id=12794242" width="100%" height="200px" frameborder="0"></iframe>

Example: Sharing a show’s latest episode, without a playlist

<iframe src="https://widget.spreaker.com/player?show_id=1433865&playlist=false" width="100%" height="200px" frameborder="0"></iframe>

The Embedded Player on WordPress

Spreaker provides a WordPress plugin to easily embed the Spreaker player in your WordPress blog or website.

It basically adds the support for a shortcode in the form [spreaker type=player ...] to your WordPress, replacing all the shortcodes with the related player.

The shortcode supports all the attributes supported by the JS loader without the data- prefix. For example, the resource is specified with the resource attribute (instead of data-resource), the background image with cover (instead of data-cover) and so on.

Example: share a single episode, without playlist

[spreaker type=player resource="episode_id=12794242" width="100%" height="200px"]

Example: share the latest episode by show, with playlist

[spreaker type=player resource="show_id=1433865" width="100%" height="200px"]