Comment afficher les membres Discord en ligne sur son site web (Widget Discoverse)

Comparer les façons d'afficher les stats Discord sur un site

Pour afficher les chiffres live d'une communauté sur son propre site, on choisit en général l'une de ces trois approches :

Pourquoi le widget Discoverse

• Zéro code applicatif : élément custom `<discoverse-card>`.
• Stats live via l'API Discoverse (online, total, invitation).
• Thèmes CSS (`theme`, `primary-color`, `layout`, `language`).
• Compatible sites statiques, WordPress, Webflow, SPA.
• Même source de données live que les fiches discoverse.net.

Intégration rapide (copier-coller)

Remplacez `YOUR_SERVER_ID` par le snowflake Discord d'un serveur listé sur Discoverse (bot présent), ou par un vanity premium actif.

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

Chargez `embed.js` une seule fois par page. Vous pouvez placer plusieurs `<discoverse-card>` avec des `server-id` différents. Chaque carte affiche toujours un lien d'attribution Discoverse.

Où trouver `server-id`

Ouvrez la fiche communauté sur Discoverse (`/discord/servers/...`). L'ID numérique est le snowflake ; les communautés premium peuvent utiliser leur vanity. L'ID doit correspondre à une guilde listée avec le bot Discoverse.

Attribution Discoverse obligatoire

L'utilisation gratuite du widget Discoverse exige un lien visible vers Discoverse. L'embed officiel affiche toujours ce crédit ; ne le masquez pas, ne le recouvrez pas et ne le supprimez pas.

• Le widget affiche toujours un lien « Powered by Discoverse » pointant vers la fiche communauté sur discoverse.net (ou vers la doc si la carte n'a pas pu se charger).
• Aucun attribut ne permet de désactiver l'attribution. Les interfaces custom basées sur l'API Cards doivent inclure un lien visible équivalent vers l'URL `url` renvoyée par l'API.
• Retirer ou obscurcir le crédit n'est pas autorisé dans le cadre des conditions du widget gratuit.

Attributs de personnalisation

Tous les attributs sont des attributs HTML sur `<discoverse-card>`.

Spécification technique — API REST Cards

L'embed charge du JSON depuis l'API publique Cards. Vous pouvez appeler le même endpoint depuis votre backend ou edge worker. Si vous affichez votre propre UI, vous devez toujours montrer un lien visible vers l'`url` renvoyée.

URLs de base

Production (même origine que le site) :
`GET https://discoverse.net/api/v1/cards/{serverId}`

Hôte API dédié (réécrit vers le même handler) :
`GET https://api.discoverse.net/v1/cards/{serverId}`

Exemple de requête

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

Exemple de réponse JSON

{
  "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"
}

Champs de réponse

• `id` (string) — snowflake Discord.
• `kind` (string) — actuellement `discord`.
• `name` (string) — nom affiché.
• `online_members` (number | null) — membres en ligne si disponibles.
• `total_members` (number | null) — total si disponible.
• `icon_url` (string) — URL d'icône CDN (avatar de repli sinon).
• `invite_url` (string | null) — invitation Discord si configurée.
• `status` — `online` | `idle` | `offline` | `unknown` (dérivé du compte online).
• `url` (string) — URL canonique de la fiche Discoverse (cible d'attribution obligatoire pour les UI custom).
• `updated_at` (ISO-8601) — horodatage de la réponse.

CORS, cache et exigences

L'endpoint Cards envoie `Access-Control-Allow-Origin: *` pour les appels navigateur depuis des sites tiers. Les réponses sont cacheables ~30–60 s (`Cache-Control` / `CDN-Cache-Control`). API publique en lecture seule, best-effort — pas un substitut aux API privilégiées Discord.

Prérequis

• Le serveur Discord doit être listé sur Discoverse avec le bot Discoverse.
• Gardez le lien d'attribution Discoverse du widget visible (obligatoire).
• Pour un bouton Rejoindre fiable, configurez une URL d'invitation dans le dashboard Discoverse lorsque c'est possible.
• Navigateurs modernes avec Custom Elements + Shadow DOM (tous les navigateurs evergreen actuels).

Réponses d'erreur

`400 invalid_server_id` — id manquant/invalide.
`404 not_found` — aucune guilde listée (non listée, blacklistée, ou bot absent).
Le Web Component affiche « Indisponible » en cas d'échec (le lien d'attribution reste affiché).

FAQ

Est-ce le widget officiel Discord ?

Non. C'est l'embed Discoverse, avec stats live Discoverse et thèmes que vous contrôlez.

Dois-je héberger un bot ?

Non. Discoverse gère déjà l'infra bot pour les communautés listées.

Puis-je masquer le lien Discoverse ?

Non. L'attribution est obligatoire et intégrée à `embed.js`. Les UI custom basées sur l'API Cards doivent inclure un lien visible équivalent vers `url`.

Et les serveurs de jeu ?

L'API Cards v1 documente les communautés Discord. Les cartes serveurs de jeu pourront réutiliser le même modèle d'embed dans une version ultérieure de l'API ; suivez cette page de docs pour les mises à jour.

À quelle fréquence les chiffres bougent-ils ?

Le widget fetch au montage. Cache HTTP court (dizaines de secondes). Les stats live suivent le pipeline d'activité Discoverse.