Owncast Live Badge

CORS-Enabled (API Detection)

These instances have CORS headers — the badge uses /api/status for definitive detection.

No CORS (Thumbnail Fallback)

These instances lack CORS headers — the badge falls back to aspect ratio detection.

Pill Style (Dark)

Card Style (Light)

Pill Style (Light)

Hide When Offline

These badges are hidden when the stream is offline. If you see nothing, nobody's live.

Usage

<!-- Minimal: just point it at an Owncast instance -->
<owncast-badge instance="https://stream.example.com"></owncast-badge>

<!-- With a display name -->
<owncast-badge instance="https://stream.example.com"
  name="My Stream"></owncast-badge>

<!-- Compact pill style -->
<owncast-badge instance="https://stream.example.com"
  variant="pill"></owncast-badge>

<!-- Light theme, hidden when offline -->
<owncast-badge instance="https://stream.example.com"
  theme="light"
  hide-offline></owncast-badge>

<!-- Include the script -->
<script src="owncast-badge.js"></script>