Your wiki looks promising and the only thing missing is this amazing Discord widget on the right rail that all cool kids have? You have come to the right person here. Let's dive in.
How it works
Without going too deep into it, it is safe to say that some people on Dev Wiki have written scripts to parse information from your Discord server and display it on your wiki. You do not have to understand what Javascript and APIs are, all you have to do is create a couple of new pages on your wiki, copy and paste a few words there, and it is settled.
NOTE: only wiki admins are allowed to edit the MediaWiki space, therefore only admins can set up a Discord Widget!
What options do I have
Dev Wiki offers a big variety of scripts to choose from:
The difference between them is mostly in how they look and sometimes in how to configure them, that is why we will cover all of them briefly but focus on customizing one of them more specifically.
Configuration
Step 1
First of all, we need to make sure our Discord server allows people to take the data and display it somewhere else (it is disabled by default). If we skip this step, our widget will not work properly.
- We go to our Discord server;
- We click on its name and choose 'Server Settings ⚙';
- There we see a few options on the list and right after 'Stickers' we see Widget;
- We click on it and in the menu that has opened we see 'Enable Server Widget'. But do not leave just yet, this page also has our server ID which we will need later so copy that, too!
Step 2
Any script from the Dev Wiki (that you are going to use wiki-wide) first needs to be installed on your wiki. It is always done the same way:
- ...fandom.com/wiki/MediaWiki:ImportJS is where you need to go first (if there is a language prefix, do not remove it);
- All scripts start with dev:, so in our case it will be one of these:
- dev:Discord.js
- dev:DiscordIntegrator/code.js
- dev:DiscordBanner.js
- dev:DiscordChat.js
- dev:DiscordModule/code.js
NOTE: do NOT install all of them at once, they will overwrite each other!
After the script is imported, we need to make sure all the sources of information are provided. Each script has its own MediaWiki namespace path to take the information from, some scripts have quite a few ways of customizing them, however, the main thing each script needs to know is what Discord server you would like to link to. Therefore our Discord ID comes in handy.
Step 3
Discord.js
- ...fandom.com/wiki/MediaWiki:Custom-Discord-id: this is necessary for the script to know what Discord server we want to use. We need to create this page and paste the long number that we copied in our Discord application in the Widget settings.
Everything else is optional in this script and will be set to default if not set-up manually. For example, we can create these pages:
- ...fandom.com/wiki/MediaWiki:Custom-Discord-header: this is the heading above the widget where we see 'Community Chat' by default but we can also use 'Official Discord Server' or 'Place to Talk' or anything we wish to type. We create the page and write the text we want displayed.
- ...fandom.com/wiki/MediaWiki:Custom-Discord-join: this is the button to join the Discord server that opens an invite link in a new tab. By default the text on it is set to 'Join Now!' but we can change it to 'Join our Server!' or anything we see fitting (for example, Disney Speedstorm uses '3... 2... 1... Join!' because of the countdown in the beginning of each race).
For more customization options, check this table.
DiscordIntegrator.js
- ...fandom.com/wiki/MediaWiki:Custom-DiscordIntegrator-config-id: this is necessary for the script to know what Discord server we want to use. We need to create this page and paste the long number that we copied in our Discord application in the Widget settings.
Everything else is optional in this script and will be set to default if not set-up manually. For example, we can create these pages:
- ...fandom.com/wiki/MediaWiki:Custom-Discord-title: this is the heading above the widget that is not displayed by default. For it to work, we need to have something written on this page (like 'Discord Server' or 'Community Chat' or anything we want).
- ...fandom.com/wiki/MediaWiki:Custom-Discord-theme: this page lets us define whether we want our Discord Widget to be always dark, always light or change in accordance with the wiki theme. If this page is not created, it will adjust to the wiki theme by default. If we wish to always have the dark version, we need to create the page and write dark on it (or light accordingly).
For more customization options, check this table.
DiscordBanner.js
This script is slightly different from the previous two because it uses MediaWiki:Common.js to work (and editing this page is not allowed by default so we would need to request staff to enable it for us first + each edit needs to be approved by staff manually), and it also generates a solid image that cannot be customized.
- ...fandom.com/wiki/MediaWiki:Custom-DiscordBanner-id: this is necessary for the script to know what Discord server we want to use. We need to create this page and paste the long number that we copied in our Discord application in the Widget settings.
Everything else needs to be set-up in MediaWiki:Common.js and an example with different options can be found here. The example that is used on the page is the following:
window.DiscordBannerSettings = {
bannerStyle: '2',
inviteLink: 'Vgfu9qb', // Community Central, EXAMPLE CONFIGURATION
prependToRail: false
};
This code means that we have chosen the second banner style (what they look like can be seen here), we have given the invite link generated by our server (which is usually https://discord.com/invite/SOMETHING and this something is what we put into our code), and we asked the script not to put the widget on top of the rail (the very first thing we see).
DiscordChat.js
This is the simplest widget to setup as it only requires the server ID page to be created. We need ...fandom.com/wiki/MediaWiki:Custom-DiscordChat-id where we paste the long number we copied from the Widget settings of our Discord server, and we are all set!
Customization: how to start
All the elements we see on the page can, in theory, be customized. Some of them are not allowed to be touched by the Customization Policy but it does not include our Discord Widget itself, so we can play with it as much as we want! However, do not forget that all the customization is done on ...fandom.com/wiki/MediaWiki:Common.css, and it is only available for admins to edit!
- First of all, we need to know the names of the elements we would like to customize. For that we need to learn how to inspect elements. This is done through Dev Tools in our browser.
| Browser | How to enable |
|---|---|
| Chrome/Edge | Press F12 (Windows) ⌘ + ⌥ + I (macOS) |
| Other browsers | Ctrl + Shift + I (Windows) ⌘ + ⌥ + I (macOS) |
- After we have opened the Dev Tools, we find a button that allows us to inspect elements. It usually looks like an arrow in a square or a rectangle: File:Arrow dev tools templates guide.png. We click on it and find the part of the Widget that we would like to customize. In the new window that we now see next to our wikipage we can find the element name ( .something { ) and this is the one we need to customize.
Customizing Discord.js
Let us see how we can turn picture #1 into picture #2.
- Let's see what we have filled in:
- MediaWiki:Custom-Discord-branding: "new" (new-style Discord logo);
- MediaWiki:Custom-Discord-footer: "Race with us today!";
- MediaWiki:Custom-Discord-invite: "https://discord.gg/disneyspeedstorm";
- MediaWiki:Custom-Discord-join: "3... 2... 1... Join!";
- MediaWiki:Custom-Discord-online: "$1 Racers Online" ($1 is an argument that parses the number of people online through the API);
- MediaWiki:Custom-Discord-theme: "dark" (using the dark theme only);
- MediaWiki:Custom-Discord-users: "Racers Online" (instead of "users online").
- Now let us have a look at the code on the CSS page:
.discord-widget .widget-theme-dark :is(.widget-header, .widget-footer, .widget-member .widget-member-name) {
color: white;
background-color: var(--theme-accent-color);
}
.discord-widget .widget-body {
background: url(https://static.wikia.nocookie.net/speedstorm/images/d/d9/Discord_banner.png/revision/latest?cb=20220818113614&format=original) center no-repeat;
background-size: 100%;
}
.discord-widget .widget-footer .widget-footer-info {
color: white;
font-weight: 800;
}
.discord-widget .widget-body .widget-role-name {
margin-bottom: 90px;
color: yellow;
padding: 3px;
}
If you would like to understand CSS better, check out this guide about CSS and some important properties.
- The first block gives us the following: inside our .discord-widget, on .widget-theme-dark, everything that :is(.widget-header, .widget-footer, .widget-member .widget-member-name) needs to have a text color and a background-color. For the background-color I used a variable that will correspond with the wiki's accent-color on each theme, but that is not necessary, it is a personal choice of color.
- The second block of code lets us modify the .widget-body (aka the main part that has all the user circles in it) inside our .discord-widget: we add a background image with an url and ask it to be centered and not-repeated. We also add background-size to make sure it takes up all the space.
- The third block .discord-widget .widget-footer .widget-footer-info is where we store the phrase "Race with us today!". All I did here was make the color more distinct and font bolder.
- And the last block of code was finding .widget-role-name ("RACERS ONLINE") inside .widget-body that is inside our .discord-widget, and giving it margin-bottom to push the user circles down and give more space to see Baloo and Meg's faces, a different text color and some small space around the text.
That is it! Do not forget that this customization is very wiki-related, do not copy and paste it blindly as it will not look good unless done to suit your wiki personally. Use it as an example and choose your own colors, pictures and so on. Do not forget to use Dev Tools to find the element names you want to customize!
Best of luck!