Docs

Appearance

Embeds ​

Embeds builds the code that puts your episodes on any website: your own site, a blog post, a sponsor's page. Open it from Settings → Distribution → Embed player → Open Embeds, or from an episode's Share & embed card on the Publish tab. Embeds is for the show's owners and admins, as Distribution is.

There are three types, as tabs along the top:

  • Single player: one episode, or your latest episode, with the full player.
  • Episode list: your episodes as a list or a grid. Visitors play them in place and load more a page at a time.
  • Play button: a button for one episode, to put in a card, beside a heading or in a table. Every button on a page shares one player.

Each type has options on the left, a live Preview on the right, and the code to copy underneath. Options that don't apply to what you've picked are greyed out, and the line under them says why.

Where this lives

Embeds are for shows hosted on show.fm. If your show's audio is hosted elsewhere, Embeds says so, because there's no show.fm audio to embed.

Pick what to embed ​

Single player. Pick Latest episode for a player that updates itself each time you publish, ideal for a homepage. Or pick one episode. Size is Standard (artwork, waveform and full controls) or Compact (a slim bar for sidebars and footers).

Episode list.

  • Arrangement: Auto, List, Grid or Compact. Auto reads the width of the space you paste it into: a list under 900px, and a grid from 900px. With the Card style, Auto only uses the grid when at least half your episodes have their own artwork. A grid under 480px wide shows as a list. Compact shows titles and lengths only.
  • Style: Card (a card with its own background) or Minimal (no container, on your site's own background).
  • Show: how many episodes per page. Visitors can load more.
  • Season: every season, or one.
  • Descriptions: two lines, with More to expand. Compact has none.
  • Hide trailers and bonus episodes.

Play button. Pick the episode, then the Style (Icon, Icon + label or Text link) and the Size (Small or Large; small buttons still keep a 44px tap area). The button always uses your site's font.

Choose the look ​

  • Theme: Auto follows each visitor's light or dark setting, or pin Light or Dark.
  • Accent: start from your show's player colour, or pick another swatch or type a hex value. If a colour is too pale or too dark to read, the embed adjusts it, and Embeds shows the colours it will use for buttons and for text links.
  • Font: embeds use your site's font, so they look native. show.fm doesn't load a font of its own. To give your embeds a different font, set --showfm-font in your site's CSS, for example :root { --showfm-font: 'Source Serif 4', Georgia, serif; }, using a font your site already loads. Titles alone can use --showfm-font-title.
  • Corners: Square, Default or Round for cards and artwork, in the code and the iframe. Play buttons always stay round.

The look starts from your show's player settings in Settings → Distribution. Anything you change is written into the code you copy, for that embed only. Leave a setting at your show's value and the embed keeps following your show, including later changes.

Playback ​

  • Sticky mini-player: a bar pinned to the bottom of the page, with seek, skip, speed and time left, so the episode keeps playing while visitors scroll. A page has one, shared by every embed on it.
    • Play buttons open it on the first play. It's on by default. Without it, a play button can only play and pause.
    • Episode lists open it when a row plays. It's off by default.
    • The single player hands its episode over to it when the player scrolls out of view while it plays, so nothing restarts. It's off by default.
  • Position and Lift above page bars: put the collapsed mini-player in the bottom Right or Left corner, and raise it above a cookie bar or chat widget pinned to the bottom of your site, in pixels.
  • Follow-along transcript (single player): a Transcript button that opens the transcript, highlighting each line as it's spoken. It needs an episode with a transcript, and the standard size.
  • Transcript opens (single player): Under the player opens the transcript below the controls, and the embed grows downwards. Full screen opens a reading view over the page instead, with the player pinned on top, search, and each speaker's photo or initials beside their lines. Visitors close it to carry on listening. Full screen needs the script embed: an iframe can't cover the page, so the choice is greyed out there.
  • Transcript (episode list): there's nothing to switch on. While an episode with a transcript plays, its row gets a Transcript button. In a list it opens inside the row; in a grid it opens as a panel under that card's row. The compact layout has no room for it, but the mini-player's own Transcript button opens it. Embeds tells you how many of your published episodes have a transcript.
  • "Powered by show.fm": shown once per page, on the first show.fm embed. On Creator plans and up, turn on Hide "Powered by show.fm" in Settings → Distribution to remove it from every embed, including code already on other sites. With that on, this switch can show the credit again for one embed. An embed can't hide it on its own, so with the Distribution setting off, the switch stays on and greyed out.

On your page ​

  • Heading level (single player and episode list): makes episode titles headings, at the level that fits under the heading above the embed. Screen reader users move around pages by headings. It's off by default.
  • Load on click: for sites that must ask for consent before loading anything from another service. Until a visitor presses it, the embed shows a placeholder in your accent and requests nothing from show.fm or embed.cdn.media. The code carries a small script inline instead of loading ours (keep it after your embeds, once per page), and the fallback styles are inline too. The preview shows the placeholder; press it to see the embed it loads.
  • Style the fallback: inside the code are plain links (the episode's title and Listen on show.fm, both to its page on show.fm), which visitors see before the embed loads or when JavaScript is off, and which search engines follow. The code never holds the audio itself: the embed plays only through show.fm, so if your show is later suspended, switched off or deleted, code already on other sites stops playing too. The small stylesheet makes the links look tidy at the size of the embed. Turn it off to let your site style them.

Preview ​

The preview is the real embed. Switch the Preview site between a serif site, a sans site and a dark site to see how it sits on different pages, and the Preview width between Sidebar, Content and Full width (wide previews are scaled to fit). For an episode list, Embeds measures the preview and writes its height into the code, so the page doesn't jump while the list loads.

Press play on a play button, or on a list with the mini-player on, and the mini-player appears along the bottom of the window, as it will on your site. The single player's preview doesn't hand over to it, because the preview never scrolls out of view.

Copy the code ​

Under the preview are two tabs:

  • Embed code (recommended): the embed renders in your page, so it uses your font and follows your visitors' zoom and contrast settings. Paste the script tag once per page, however many embeds you add. A comment at the top says what the code is, for you and for AI site builders.
  • iframe: for site builders that strip scripts. An iframe has a fixed height, can't see your site's font (it uses the system font) and can't show a mini-player, so those options are greyed out, as are heading levels and load on click. Theme, accent, corners, the "Powered by show.fm" switch and the list's options carry into the iframe. A list in an iframe opens transcripts as it does on your page. The heights are 300px for the standard player, 110px for the compact player and for a play button (an iframe button becomes the compact player), 560px for an episode list (it scrolls inside), and 640px for a player with its transcript always open (an iframe never opens it full screen).

Press Copy code (or Copy button code). The button says Copied when it's on your clipboard.

Scheduled episodes ​

A scheduled episode can be picked too, with a note saying when it Goes live. The embed shows nothing until then, so you can add it to a post scheduled for the same time. The link in the code opens the episode page, which goes live on the same date. While your show is suspended, inactive or scheduled for deletion, its embeds show nothing.

If your show is suspended ​

While your show's feed is suspended, every embed says "This show isn't available right now." Embeds tells you so at the top. Code you copy keeps working once the show is restored.

Was this page helpful?