Customizable discord widget, which can be inserted anywhere in your website (using an iframe).
To get started, obtain your server ID by following this guide and replace the fake serverID in the iframe below, then copy the entire iframe to your website.
<iframe src="https://valendres.github.io/react-discord-widget/?serverId=00000000" width="260" height="300" allowtransparency="true" frameborder="0"></iframe>All configuration is passed as URL query strings; each setting is passed as a key/value pair, separated by an ampersand (&). For example, to configure showHeader and channelFontColor, append the following to the widget URL:
https://valendres.github.io/react-discord-widget/?serverId=00000000&showHeader=false&channelFontColor=#b846ef
Note: the serverId is required.
A full list of configuration options are listed below.
| Key | Data Type | Default | Description |
|---|---|---|---|
serverId |
number | - | Required: the Discord server server D. It can be obtained by following this guide |
refreshInterval |
number | 10000 | The frequency (in milliseconds) which server data will be fetched. |
serverName |
string | auto | A custom server name to displayed in the header. If this parameter is not provided, your Server Name as defined in Server Settings will be used. |
showHeader |
boolean | true | Toggle visibility of the header |
showChannels |
boolean | true | Toggle visibility of the channel names. If this option is enabled, only members in voice channels will be displayed. Otherwise, all members currently signed into Discord will be shown. |
showChannelIcons |
boolean | true | Toggle visibility of the channel icons. |
showServerStats |
boolean | true | Toggle visibility of server statistics. Format is: {players in channel count}/{total players online count} |
avatarBorderRadius |
string | 50% | ... |
avatarMarginRight |
string | 8px | ... |
avatarSize |
string | 20px | ... |
bodyBackgroundColor |
string | #2f3136 | ... |
bodyPadding |
string | 8px | ... |
channelFontColor |
string | #dcddde | ... |
channelFontSize |
string | 1rem | ... |
channelFontWeight |
string | 200 | ... |
channelIconColor |
string | inherit | ... |
channelIconContent |
string | 🔊 | ... |
channelIconImage |
string | - | ... |
channelIconWidth |
string | 25px | ... |
channelIconHeight |
string | auto | ... |
channelIconSpacing |
string | 0 | ... |
channelIconVerticalAlign |
string | bottom | ... |
fontFamily |
string | Helvetica | ... |
headerBackgroundColor |
string | #202225 | ... |
headerFontColor |
string | #ffffff | ... |
headerFontSize |
string | 1.1rem | ... |
headerFontWeight |
string | 600 | ... |
headerPadding |
string | 8px | ... |
memberFontColor |
string | #72767d | ... |
memberFontSize |
string | 0.9rem | ... |
memberFontWeight |
string | 200 | ... |
memberSpacing |
string | 4px | ... |
serverStatsFontColor |
string | #dcddde | ... |
serverStatsFontSize |
string | 0.8rem | ... |
serverStatsFontWeight |
string | 200 | ... |
statusIndicatorBorderWidth |
string | 2px | ... |
statusIndicatorOffset |
string | -2px | ... |
statusIndicatorSize |
string | 8px | ... |
- Initial release
- Documentation
- Error message to indicate invalid server id
- Optional loading indicator
- Contributing guide
- Valendres <Storm Hammer> - Saurfang (US)
This project is licensed under the MIT license - see the LICENSE file for details.
- Igorbek for the styled components compatibility function.