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.

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

Side by side layout

To put the player and the transcript side by side, add isHorizontal=true with the width you want for each panel. The two widths are percentages and have to add up to 100:

https://embed.speakai.co/iframe/your-media-slug?isHorizontal=true&playerWidth=70&transcriptWidth=30

Find the src on your iframe and add the parameters to the end of that URL. This layout applies to iframe embeds only.

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