Fandom Developers Wiki
Register
Advertisement

DiscordIntegrator allows integrating a Discord widget into your sidebar or content. The Discord widget is able to show all online users in a server, the users game activity, anyone in a voice channel and etc.

Installation

To install this script, you need to have JavaScript enabled on the wiki. If you don't, you will need to contact FANDOM staff to enable it for you. You can do so by using this contact form to request FANDOM Staff to enable it.

After your JavaScript is enabled by FANDOM staff, go to your wiki's MediaWiki:ImportJS page. If you don't know where your wiki's ImportJS page is, just copy this link http://dev.wikia.com/wiki/MediaWiki:ImportJS and replace "dev" with the name of your wiki. For example, if your wiki is the Disney Wiki you would go to http://disney.wikia.com/wiki/MediaWiki:ImportJS.

Once you have arrived at your wiki's ImportJS page, click the "Edit" button and insert:

dev:DiscordIntegrator/code.js

into the page.

Note: DiscordIntegrator configuration and importing does not require any JavaScript review in order to function normally.

Configuration

Enabling the widget

The widget can be enabled by Discord server administrators by going through the settings screen of their Discord server and going to the "Widget" settings section. To enable embedding a widget to your server, tick the "Enable Widget" box. If you wish for users to be able to connect to your server through the widget, you should also select a chat room in the "Instant invite channel" option.

Important: The server ID that can be found in the widget settings section is very important for setting up the widget, which is explained in sections below and in the template.

Content

After the script is installed through the methods explained above, it is possible to make the widget show up in the page content. It is advised to create a template on your wiki and copy the contents of {{DiscordIntegrator}} to it. After that, the template can be used as:

{{DiscordIntegrator
| id = 246075715714416641
| theme = light
| width = 500px
| height = 500px
}}

which gives:

If you see this, your JavaScript might be disabled or DiscordIntegrator plugin isn't working. If the latter, please contact a wiki administrator.

Note: DiscordIntegrator does not work on the mobile skin, which will display an error message instead of the Discord widget. To prevent the widget from displaying on the mobile skin, you can set the template type of the widget to a template type that doesn't display on mobile (such as Navbox).

For more complicated usage you can check the DiscordIntegrator template documentation itself.

Sidebar

The script can be configured to add the widget to the sidebar of the wiki on Oasis skin through editing several MediaWiki pages. Any MediaWiki page relating to the configuration of DiscordIntegrator starts with MediaWiki:Custom-DiscordIntegrator-config- and after it goes the name of the configuration option. For example, to configure the ID of the server, you'd need to go to MediaWiki:Custom-DiscordIntegrator-config-id.

The widget will appear in the siderail, only if the ID of the server is set in configuration options. Configuration options have same names as configuration options when adding the widget to content, except with the addition of a few parameters:

Option Type What it changes Default
title String Title of the module on the siderail None
moduleHeight String Height of the module in the siderail 500px
text String Text above the widget None

An example of the widget can be seen in the sidebar on this page.

Frequently Asked Questions

Can I change the colors on the widget?
Currently, no. The widget is an iframe, therefore its style cannot be changed.
The widget is loading infinitely
That means you didn't enable the widget in your server settings.
Enable the widget as said in Enabling the widget section and refresh the page.
Sometimes it might take a minute or two for the widget to register it's enabled.
Is the ID required for the module to function?
Yes, or nothing will display

If, after reading the documentation, you still don't understand how to set DiscordIntegrator up, read the step-by-step manual.

This is a step-by step manual on how to install DiscordIntegrator. It will only outline the important parts and not go into advanced configuration.

This manual is assuming the following

  • Your wiki is YOUR_WIKI.wikia.com. When following links in the manual, don't forget to replace YOUR_WIKI.wikia.com with the URL of your wiki. For example, if your wiki is Disney Wiki, the correct link would be disney.wikia.com.
  • You already have a Discord server. If you don't, read about creating one here.
  • You are an administrator of the wiki and an administrator of the Discord server you are trying to embed into the page.
  • You've read the documentation page thoroughly at least twice and still didn't understand how to embed a Discord widget into your wiki.

