You are viewing an inferior version of the site because your browser does not support WebP. Do upgrade to something like Chrome or Firefox. Loading websites like this causes them to require a fallback set of images and they are almost always lower quality and larger in size.

Easy Discord Channel Widget

This is just a way to handle the guide widget data from the JSON response format.

2022-07-18T:00:00:00+00:00 July 18 2022 00:00:00


<div id="output"></div>

For the sake of the example this is the div tag ID we're going to use. Configure the widget below to whatever target you'd like to use.


<style>
div[class="discord_invite"] {
	border:1px black dotted;
}
div[class="discord_invite"] > * {
	text-align:center;
	margin-left:auto;
	margin-right:auto;
}
div[class="discord_invite"] div:nth-child(2) {
	display:flex;
	flex-wrap:wrap;
	justify-content:space-around;
}
div[class="discord_invite"] img {
	max-width:48px;
	padding:2px;
}
div[class="discord_invite"] button {
	padding:5px;
	border-radius:15px;
}
</style>

Now we're gonna style the widget. We're not styling the target div but the div that will go into the target div so instruction wise these CSS blocks don't need to be changed beyond their parameters and values.


<script>
var widget_config = {
	discord_button:'Join My Discord',
	id:'0000000000000000000', // change to server ID
	target:'output', // target element
	max_list:25
};
function discordBox(o) {
	var dbox = document.createElement('div');
	dbox.classList.add('discord_invite');
	var dname = document.createElement('div');
	var dmembers = document.createElement('div');
	var dbb = document.createElement('div');
	var db = document.createElement('button');
	fetch("https://discordapp.com/api/guilds/"+widget_config.id+"/widget.json")
	.then((response) =>  { return response.json(); })
	.then((data) =>  {
		console.log("Discord", data);
		var di = data['instant_invite'];
		var dn = data['name'];
		dname.innerHTML = "Join " + dn + " Discord";
		var dp = data['presence_count'];
		var ml = data['members'].length;
		if(ml>widget_config.max_list) { 
			ml = parseInt(widget_config.max_list); 
		}
		for(var d = 0;d<ml;d++) {
			var dm = document.createElement('img');
			dm.src = data['members'][d]['avatar_url'];
			dm.alt = data['members'][d]['username'];
			dmembers.appendChild(dm);
		}
		dbox.appendChild(dname);
		dbox.appendChild(dmembers);
		db.innerHTML = dn + " Discord";
		db.onclick = function() { window.location.href = di; }
		dbb.appendChild(db);
		dbox.appendChild(dbb);
		o.appendChild(dbox);
	});
}
</script>

As long as this function knows the target you won't have to necessarily edit it because the function comes fully loaded with how the widget will load through creating those elements. However you are welcome to edit how it loads as this is just a whim choice on my behalf on how to do it. The main point would be to use this as a trigger of some sort, like on DOM ready but we also have the chance to implement this anywhere on this site during the user's visit and have it be easy to use and not redundant in any other form.


window.addEventListener('DOMContentLoaded', (event) => {
    console.log('DOM finished, loading Discord widget');
	discordBox('output');
});

Now we just wait for the DOM to load and trigger the 'discordBox()' function. You can put this function in an existing procedure you may already have built into your stuff or make it an onclick for a button, whatever. It's as simple as calling the function and having an existing target element at it's most base setup.

Contact Krysti

GitHub:

IRC:

Direct.Me:

Ko-fi:

Photos:

E-Mail / Notify of errors:

coder [@] krysti.engineer

Please be patient contacting me, I don't really check much of social media or anything. If you use the IRC be sure to stick around because that's how IRC works, silly. :P