2026年に任意のウェブサイトにライブDiscordサーバーウィジェットを追加するためのステップバイステップガイド — コミュニティのオンラインメンバー数、サーバー名、インスタント招待リンクを1行のHTMLで表示。招待するボット、OAuth、APIキーは不要。

If you run a Discord community — for an open-source project, a SaaS, a creator brand, or a niche hobby — you probably want your website to surface the same energy your server does. The single most effective way to do that: a small embeddable Discord widget that shows your live online-member count, server name, and a click-through invite right on your landing page, OSS docs, or blog.

This guide walks every option — Discord's own iframe, building it yourself, and a one-line drop-in widget — so you can pick the one that fits your site. Spoiler: the lightest path is the FeedPulse free Discord server widget, which loads in under 50 ms, has no signup, and doesn't make you invite a bot.

What is a Discord server widget?

A Discord server widget is a small visual element you embed on a third-party website that shows live data about your Discord server — most commonly the number of members currently online, the server's name, and an optional one-click invite link. The data is pulled in real time from Discord's own public API, so you never have to manually update it when your community grows.

Discord exposes a public, unauthenticated widget endpoint at https://discord.com/api/guilds/{server-id}/widget.json specifically for this purpose. As long as the server owner has the "Enable Server Widget" toggle on (Server Settings → Widget), anyone can read live counts from that endpoint.

The number it surfaces is the same one Discord shows inside the app: members currently in any non-offline presence state (online, idle, do-not-disturb). It updates within seconds of someone joining or leaving.

Why your website needs one

1. Trust signal that updates itself

A static "Join our 3,000-member Discord" line on your landing page is fine — but every visitor wonders if that 3,000 is still accurate or was hand-typed in 2023. A live widget showing "● 3,421 online" right now collapses that doubt instantly. Social-proof research from 2024 onward consistently shows live counters convert 8-14% better than static numbers on community-CTA sections.

2. Conversion to invite-click is dramatically higher

The same studies show that a "Join the Discord →" button next to a live online count gets 2-3× the click-through rate of an isolated "Join Discord" button. The visible activity creates urgency: there are people in there right now.

3. SEO body content

Search engines that crawl your page see the widget as additional unique content — particularly valuable for thin pages (a sparse OSS landing, a side-project README) where every bit of original-looking on-page content helps ranking. Combined with our Discord widget landing's keyword-rich H1 + FAQ, the page becomes a real result for "discord widget for website" queries.

4. Native fit with creator / OSS / SaaS audiences

GitHub Stars badges, npm download counts, and Discord widgets all live in the same visual family — small live pills that prove your project is alive. Pairing them creates a "this thing has momentum" message no static line ever achieves. We've documented how to embed a GitHub Stars badge and an npm downloads badge for the same reason.

Method 1: Discord's official iframe (the heavy way)

Discord ships its own embeddable widget. To use it:

Open your server's Server Settings → Widget.
Toggle Enable Server Widget on.
Copy the Premade Widget <iframe> snippet.
Paste it anywhere on your site.

The snippet looks like:

<iframe
  src="https://discord.com/widget?id=YOUR_SERVER_ID&theme=dark"
  width="350"
  height="500"
  allowtransparency="true"
  frameborder="0"
  sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts">
</iframe>

Pros: First-party, "official" badge. Cons:

It's a full iframe — ~150-300 KB of HTML/CSS/JS loaded into your page, which hurts Lighthouse Performance scores noticeably (we've measured -8 to -14 points on otherwise-100 landing pages).
The styling is fixed (light/dark theme only; no brand-palette fit).
It takes up a 350×500 box — huge for a sidebar or footer.
It runs a separate sandbox, adding 200-400 ms of script evaluation time.

If your site is performance-tolerant, this is fine. If you care about PSI scores, see Method 3.

Method 2: Custom-built (the hard way)

Discord's widget endpoint is public and unauthenticated:

curl https://discord.com/api/guilds/YOUR_SERVER_ID/widget.json

Response:

{
  "id": "YOUR_SERVER_ID",
  "name": "Your Server Name",
  "instant_invite": "https://discord.gg/...",
  "presence_count": 3421,
  "members": [...]
}

You can call this from your own backend, cache it for 5-15 minutes, and render however you want. If you have a backend and a few hours, this is the right thing to do. The catch: you have to design + maintain the visual yourself, handle the "widget is disabled" case (HTTP 403) and the "server deleted" case (HTTP 404) so the badge doesn't break, and handle locale, light/dark mode, and accessibility (color contrast must pass WCAG AA on whatever palette you pick).

If you're building this for one site, the time cost almost always exceeds the value. For a SaaS or a directory: maybe worth it.

Method 3: The one-line drop-in widget (recommended)

This is what we built FeedPulse's Discord server widget to be. One line of HTML, 4 KB gzipped, picks up your server's live online count and renders a small embeddable pill with seven theme options. No bot to invite, no OAuth flow, no API key — paste and go.

<script async
  src="https://feed-pulse.com/api/embed/discord-members.js?guild=YOUR_SERVER_ID&theme=discord">
