Customize Web Player Embed Code

Customize the Whooshkaa Web Player by customizing its embed code.

The Whooshkaa Web Player can be embedded via an <iframe> tag or a JavaScript <script> tag. Either method allows for a series of customizations to be made, however the JavaScript method is more flexible and is thus recommended where feasible.

Custom Styles

The custom styles in the Web Player can be configured using the Whooshkaa Dashboard (with the exception of a few options). The following table outlines the styles available. Please see the following section on how to use these styles in the embed code.

Style Value Default Description
autoplay boolean false Autoplay player episode (only to be used in specific conditions -- if you are not sure, please contact support)
background-color string (any web color) "" Background color (web or hexadecimal color)
button-color string (any web color) "" Play / pause button background color (web or hexadecimal color)
chapter-color string (any web color) "" Chapter marker background color (web or hexadecimal color)
description-color string (any web color) "" Text color (web or hexadecimal color) on "Notes" modal
disable-cookies boolean false Disable GA tracking
disable-playlist-scroll boolean false Hide episodes list scrollbar
enable-chapters boolean false Enable chapters
enable-transcript boolean false Hide Transcript button
enable-volume boolean false Hide Volume button
hide-episode-list boolean false Hide episodes list
hide-download boolean false Hide Download button
hide-logo boolean false Hide Whooshkaa logo
hide-rss-feed boolean false Hide Apple Podcasts, Google Podcasts and Spotify buttons
padding string / number null Player padding (in pixels)
pft string string Private Feed Token
play-video-if-available boolean false Play video if episode has one
playlist-numbering string null Episodes numbering mode sequence, episode or season
playlist-numbering-color string (any web color) "" Episodes numbering color (web or hexadecimal color)
scrollbar-color string (any web color) "" Episodes list scrollbar color (web or hexadecimal color)
scrolling-title boolean false Scroll the title when it is longer than can fit in the player
share-parent-page boolean false Share URL from page it's embedded on
sharing boolean false Hide Share button
size string "" Switch cover image to "large" format
theme string "dark" Switch to "light" theme
visual boolean false Uses the background image to create a visual display
volume-value string / number null Player volume from 0 - 100
waveform-base-color string (any web color) "" Waveform background color (web or hexadecimal color)
waveform-progress-color string (any web color) "" Waveform progress background color (web or hexadecimal color)

Customizing Iframe Embed via URL Query Parameters

The Whooshkaa <iframe> embed code can be customized by modifying the src parameter of the tag. Each of the above styles can be set by modifying the URL, such as the following, which modifies the "button-color", "waveform-progress-color" and "waveform-base-color".

https://webplayer.whooshkaa.com/episode/9999999999?button-color=%23FB751E&waveform-progress-color=%23351338&waveform-base-color=%23ccc

Customizing JavaScript Embed via data-* Attributes

When embedding via JavaScript, the placebolder of the Whooshkaa player is set in a <div> tag with the class "whooshkaa-widget-player". The Whooshkaa Widget Manager recognizes the players to bootstrap and uses the data-* attributes to understand the scope and data. The following data-* attributes are used.

Name Value Description Required
data-episode-id, data-show-id, data-playlist-id number ID of the episode, show or playlist to embed true
data-fixed-bottom boolean Show it at the bottom of the page? false
data-play-from string Start playing from a specific point false
data-episode number Select a specific episode of the playlist / show false
data-height number Set the iframe's height false
data-height="default" string Set default height (180px for episodes, 400px for playlists) false
data-dynamic-height boolean Change the iframe's height by asking the player for its current height false
data-{custom-style} mixed Set any custom style from the table above false

Note: if no data-[*-]height attribute is provided, no height will be set.

In the below example, the embed code is modified with settings from both of the above tables.

<div
class="whooshkaa-widget-player"
data-episode-id="9999999999"
data-height="auto"
data-theme="light"
data-visual="true"
data-play-from="20m"
></div>
 If you have any questions about any of these, please feel free to contact our support team.