Skip to main content

Widget Issues

Problems with embedded widgets — not appearing, looking wrong, or not showing the right content.

Widget not appearing​

Check the SDK script is loaded​

Every page with widgets needs the SDK script tag. Make sure this appears once on your page (in the <head> or before </body>):

<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>

If the script tag is missing, widgets won't render.

Check the station slug​

The data-station attribute must match your station's RSS filename exactly:

<div data-autopod-widget="episodes" data-station="my-station"></div>

You can find your RSS filename in Stream Settings in the dashboard. It's the part of your RSS feed URL before .xml — for example, if your feed is https://rss.autopod.xyz/my-station.xml, the slug is my-station.

Check the widget type​

The data-autopod-widget attribute must be a valid widget type. Check the spelling matches one of the available widget types.

Check for JavaScript errors​

Open your browser's developer tools (F12 → Console tab) and look for error messages. Common errors:

  • 404 on the SDK script — Check the script URL is correct
  • CORS errors — The SDK needs to reach player.autopod.xyz and rss.autopod.xyz. If your site is behind a firewall or proxy, make sure these domains are accessible.
  • Content Security Policy — If your website has a strict CSP, you may need to allow embedded.autopod.xyz, player.autopod.xyz, and rss.autopod.xyz in your script-src and connect-src directives.

Check the widget div isn't hidden​

If the widget's parent element has display: none, visibility: hidden, or height: 0, the widget won't be visible. Check your page's CSS for rules that might be hiding the container.

Widget shows no content​

Stream has no published shows​

Widgets only display content from published shows. If all your shows are unpublished, content widgets (episodes, shows grid, etc.) will appear empty.

No episodes yet​

If your station is newly set up and hasn't generated any episodes yet, episode-related widgets will be empty. The automation pipeline needs time to record, process, and publish episodes.

Wrong show or episode ID​

If you're using data-show or data-episode to filter content, make sure the IDs are correct:

<!-- Filter to show ID 42 -->
<div data-autopod-widget="episodes" data-station="my-station" data-show="42"></div>

You can find show and episode IDs in the dashboard URL when viewing them (e.g., /shows/42).

Widget looks wrong​

Style isolation​

Widgets render inside a Shadow DOM, which means:

  • Your website's CSS doesn't affect the widget
  • The widget's CSS doesn't affect your website

If the widget looks unexpected, it's likely a container issue rather than a CSS conflict.

Container width​

Widgets fill the width of their parent container. If the widget looks too narrow or too wide, adjust the width of the container element:

<!-- Constrain widget width -->
<div style="max-width: 600px;">
    <div data-autopod-widget="episodes" data-station="my-station"></div>
</div>

Theme​

If the widget's colour scheme doesn't match your site, set the theme explicitly:

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

Options: light, dark, or system (follows visitor's device preference).

Accent colour​

To match your website's colour scheme, set the accent colour:

<div data-autopod-widget="episodes" data-station="my-station" data-accent-color="#e63946"></div>

Widget not updating​

API caching​

The widget API caches responses for 30 seconds. New episodes or schedule changes appear within 30 seconds of publication.

Browser caching​

If you've changed widget attributes and the widget isn't reflecting the changes:

  1. Hard refresh the page (Ctrl+Shift+R or Cmd+Shift+R)
  2. Clear your browser cache
  3. Check you saved the HTML changes to your website

CDN caching​

If your website uses a CDN (Cloudflare, etc.), the CDN may be serving an older version of your page. Purge the CDN cache or wait for it to expire.

Multiple widgets on one page​

Only include the SDK script once​

If you include the SDK <script> tag multiple times, it may cause issues. Include it once per page, then add as many widget <div> elements as you need.

Audio engine is shared​

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

  • Starting playback in one widget pauses any other playing widget
  • This is by design — it prevents two audio streams playing simultaneously

Widgets in website builders​

WordPress​

Use a Custom HTML block (Gutenberg editor) or the Text tab (classic editor). Don't use the Visual editor for pasting HTML — it can strip attributes.

Squarespace​

Use a Code block. Make sure you include both the script tag and the widget div.

Wix​

Use an HTML iframe element. Paste the embed code in the code panel. Note that Wix may sandbox the iframe, which can affect some interactive features.

Other platforms​

Any platform that supports raw HTML will work. Look for "HTML embed", "code block", or "custom code" options.

Widgets in single-page applications​

The SDK uses a MutationObserver to detect widgets added to the DOM dynamically. This means widgets work automatically in React, Vue, Angular, and other SPA frameworks — just render the widget <div> and the SDK picks it up.

Make sure the SDK script is loaded before your app framework mounts. The simplest approach is to add it to your index.html <head> section.