Embedded player | Speak AI Docs

Change the player's colors, controls and transcript panel so an embedded recording matches the page it sits on.

The player you embed on your site carries your colors, fonts, and logo, and you can control what it shows and how it starts. Branding is set once in the dashboard and applies to your embeds. Playback behavior is set per embed with URL parameters.

An embedded player on its own shared page. The recording title sits above the player, which carries play, skip back and skip forward controls, a counter reading 00:00 of 00:32, a speed control and a volume control. Below sit a transcript search box and an Auto scroll toggle, then the transcript itself, attributed to Speaker 1 and timestamped line by line.

Brand the player

Open Shared Media → Settings → Branding & Customization and set:

Primary color for buttons and highlights, and the font color
Theme, either light or dark as the base
Font family, chosen from the available fonts, so the player matches your site
Logo and background image, uploaded from your own files
Waveform, hidden if you want a plainer player
Title and description, hidden if the surrounding page already says what the recording is
Insights, ticked one by one to choose which appear next to the recording
Downloads, allowing viewers to download your data visualizations
Search engine indexing, allowing the shared page to be indexed
Call to action, a button that sends viewers where you want them to go next

Click Save when you are done. Changes apply to your embedded players.

Viewers can also switch the player between light and dark themselves. The shared page carries a theme toggle in its header, next to your logo. An iframe embed does not show that header, so it has no toggle.

Custom CSS

For control past those settings, use the Custom CSS field in the same settings screen. Enter standard CSS to override specific styles:

.sp-recorder-btn {
    border-radius: 20px;
    font-weight: bold;
}

The player updates as you type.

Set the starting state with URL parameters

Append parameters to the embed URL to control how the player loads:

?autoplay=true starts playback automatically, if the browser allows it
?t=120 starts playback at a set time in seconds, here two minutes
?hideWaveform=true hides the waveform

Layout parameters no longer apply

The player sets its own layout and fits the width of the iframe or page it sits in, so there is nothing to size by hand. The isHorizontal, playerWidth and transcriptWidth parameters are no longer supported.

If an existing embed URL still carries them, the player ignores them and lays itself out as normal. Nothing breaks, and you can drop them from the src on your iframe whenever it is convenient.

React to player events

The embed sends messages to the page around it using the browser postMessage API, so you can pause, play, or react from your own code:

ready fires when the player has finished loading
finish fires when playback has completed

If your security policies block these messages, add your domain to the allowed list in the recorder settings.

Want a hand setting this up? Book a free consult and we’ll do it together on your account.

Related: Sharing · Clips