Step 1: Ensure JavaScript is enabled

DiscordIntegrator won't work if JavaScript isn't enabled on your wiki.

  1. Go to http://YOUR_WIKI.wikia.com/wiki/MediaWiki:Common.js.
  2. If a banner on the top of the page appears saying "Custom JavaScript is disabled on this wiki.", you should use this contact form to contact Staff to enable JavaScript on your wiki. Responses from Staff for enabling JavaScript usually come after 1-2 days, not counting weekend.
  3. Do not proceed further until JavaScript has been enabled on your wiki.

Step 2: Import DiscordIntegrator

DiscordIntegrator script needs to be imported to your wiki through ImportJS in order to work.

  1. Go to http://YOUR_WIKI.wikia.com/wiki/MediaWiki:ImportJS?action=edit&useeditor=source
  2. Paste dev:DiscordIntegrator/code.js at the bottom of the page.
  3. Click on the Publish button to save the page.

Step 3: Enable Discord widget

Discord widget needs to be enabled on your Discord server in order for DiscordIntegrator to be able to embed a widget for your Discord server.

  1. Open Discord.
  2. Select your server on the server list.
  3. Click on the server title above the channel list to see the dropdown with Server Settings. You should see something like this:
    DiscordIntegrator-1
  4. Click on the Server Settings option.
  5. Look at the sidebar of the Server Settings and you should see a Widget option, like this:
    DiscordIntegrator-2
  6. Click on the Widget option.
  7. You should see a screen like this:
    DiscordIntegrator-3
  8. If the checkbox next to the Enable Server Widget is just like in the picture above, click on it to enable the server widget.
  9. Select a channel from the Instant Invite Channel dropdown to make the widget invite people into that channel. This means that when people click on the Connect button on your Discord widget, they will arrive in that channel. If there is no channel set in this option, the Connect button won't appear, so if you want people to be able to join your server through the widget, set this option to a channel.
  10. Click on the Copy button in the Server ID section to copy your server ID, and save your server ID somewhere because it will be used for embedding the widget later.
  11. When properly set up, your server settings should look something like:
    DiscordIntegrator-4

Step 4: Create a DiscordIntegrator template

For easier use of DiscordIntegrator, you would have to have a template for embedding Discord widgets into pages. If you don't want to embed the Discord widget into pages and just want to embed it into the wiki's sidebar, skip directly to step 6.

  1. Open this page.
  2. Select all text in the editor box and copy it.
  3. Go to http://YOUR_WIKI.wikia.com/wiki/Template:DiscordIntegrator?action=edit&useeditor=source
  4. Paste the previously copied text into it.
  5. Click on the Publish button to save the page.

Step 5: Use the DiscordIntegrator template

Now you should be able to embed the widget into pages by using source mode to insert the following into pages:

{{DiscordIntegrator
|id     = <YOUR SERVER ID>
|width  = 500px
|height = 500px
}}

where <YOUR SERVER ID> should be replaced by the server ID you copied and saved in step 3. For example, and this is just an example, if you wanted to embed Dev Wiki's Discord server (whose server ID is 246075715714416641), you would use:

{{DiscordIntegrator
|id     = 246075715714416641
|width  = 500px
|height = 500px
}}

which will result in:

If you see this, your JavaScript might be disabled or DiscordIntegrator plugin isn't working. If the latter, please contact a wiki administrator.

Step 6: Put the widget into the sidebar

  1. Go to http://YOUR_WIKI.wikia.com/wiki/MediaWiki:Custom-DiscordIntegrator-config-id?action=edit&useeditor=source
  2. Paste your server ID you copied in step 3 into it.
  3. Click on the Publish button to save the page.

I still don't understand!

If that's the case, use the talk page to ask questions on how to set up the widget or enter the Wikia Developers Discord server and ask for help on setting DiscordIntegrator up over there. Don't forget to note which step are you stuck on and provide the URL to your wiki.

Advertisement