Widget SDK Reference

Technical reference for all widget data attributes, configuration options, and advanced usage.

SDK setup

Include the SDK script once per page:

<script src="https://embedded.autopod.xyz/sdk/autopod-widgets.js"
        data-autopod-api="https://player.autopod.xyz"
        data-autopod-rss="https://rss.autopod.xyz"></script>

The SDK automatically scans the page for elements with data-autopod-widget and renders the appropriate component.

Global data attributes

These attributes go on the <script> tag:

Attribute	Purpose	Default
data-autopod-api	Base URL for the player API	https://player.autopod.xyz
data-autopod-rss	Base URL for RSS feeds	https://rss.autopod.xyz

Widget element attributes

These attributes go on each widget <div>:

Required

Attribute	Type	Description
data-autopod-widget	String	Widget type (see table below)
data-station	String	Station slug (from your stream's RSS filename)

Content filtering

Attribute	Type	Description
data-show	Number	Filter to a specific show ID
data-episode	Number	Display a specific episode ID
data-limit	Number	Maximum items to display (default: 10)

Appearance

Attribute	Type	Options	Default
data-theme	String	light, dark, system	system
data-accent-color	String	Hex colour (e.g., #ff0000)	Station colour
data-bg-color	String	Hex colour	Theme default
data-border-color	String	Hex colour or none	Theme default
data-variant	String	default, minimal, borderless	default
data-border-radius	String	none, sm, md, lg, xl, full	md
data-shadow	String	none, sm, md, lg	sm
data-padding	String	none, sm, md, lg	md
data-font	String	Font family name	System font

Behaviour

Attribute	Type	Description
data-position	String	Mini Bar position: top or bottom
data-label	String	Custom text for Launch Button
data-density	String	Schedule density: compact, default, comfortable
data-hide-past	Boolean	Schedule: hide past shows (true/false)
data-player-url	String	Custom player URL for "Open in Player" links
data-rss-base-url	String	Custom RSS base URL

Widget types

data-autopod-widget value	Component
episodes	Episode list
schedule	Schedule grid (7-day)
schedule-agenda	Schedule agenda (vertical list)
schedule-strip	Schedule strip (horizontal timeline)
schedule-compact	Schedule compact
shows	Shows grid
show-carousel	Shows carousel
show-card	Single show card
show-player	Show-focused player
episode-card	Single episode card
player	Inline player
mini-bar	Compact sticky player
featured	Featured episode
listen-live	Live stream player
on-air	On-air badge
launch-button	Listen Now button
player-button	Play button
now-next	Now/next schedule
search	Episode search
podcast-subscribe	Podcast subscription links
station-hero	Station hero section

Colour cascade

Widgets resolve colours in this priority order:

1. HTML data attributes (highest priority — e.g., data-accent-color)
2. Player settings (configured in the dashboard)
3. Stream defaults (your station's base colour)
4. SDK defaults (neutral fallback)

This means you can set colours once in the dashboard and all widgets pick them up, or override per-widget with data attributes.

Dynamic content (SPA support)

The SDK uses a MutationObserver to detect widgets added to the page after initial load. This means widgets work in single-page applications (React, Vue, Angular, etc.) — just add the element to the DOM and the SDK initialises it automatically.

Audio engine

All playback widgets on a page share a single audio engine instance. This means:

• Starting playback in one widget pauses any other playing widget
• Playback state (current time, playing/paused) is synced across all widgets
• Queue management works across widget boundaries

Examples

Episode list with custom styling

<div data-autopod-widget="episodes"
     data-station="my-station"
     data-limit="5"
     data-theme="dark"
     data-accent-color="#22c55e"
     data-variant="borderless"
     data-border-radius="lg"></div>

Live player with schedule strip

<div data-autopod-widget="listen-live"
     data-station="my-station"
     data-theme="dark"></div>

<div data-autopod-widget="schedule-strip"
     data-station="my-station"
     data-hide-past="true"></div>

Minimal show-specific player

<div data-autopod-widget="show-player"
     data-station="my-station"
     data-show="42"
     data-variant="minimal"
     data-shadow="none"></div>