Context

If you go the server settings on a discord server, there’s an option to enable an embeddable widget. This can be added to other websites via an iframe.

However, I couldn’t really find any info about how to customize the design. I’m sure it’s discussed somewhere in the discord dev portal, but who really wants to look through that mess lol 🫠

Implementation

Luckily, there’s another option to use their json api directly. You can find the copy button for your server’s api url in the server settings (Right Click > Server Settings > Widget).

Just copy this url and fetch it with js, then you can access all the data directly for rendering into a custom component. I’ve achieved this like so:

fetch('https://discord.com/api/guilds/965001852787765268/widget.json')
.then(res => res.json())
.then(data => {
  console.log(data)
})

This is the response my server gives.

Converting this into a Svelte component

Now my site is built using Svelte5 and SvelteKit, so I’m not just using vanilla web tech. This is the completed component that I’m using on this site currently.

<!-- $lib/nav/DiscordWidget.svelte -->

<script>
import { onMount } from 'svelte';
import { urlDiscord } from '$lib/misc/data.js'
import DiscordLogo from 'virtual:icons/ic/baseline-discord';

let discordOnlineCount = $state(0)

async function fetchData() {
  const res = await fetch('https://discord.com/api/guilds/965001852787765268/widget.json')
  const data = await res.json()

  if(res.ok) discordOnlineCount = data.presence_count || 0
}

onMount(() => {
  fetchData()
})
</script>

<a href={urlDiscord} target='_blank' class='group flex gap-1 items-center'>
  <div class='px-2 py-1 bg-gray-50 group-hover:bg-gray-100 rounded-lg'>
    <span class='font-bold'>{discordOnlineCount}</span>
    online
  </div>
  <div><DiscordLogo class='w-8 h-8 p-1 rounded-full bg-gray-50 group-hover:bg-gray-100'/></div>
</a>

Anyway, that’s all there is to it 🙂