7

As of now, I am creating my own styled widget using the JSON from https://discordapp.com/api/servers/GUILD-ID/widget.json, which works fine so far. However, this JSON is limited to 99 users, and that's a problem for me.

So I thought, I could just re-create it, using the official Discord API. However, there is some information, I can't find in the API, or maybe I'm just blind.

  1. I am missing the information, which user is currently in which voice channel
  2. I am missing the online status of a user
  3. I am missing the avatar URL
  4. Whether the fields muteand deaf exist within the user object, they are null/empty, while the widget.json displays the correct information

So a user object in the widget.json looks like this:

{
    id: "0",
    username: "xxxx",
    discriminator: "0000",
    avatar: null,
    status: "online",
    deaf: false,
    mute: false,
    self_deaf: true,
    self_mute: true,
    suppress: false,
    channel_id: "555555555555555555",
    avatar_url: "https://cdn.discordapp.com/widget-avatars/XXXXXXXXXXXXXXX"
}

while the API returns this:

{
    user: {
    id: "999999999999999999",
    username: "xxxx",
    avatar: "257281f9b2aa93be7c12f5c49e122ca3",
    discriminator: "1234",
    public_flags: 576
    },
    roles: [
        "123456789123456789",
        "987654321987654321"
    ],
    nick: "yyyy",
    premium_since: null,
    joined_at: "1970-01-01T00:00:00.000000+00:00",
    is_pending: false,
    mute: false,
    deaf: false
}

which is pretty much unusable for my case.

1 Answer 1

0

I was just messing around with this earlier today here is what I came up with so far if you never figured that out

css

        * {
            box-sizing: border-box;
        }
        
        html,
        body {
            font-family: Whitney, "Helvetica Neue", Helvetica, Arial, sans-serif;
            color: #eeeeef;
            background-color: #36393f;
            display: flex;
            justify-content: flex-start;
            align-items: baseline;
            align-content: flex-start;
            flex-wrap: wrap;
            flex-direction: row;
        }
        
        p {
            margin: 3;
        }
        
        .sticky {
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            float: left;
        }
        
        a {
            background-color: #5865F2;
            box-shadow: inset 0 -0.6em 0 -0.35em rgb(0 0 0 / 17%);
            color: #eeeeef;
            padding: 1em 1.5em;
            position: relative;
            text-decoration: none;
            text-transform: uppercase;
            z-index: 5;
            border-radius: 0.5rem;
            font-weight: bold;
            font-size: 1.5rem;
            float: right;
        }
        
        a:hover {
            transition: all 1.5s;
            box-shadow: inset 0 0 100px 100px rgb(255 255 255 / 30%);
        }
        
        a:active {
            box-shadow: none;
            top: 5px;
        }
        
        header {
            margin: 50px;
        }
        
        h1 {
            font-size: 4rem;
            z-index: 3;
            text-shadow: 3px 3px 4px #000000a6;
        }
        
        .member {
            padding: 8px;
            font-size: 1.3rem;
            margin: 5;
            text-shadow: 1.5px 1.5px 16px #00000025;
        }
        
        img {
            border-radius: 5px;
        }
        
        .memberText {
            position: absolute;
            margin-top: 5.8px;
            margin-left: 25px;
            font-weight: bold;
        }
        
        br {
            display: block;
            margin: 10px 0;
            line-height: 22px;
            content: " ";
        }
        
        #users {
            box-shadow: 20px 3em 20px 1em rgb(0 0 0 / 5%);
        }
        
        @media only screen and (max-width: 600px) {
            #wrap {
                width: 300px;
                background-image: linear-gradient(to left, transparent, #1d1e2280);
            }
        }

meta and script tags

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/6c4ec84abe.js" crossorigin="anonymous"></script>

body html


<body>

    <header class="sticky"></header>

    <div id="users">
    </div>
</body>

JS (I usually load at the bottom of the body tag or load it in with a tag when messing with DOM elements)

And to get the right JSON for the widget see the picture below

$.getJSON('https://discord.com/api/guilds/633515516207693864/widget.json', function(data) {

        var members = data.members;

        var title = `<h1>${data.name}</h1>
            <p><a href="${data.instant_invite}"" target="_blank"><i class="fa-brands fa-discord"></i> Join Now</a></p>`;

        for (var member in members) {

            var deaf = (members[member].deaf) ? "<font color='red'><i class='fa-solid fa-headphones'></i></font>" : "";
            var mute = (members[member].mute) ? "<font color='red'><i class='fa-solid fa-microphone-slash'></i></font>" : "";

            var gameCheck = (!members[member].game) ? `<span style="font-weight:100;font-style:italic;"></span>` : `<span style="font-weight:100;font-style:italic;">Playing ${members[member].game.name}</span>`;

            if (members[member].status === "online") {
                status = `<i class='fa-solid fa-circle' style='color:#00ff00ba;font-size:1rem;'></i>`;
            } else if (members[member].status === "idle") {
                status = `<i class="fa-solid fa-moon" style='color:#d9d93be6;font-size:1rem;'></i>`;
            }

            let memberItem = `<img src="${members[member].avatar_url}" style="height:100px; width:auto;margin-right:8px;"><span class="memberText">${status} ${members[member].username}<br><i style='font-size:1rem;font-weight:100 !important;margin-top:5px;'>${gameCheck}<br>${mute} ${deaf}</i></span>`;
            var onlineUsers = (members[member].username == "Hide Bot/User 1" || members[member].username == "Hide Bot/User 2") ? `` : `<div class='member'>${memberItem}</div>`;

            $("#users").append(`${onlineUsers}`);
        }

        $("header").html(title);

    });

Also here is a screenshot to get your JSON Api urlserver settings > widget > JSON API

3
  • Thank you, but you may didn't notice the user limit yet :) The widget.json file only returns max. 99 users.
    – SGL
    Feb 13, 2022 at 14:18
  • Yeah you are pretty limited with this method but it's not bad for some quick online user information. You would have to switch to using something like discord.js/node for more in depth results. Feb 13, 2022 at 18:04
  • That's the initial question ;) Because the official API lacks information about a user.
    – SGL
    Feb 13, 2022 at 22:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.