How to auto-update your Discord username on your website
I'm sure many users have at some point listed their Discord username on their site, only for their users to find that their username was changed and is no longer active. I change my name a lot and I needed to find a solution, so I did! Here is how you can do it too.
Alright, so the idea is simple: every time a page that has your username loads, or whenever else you choose to update it, you contact Discord, and ask for your current username. Sounds simple right? Well, not so much.
You see, Discord (to my knowledge, as of 27/9/2019) has no simple way to contact their databases outside of their app/website. That means we have to employ the help of an application. First thing that came to mind was to make a bot, so I did! The only caveat of that method is that you have to share a server with said bot.
So i whipped out Sublime Text, downloaded Discord.js and made a simple bot. The idea is that the bot uses Express to listen to any network requests to the server address that it currently occupies, and upon receiving a user ID, it looks through the list of users it knows, then sends you back a response in the form of JSON. I did encounter an issue sending and getting responses with Neocities websites, but I did find a solution that works, although it took a little server magic to work.
If you want to try it too, you have two ways, a simple way, and a hard way.
Here is a simple way:
- Join this server: https://discord.gg/fm7GaDq. The server has a single text channel where you can't type, so it won't give you any annoying notifications and you can safely tuck it away under all your meaningful servers.
Once you have joined the server, all you need is to add a little jQuery code on your site. Here's what you gotta do:
First, import the jQuery library somewhere in the <head> part of your website. You can either download it from the official site, or copy a CDN link.
Next up, you gotta add some code right before the </body> tag.
Here it is:
Make sure to replace <YOUR_ID> in the URL with your Discord ID. You can get it by enabling Developer Mode, and right clicking yourself in the text channel or the member list.
And last but not least: wherever you wish to show your Discord username, all you have to do is place a little span with the discord_tag class, like so:
And that is it! You're all set!
As for the hard way, here is a link to a Bitbucket repo. The setup process looks something like this:
- Download and install Node.js in your runtime environment.
- Download the source code from the repo, and run npm install.
- Pop on over to the Developer portal and create a new application.
- Create a bot within the application and replace bot_access_token on line 59 with your new bot token.
- Run the bot on the server. Make sure your server allows cross-origin requests.
- Import jQuery on your website or use native Fetch API to make a request to your server.
- Insert your request data into the DOM as per your own method.
I hope this wasn't too confusing! I am not a god, so if you find any errors or typos, or perhaps you couldn't get the code to work, do let me know! I'd be happy to fix any errors I made and perhaps help you out! Hope this article was of good use.