Discord-Online-Mitglieder auf Ihrer Website anzeigen (Discoverse Widget)

Wege, Discord-Statistiken auf einer Website anzuzeigen

Wenn Betreiber Live-Zahlen ihrer Community auf der eigenen Site zeigen wollen, wählen sie meist einen von drei Ansätzen:

Warum das Discoverse-Widget

• Kein Anwendungscode: Drop-in Custom Element `<discoverse-card>`.
• Live-Statistiken über die Discoverse API (Online-Mitglieder, Gesamtmitglieder, Einladung).
• CSS-freundliches Theming (`theme`, `primary-color`, `layout`, `language`).
• Funktioniert auf statischen Sites, WordPress-HTML-Blöcken, Webflow-Embeds und SPAs.
• Gleiche Live-Datenquelle wie discoverse.net-Listings.

Schnelle Integration (Kopieren & Einfügen)

Ersetzen Sie `YOUR_SERVER_ID` durch die Discord-Snowflake eines auf Discoverse gelisteten Servers (Bot vorhanden) oder durch einen aktiven Premium-Vanity-Slug.

<discoverse-card
  server-id="YOUR_SERVER_ID"
  theme="dark"
  show-members="true"
  show-online="true"
  show-join="true"
  layout="card"
  language="de"
  primary-color="#5865F2"
></discoverse-card>
<script src="https://discoverse.net/widget/v1/embed.js" async></script>

Laden Sie `embed.js` einmal pro Seite. Sie können mehrere `<discoverse-card>`-Elemente mit unterschiedlichen `server-id`-Werten platzieren. Jede Karte zeigt immer einen Discoverse-Attributionslink.

Wo finde ich `server-id`

Öffnen Sie Ihre Community-Seite auf Discoverse (`/discord/servers/...`). Die numerische Discord-ID ist die Snowflake; Premium-Communities können auch ihr Vanity-Segment nutzen. Die ID muss einer gelisteten Gilde mit vorhandenem Discoverse-Bot entsprechen.

Erforderliche Discoverse-Attribution

Die kostenlose Nutzung des Discoverse-Widgets erfordert einen sichtbaren Link zurück zu Discoverse. Das offizielle Embed rendert diesen Credit immer; verstecken, überdecken oder entfernen Sie ihn nicht.

• Das Widget zeigt immer einen „Powered by Discoverse“-Link zur Community-Listing auf discoverse.net (oder zur Docs-Seite, wenn die Karte nicht geladen werden konnte).
• Es gibt kein Attribut zum Deaktivieren der Attribution. Eigene UIs auf Basis der Cards API müssen einen gleichwertigen sichtbaren Link zur von der API zurückgegebenen Listing-`url` enthalten.
• Das Entfernen oder Verdecken des Credits ist laut den Bedingungen des kostenlosen Widgets nicht erlaubt.

Anpassungsattribute

Alle Attribute sind HTML-Attribute auf `<discoverse-card>`.

Technische Spezifikation — Cards REST API

Das Embed lädt JSON von der öffentlichen Cards API. Sie können denselben Endpunkt aus Ihrem Backend oder Edge Worker aufrufen. Wenn Sie eine eigene UI rendern, müssen Sie weiterhin einen sichtbaren Link zur zurückgegebenen `url` anzeigen.

Basis-URLs

Produktion (gleiche Origin wie die Site):
`GET https://discoverse.net/api/v1/cards/{serverId}`

Dedizierter API-Host (leitet auf denselben Handler um):
`GET https://api.discoverse.net/v1/cards/{serverId}`

Beispielanfrage

GET /api/v1/cards/123456789012345678 HTTP/1.1
Host: discoverse.net
Accept: application/json

Beispiel-JSON-Antwort

{
  "id": "123456789012345678",
  "kind": "discord",
  "name": "Example Community",
  "online_members": 142,
  "total_members": 8120,
  "icon_url": "https://cdn.discordapp.com/icons/.../icon.png?size=128",
  "invite_url": "https://discord.gg/xxxxxx",
  "status": "online",
  "url": "https://discoverse.net/discord/servers/123456789012345678",
  "updated_at": "2026-09-18T18:00:00.000Z"
}

Antwortfelder

• `id` (string) — Discord-Snowflake.
• `kind` (string) — derzeit `discord`.
• `name` (string) — Anzeigename.
• `online_members` (number | null) — Live-Online-Zahl, wenn verfügbar.
• `total_members` (number | null) — Gesamtmitglieder, wenn verfügbar.
• `icon_url` (string) — CDN-Icon-URL (Fallback-Avatar falls fehlend).
• `invite_url` (string | null) — Discord-Einladung, wenn auf Discoverse konfiguriert.
• `status` — `online` | `idle` | `offline` | `unknown` (abgeleitet von der Online-Zahl).
• `url` (string) — kanonische Discoverse-Listing-URL (Pflicht-Attributionsziel für eigene UIs).
• `updated_at` (ISO-8601) — Zeitpunkt der Antwortgenerierung.

CORS, Caching und Anforderungen

Der Cards-Endpunkt sendet `Access-Control-Allow-Origin: *`, damit Browser ihn von Drittanbieter-Sites aufrufen können. Antworten sind ~30–60 Sekunden cachebar (`Cache-Control` / `CDN-Cache-Control`). Behandeln Sie die API als öffentlichen, schreibgeschützten Live-Feed nach best effort — kein Ersatz für Discords privilegierte APIs.

Voraussetzungen

• Der Discord-Server muss auf Discoverse gelistet sein und der Discoverse-Bot muss vorhanden sein.
• Halten Sie den Discoverse-Attributionslink des Widgets sichtbar (Pflicht).
• Für einen funktionierenden Beitreten-Button konfigurieren Sie nach Möglichkeit eine Invite-URL im Discoverse-Dashboard.
• Moderne Browser mit Custom Elements + Shadow DOM (alle aktuellen Evergreen-Browser).

Fehlerantworten

`400 invalid_server_id` — fehlende/ungültige ID.
`404 not_found` — keine passende gelistete Gilde (nicht gelistet, blacklisted oder Bot fehlt).
Die Web Component zeigt bei Fehlern den lokalisierten Zustand „Nicht verfügbar“ (Attributionslink bleibt sichtbar).

FAQ

Ist das das offizielle Discord-Widget?

Nein. Es ist das Discoverse-Embed. Es nutzt Discoverse-Live-Statistiken und von Ihnen steuerbare Theme-Einstellungen.

Muss ich einen Bot hosten?

Nein. Discoverse betreibt die Bot-Infrastruktur für gelistete Communities bereits.

Kann ich den Discoverse-Link ausblenden?

Nein. Attribution ist Pflicht und in `embed.js` eingebaut. Eigene Cards-API-UIs müssen einen gleichwertigen sichtbaren Link zu `url` enthalten.

Unterstützt es Game-Server?

Die Cards API v1 dokumentiert Discord-Communities. Game-Server-Karten können in einer späteren API-Version dasselbe Embed-Muster nutzen; beobachten Sie diese Docs-Seite für Updates.

Wie oft aktualisieren sich die Zahlen?

Das Widget lädt beim Mount. HTTP-Caching ist kurz (Zehner Sekunden). Die zugrunde liegenden Discoverse-Live-Statistiken aktualisieren sich über die Aktivitäts-Pipeline der Plattform.