During the Covid-19 pandemic, the use of chat services (like Discord) exploded in popularity; with physical shops and support centres closed and more people working remotely. Despite "lock down" restrictions easing for some in recent months, many of us have grown fond of using Discord. Particularly with the toxicity of mainstream social media services and the relentless barrage of trackers and advertising.
The Disco stack only displays a list of who's online in your Discord chat room and a button for new members to join the server. The actual chat threads, discussions, media and messages are NOT shown, because obviously this is confidential information only available to those who are registered and logged-into the official Discord app. There presently isn't any method of embedding a full Discord chat interface in your website, without paying for third-party services that relay this data through to the web via bots. If you are looking for a way to embed a full chat server in your website, then this stack is not for you.
The Disco stack only displays a list of who's online in your Discord chat room and a button for new members to join the server. The actual chat threads, discussions, media and messages are NOT shown, because obviously this is confidential information only available to those who are registered and logged-into the official Discord app. There presently isn't any method of embedding a full Discord chat interface in your website, without paying for third-party services that relay this data through to the web via bots. If you are looking for a way to embed a full chat server in your website, then this stack is not for you.
Examples
These first two examples of the Disco stack are configured to use the Stacks4Stacks & ThemeFlood Discord server. One is using the light theme, and the other is using the dark theme, so you can see a comparison between the two.If you choose 'auto' as the theme, then dark mode will be applied if the website user has their system set to dark mode. And vice-versa, light will be used if the system is set to light mode or does not support colour switching. This is a good feature to use in RapidWeaver themes that support colour mode switching, like ThemeFlood Torrent.
A third example of the Disco stack has been setup on this webpage using the 'popup' function. On screens wider than 568px, if you look towards the bottom right of this page, you'll see a button that toggles the popup open. This is a great feature if you want to use the widget in your website, but you don't want it permanently showing. On screens less-than the specified breakpoint width, you can either keep Disco hidden or have it display in the normal page flow, like the examples above. The icons used for the toggle button require a theme that includes Font Awesome Icons (like the ones available from ThemeFlood) or a suitable stack to enable support for Font Awesome Icons.
Sometimes after changing the theme colour, a web browser may continue to display the original theme colour. Clearing the browser cache or viewing the page in a private browser window will normally resolve this. It is due to the way Discord caches the page at their end.
Unlike the widget Discord provide, the Disco stack expands horizontally to fill the available space. To keep Disco narrow, you can simply place it inside a column or grid stack. Or use a free stack like UsefulStack with a max-width applied. If your theme supports ExtraContent, you can also embed Disco inside a theme sidebar, which can look very attractive.
First, you need to grant permission for your member list and 'connect' button to be shown on your website, within Disco. Open the Discord app and click on the server name at the top. Select Server Settings. From the navigation, click on Widget.
You must click on the option Enable Server Widget. This is very important and a setting that's easy to miss! So toggle this on straight away. Then from the Invite Channel menu, you can choose the channel name you want to invite people into. Save the changes when done.
The final piece of crucial information you need is the server ID, so Disco knows which server to display. To get your server ID, open the Discord app. Click on the name of the Discord server at the top left. Within the server settings, click on Widget. There you will find the Server ID shown in. Box, with a 'copy' button. The server ID is pasted into the corresponding Server ID box, within Disco.
Note: Disco is not affiliated or supported by Discord. It was made to simply improve some aspects of the original (official) Discord embed widget and help elevate some common problems that RapidWeaver users were encountering. For that reason it is provided as a free download (donations are encouraged if you find it useful or want support) and Discord remains a registered trademark of Discord Inc.
A third example of the Disco stack has been setup on this webpage using the 'popup' function. On screens wider than 568px, if you look towards the bottom right of this page, you'll see a button that toggles the popup open. This is a great feature if you want to use the widget in your website, but you don't want it permanently showing. On screens less-than the specified breakpoint width, you can either keep Disco hidden or have it display in the normal page flow, like the examples above. The icons used for the toggle button require a theme that includes Font Awesome Icons (like the ones available from ThemeFlood) or a suitable stack to enable support for Font Awesome Icons.
Setup
This stack can only be used by 'admins' of a Discord server. It requires some extra settings on the Discord server to be adjusted. Follow these complete instructions to use the Discord stack in RapidWeaver.- Download the Disco stack and install it in the normal way.
- Open your Stacks Library. Search for 'disco'. Drag and drop a copy of Disco into your page. If you prefer, you can place it inside a grid or columns.
- With the stack selected in edit mode, adjust its settings in the Stacks side panel. See the details below for configuring things at the Discord-end. If changing the height setting, remember to include your preferred units of measurement (e.g. rem, em, vw, vh, or px).
- Preview your page to make sure the stack displays your Discord server correctly, including the list of members presently online.
- Save your changes. Export or publish the website as normal.
Sometimes after changing the theme colour, a web browser may continue to display the original theme colour. Clearing the browser cache or viewing the page in a private browser window will normally resolve this. It is due to the way Discord caches the page at their end.
Unlike the widget Discord provide, the Disco stack expands horizontally to fill the available space. To keep Disco narrow, you can simply place it inside a column or grid stack. Or use a free stack like UsefulStack with a max-width applied. If your theme supports ExtraContent, you can also embed Disco inside a theme sidebar, which can look very attractive.
Configuring Discord to populate the Disco stack
The following important steps can only be done by the owner of a Discord server or admin member. You need to adjust some things at the Discord end, otherwise your Disco stack will display blank, with no member list or 'connect' button.First, you need to grant permission for your member list and 'connect' button to be shown on your website, within Disco. Open the Discord app and click on the server name at the top. Select Server Settings. From the navigation, click on Widget.
You must click on the option Enable Server Widget. This is very important and a setting that's easy to miss! So toggle this on straight away. Then from the Invite Channel menu, you can choose the channel name you want to invite people into. Save the changes when done.
The final piece of crucial information you need is the server ID, so Disco knows which server to display. To get your server ID, open the Discord app. Click on the name of the Discord server at the top left. Within the server settings, click on Widget. There you will find the Server ID shown in. Box, with a 'copy' button. The server ID is pasted into the corresponding Server ID box, within Disco.
Note: Disco is not affiliated or supported by Discord. It was made to simply improve some aspects of the original (official) Discord embed widget and help elevate some common problems that RapidWeaver users were encountering. For that reason it is provided as a free download (donations are encouraged if you find it useful or want support) and Discord remains a registered trademark of Discord Inc.
