Easy Discord Widget

[TonyC]

Made an easy Discord widget for your forum

Go to: Appearance>Widgets>+Wegets>Select Wideget definition: HTML:
Add Key: Discord
Add Title: Discord Server Status (Or whatever you want)
Select where you want to display (Forum List: Sidebar for main page)

Paste code in Template: (DONT FORGET TO PUT YOUR SERVER LINK & DISCORD CHANNEL ID IN)

<div class="block discord-status">
<div class="block-container">
<div class="block-body">
<div id="discord-online-count" class="discord-online-count">Loading...</div>
<div class="discord-join">
<a href="PUT YOUR SERVER LINK HERE" class="button button--primary" style="display: block; margin-bottom: 10px;">Join Our Discord</a>
</div>
</div>
</div>
</div>

<script>
(function() {
const DISCORD_SERVER_ID = 'PUT YOUR DISCORD HERE';
const API_URL = `https://discord.com/api/guilds/${DISCORD_SERVER_ID}/widget.json`;

fetch(API_URL)
.then(response => {
if (!response.ok) throw new Error("Widget not enabled or server ID invalid");
return response.json();
})
.then(data => {
const count = data.presence_count;
document.getElementById('discord-online-count').innerText = `${count} user${count !== 1 ? 's' : ''} online`;
})
.catch(error => {
console.error('Error fetching Discord widget data:', error);
document.getElementById('discord-online-count').innerText = 'Unable to load Discord status.';
});
})();
</script>

<style>
/* Discord Widget Styles for XenForo */
.discord-status {
margin: 10px 0;
}

.discord-online-count {
margin: 5px 0 10px;
font-weight: bold;
}

.discord-join .button--primary {
display: inline-block;
}
</style>