How to Add a Discord Online Users Widget to Your Website
Looking for an easy way to show your Discord server activity on your website? With a few quick steps, you can embed a live Discord widget that shows who’s online and includes a direct invite link. It’s perfect for building trust and growing your community.
Table of Contents
Why Add a Discord Widget?
Whether you’re running a gaming hub, developer server, or support community, a Discord online users widget boosts credibility and conversions:
- Shows your server is active-visitors see real-time online users.
- Encourages people to join-a one-click invite accelerates growth.
- Makes your site feel alive-great for brand- and community-driven platforms.
Step 1-Open Your Server Settings
Open Discord and go to your server. Click the server name in the top-left, then choose Server Settings. This is where you’ll enable the widget feature.
Step 2-Turn On the Server Widget
Inside Engagement, toggle on Server Widget. Discord will expose a public endpoint that powers your widget with live data.
Step 3-Grab Your Widget JSON URL
Once enabled, you’ll see an API URL similar to:
https://discord.com/api/guilds/YOUR_SERVER_ID/widget.jsonThis Discord JSON API returns real-time presence, member avatars, and an invite link, perfect for a lightweight custom widget.
Step 4-Embed the Widget on Your Site
Below is a minimal, Bootstrap-friendly implementation. Replace
YOUR_API_URL and YOUR_INVITE with your values.
🔹 CSS: Basic Styling
<style>
#discord-widget {
background-color: var(--bs-light);
border-left: .25rem solid #5865F2;
transition: box-shadow .2s ease-in-out;
}
#discord-widget:hover { box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); }
#discord-avatars img {
width: 24px; height: 24px; object-fit: cover;
}
</style>🔸 HTML: Widget Structure
<div id="discord-widget" class="p-3 rounded shadow-sm text-center">
<h5 class="mb-1">Join Our Community</h5>
<p id="discord-online" class="text-muted mb-3">Loading...</p>
<div id="discord-avatars" class="d-flex justify-content-center flex-wrap gap-2 my-3"></div>
<a href="https://discord.gg/YOUR_INVITE" class="btn btn-primary">
<i class="bi bi-discord me-1"></i> Join Now
</a>
</div>🟢 JavaScript: Load the Live Data
<script>
(function(){
const API_URL = 'YOUR_API_URL';
const onlineEl = document.getElementById('discord-online');
const avatarsEl = document.getElementById('discord-avatars');
fetch(API_URL, { cache: 'no-store' })
.then(r => r.json())
.then(data => {
onlineEl.textContent = `${data.presence_count} users online`;
avatarsEl.innerHTML = '';
(data.members || []).slice(0, 40).forEach(m => {
const img = document.createElement('img');
img.src = m.avatar_url;
img.alt = m.username;
img.className = 'rounded-circle';
img.setAttribute('data-bs-toggle', 'tooltip');
img.title = m.username;
avatarsEl.appendChild(img);
});
// Init Bootstrap tooltips lazily
const tts = document.querySelectorAll('[data-bs-toggle="tooltip"]');
[...tts].forEach(el => new bootstrap.Tooltip(el));
})
.catch(() => {
onlineEl.textContent = 'Unable to load status';
});
// Copy helpers for buttons
document.querySelectorAll('[data-copy-prev]').forEach(btn => {
btn.addEventListener('click', () => {
const code = btn.parentElement.querySelector('pre').innerText;
navigator.clipboard.writeText(code.trim());
btn.innerText = 'Copied!';
setTimeout(() => (btn.innerText = 'Copy'), 1500);
});
});
document.querySelectorAll('[data-copy-target]').forEach(btn => {
btn.addEventListener('click', () => {
const target = document.querySelector(btn.getAttribute('data-copy-target'));
navigator.clipboard.writeText(target.textContent.trim());
btn.innerText = 'Copied!';
setTimeout(() => (btn.innerText = 'Copy'), 1500);
});
});
})();
</script>loading="lazy" for any
images, and place scripts at the end of the page.
Step 5-Make It Yours
- Match your branding: tweak fonts, colors, spacing via Bootstrap utilities.
-
Avatar size: change
24pxto32pxfor larger faces. - Placement: sidebar card, community page hero area, or a footer strip.
<div id="discord-widget" class="p-3 rounded shadow-sm text-center bg-dark text-light">
<h5 class="mb-1">Join Our Community</h5>
<p id="discord-online" class="text-secondary mb-3">Loading...</p>
<div id="discord-avatars" class="d-flex justify-content-center flex-wrap gap-2 my-3"></div>
<a href="https://discord.gg/YOUR_INVITE" class="btn btn-light">
<i class="bi bi-discord me-1"></i> Join Now
</a>
</div>You’re All Set!
Your site now displays a live Discord online users widget. It shows real-time activity and makes joining effortless, ideal for gaming communities, support groups, and creator networks. Customize the design, reuse it across pages, and keep the Server Widget enabled for automatic updates.