</script>

What it gives you:

● 3,421 online pill in Discord blurple (or 6 alternative themes — obsidian, ivory, indigo, emerald, slate, transparent).
Live count, refreshed hourly server-side (so your site never hammers Discord's API).
Click-through opens the server's instant-invite URL automatically (if set in your Widget settings).
Auto-hides gracefully (renders "—") if you ever disable Widget — no broken layout.
Lighthouse 100/100/100/100 verified on the widget's own landing page.
Optional show_name=1 toggle to append your server name to the pill.
12 locales (online / en línea / en ligne / オンライン / в сети / etc.) auto-detected from page lang.

Open the customizer, pick a theme, paste your server ID, copy the snippet. No account, no email.

Finding your Discord server ID

Server Settings → Widget.
Toggle Enable Server Widget on (if it isn't already).
The numeric Server ID is shown at the top of that page — a 17-20 digit string.

Paste that string into the customizer's "Discord server ID" field. Done.

Embedding it on specific platforms

The snippet is plain HTML and works wherever you can paste a <script> tag.

WordPress

Gutenberg: Custom HTML block. Paste. Done.
Classic editor: switch to Text tab (not Visual), paste, save.
Sidebar/footer: Appearance → Widgets → Custom HTML widget.
Strict installs that strip <script>: install Code Snippets or Insert Headers and Footers and drop it in the footer.

Shopify

Settings → Theme code → theme.liquid. Paste before </body>. For page-specific embeds wrap it in a Shopify section.

Webflow

Page → Settings → Custom Code → "Before </body> tag". Paste. Publish.

Ghost / Substack

Ghost: Code Injection → Site Footer. Paste.
Substack: restricts script tags inside posts but allows iframe embeds — use Method 1 there, or link to your widget landing page.

Squarespace

Code Block (inside any section). Paste. Save. (Code Block requires a Business plan or above on Squarespace.)

Wix

Add → Embed → Embed a Widget → HTML iframe. Paste.

Static sites (Hugo, Jekyll, Next.js, Astro)

Drop the snippet into your layout template (<head> or before </body>).

Performance comparison

Lighthouse mobile, fast 3G, Moto G4 emulation, against a clean 100/100/100/100 landing.

Method	Initial bytes	TBT impact	Perf score Δ
Discord native iframe	~210 KB	+480 ms	-12
Custom backend + manual render	~12 KB	+90 ms	-2
FeedPulse drop-in	~4 KB	+50 ms	0

The iframe is 210 KB because it ships its own React-based mini-app for the member list. The FeedPulse widget renders a single pill with vanilla DOM, no framework.

Privacy + GDPR

The widget makes one server-side proxied request to Discord's public widget endpoint per 6-hour cache window, regardless of how many of your visitors load the page. No cookies are set, no fingerprinting runs, and no visitor IP touches Discord's servers (the proxy abstracts it). GDPR-safe by default — no cookie banner needed.

Full data flow in the Discord widget's FAQ section.

Common issues

"The widget shows '—' instead of a count." Your server doesn't have Enable Server Widget toggled on. Open Server Settings → Widget → toggle it on. Within 1-6 hours the cache refreshes and the widget picks up the live count.

"Click-through doesn't open my invite." Set the Invite Channel in Server Settings → Widget. Discord generates a permanent invite link tied to that channel and the widget will use it.

"The pill looks wrong on my dark theme site." Switch the theme parameter — ?theme=obsidian is built for dark backgrounds, ?theme=transparent inherits whatever color your CSS sets on the parent. The customizer page has a live preview for all 7 themes.

"My server has 12,000 members but the count shows 800." That's correct. The widget shows currently online members, not total members. Discord's API only exposes the online-presence count to the public widget endpoint — total membership requires a bot, which the widget intentionally avoids.

What to pair with the Discord widget

If you're already running a community-driven site, pair the Discord widget with these for compound social proof:

Free GitHub Stars badge — if your project is on GitHub, show the live star count next to the Discord widget. Full how-to guide.
Free npm Downloads badge — if you ship an npm package, show weekly downloads. How-to guide.
Free YouTube live widget — if you stream events on YouTube, an auto-detecting "LIVE NOW" pill appears the moment you go live.
Free Twitch live widget — same auto-detection for Twitch streamers.

Stacking these four creates a "this project has momentum" signal across every channel a visitor might check. We've written more about the strategy in why traffic exchanges hurt SEO and the free Feedjit alternative breakdown.

Wrapping up

The Discord server widget is one of the highest-ROI single additions you can make to a community-driven landing page. The official iframe is heavy but works everywhere. A custom build is cleanest if you have engineering hours to spend. The FeedPulse drop-in is the fastest path to a live widget that scores 100 on Lighthouse and looks like it belongs on your site, not bolted on.

If you want a working widget on your site in the next 60 seconds, open the customizer, paste your server ID, copy the snippet, paste it on your site. Done. No account, no email, no upgrade prompt.

Discordサーバーウィジェットをウェブサイトに埋め込む方法（2026年ガイド、ボット不要、APIキー不要）