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.

Why Add a Discord Widget?

Whether you’re running a gaming hub, developer server, or support community, having a Discord widget on your site has clear benefits:

• Shows your server is active , Visitors can instantly see real-time online users.
• Encourages people to join , A one-click invite button makes it easy.
• Makes your site feel alive , Especially if you’re building a brand or community-driven platform.

Step 1: Open Your Server Settings

First, open Discord and head to your server. Click the server name in the top-left corner, then select Server Settings from the menu. This is where you’ll turn on the widget feature.

Step 2: Turn On the Server Widget

In the settings menu, go to the Engagement section. Scroll until you find the option labeled Server Widget and switch it on. Once you do, Discord will give you a special link that lets your site pull live data from your server.

Step 3: Grab Your Widget JSON URL

Once the widget is enabled, you’ll see a URL that looks something like this:

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

That’s your Discord JSON API endpoint. It contains live data about your server, like who's online, their avatars, and the invite link. You’ll use it in your website’s code next.

Step 4: Embed the Widget on Your Site

Now let’s build the actual widget. It only takes a bit of CSS, HTML, and JavaScript. You can copy and paste the code below into your webpage. Don’t forget to update YOUR_API_URL and YOUR_INVITE with your own links.

🔹 CSS: Basic Styling

<style type="text/css">
#discord-widget {
  background-color: var(--bs-light);
  border-left: 5px solid #5865F2;
  transition: box-shadow 0.3s ease;
}
#discord-widget:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
</style>

This gives the widget a soft background, a blue Discord-themed border, and a hover shadow effect to make it pop on your page.

🔸 HTML: Widget Structure

<div id="discord-widget" class="p-3 rounded shadow-sm base-bg text-center">
  <h5>Join Our Community</h5>
  <p id="discord-online" class="text-muted">Loading...</p>
  <div id="discord-avatars" class="d-flex justify-content-center flex-wrap gap-2 my-4"></div>
  <a href="https://discord.gg/YOUR_INVITE" class="btn btn-event">
    <i class="fa-brands fa-discord"></i> Join Now
  </a>
</div>

This layout includes a header, live user count, a row of member avatars, and a join button. Clean and simple.

🟢 JavaScript: Load the Live Data

<script>
fetch('YOUR_API_URL')
  .then(response => response.json())
  .then(data => {
    document.getElementById('discord-online').innerText = `${data.presence_count} users online`;

    const avatarsContainer = document.getElementById('discord-avatars');
    data.members.forEach(member => {
      const img = document.createElement('img');
      img.src = member.avatar_url;
      img.alt = member.username;
      img.className = 'rounded-circle cursor-pointer';
      img.style.width = '16px';
      img.style.height = '16px';
      img.style.objectFit = 'cover';
      img.setAttribute('data-bs-toggle', 'tooltip');
      img.setAttribute('data-bs-placement', 'top');
      img.setAttribute('title', member.username);
      avatarsContainer.appendChild(img);
    });

    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    tooltipTriggerList.forEach(el => new bootstrap.Tooltip(el));
  })
  .catch(() => {
    document.getElementById('discord-online').innerText = `Unable to load status`;
  });
</script>

This script pulls the live data from Discord, updates the online user count, and displays avatars with tooltips for each member. If something goes wrong (like the widget isn’t enabled), it’ll show a fallback message.

Step 5: Make It Yours

Want the widget to match your site's look? You can easily adjust:

• Font sizes, colors, and spacing with Bootstrap or your own CSS.
• Avatar size , change 16px to 32px for bigger faces.
• The join button text or color to fit your theme.

You're All Set!

That’s it , your site now shows a live Discord online users widget! It’s a great way to let visitors know your server is active and worth joining. Whether you run a gaming community, support group, or creative network, this little addition helps connect people in real time.

Feel free to customize the widget even more or include it on multiple pages. As long as the widget is enabled in your Discord settings, it’ll keep working and updating automatically.

Keywords: Discord online widget, embed Discord on website, Discord JSON API, real-time Discord status, Discord member list, live Discord widget, Discord community integration