The Discord platform is ideal for bringing your online community together, but it does require your members to open Discord in order to utilize it—or does it? You may incorporate Discord into your own site using Discord widgets, allowing users to view who’s online on your Discord server, send direct messages, and more.
A Discord server widget can be added to your site in a few different ways. The simplest method is to use Discord’s built-in widget system, although this is a very rudimentary method. If you require anything more complicated, you may need to consider WidgetBot, a third-party solution. On add a Discord widget to your website, you’ll need to know the following.
What Is a Discord Widget, and How Does It Work?
A Discord widget is a web-based version of the Discord client that can be placed on web pages. This can show your members and channel list, provide a quick invite link to new users, and allow users to communicate immediately without visiting the Discord website or using the app, depending on the sort of widget you install.
The built-in widget is a server promotional tool that allows you to showcase your members while also attracting new ones to your site. Other than joining the server through the integrated invite link, it does not allow you to send messages or interact with it.
You can use WidgetBot, a third-party option, if you want to employ a more complex widget. WidgetBot resembles the Discord client in appearance, allowing users to sign in, send messages, switch channels, and use all of Discord’s features from within an integrated widget on your site.
While WidgetBot’s setup is a little more complicated, it provides a better effective alternative to Discord’s own widget system. Both sorts of widgets, on the other hand, enable server owners to swiftly advertise their server to new members, making it a better option to Slack, which lacks similar marketing features.
Widget for Embedding a Standard Discord Server
Adding a typical Discord server widget to your website involves two steps. To embed the widget into your website, first enable it, then copy the auto-generated HTML code from Discord’s server settings.
To begin, sign in to Discord using the website or desktop software, then choose your server from the server icons on the left. Select Server Settings from the drop-down menu after selecting your server name at the top of the channel list.
Select Widget from the Discord settings menu. Select the Enable Server Widget slider and set it to On to enable the widget on your server (in green).
You may now copy the relevant HTML code to incorporate the server widget into your website after it has been activated for your server. Select Copy in the Premade Widget code box after scrolling down to the bottom of the Widget menu.
After you’ve copied the code snippet containing the prepared Discord widget, you may paste it into the code of your website. Users will be able to browse the active member list and sign up for your server using the widget. WidgetBot, on the other hand, is required if you require a more complex widget.
Using WidgetBot to Make Custom Discord Widgets
The Discord widget is a nice method to add a more advanced invitation link to your server, but it doesn’t offer much else aside from displaying your members list. WidgetBot may be used to incorporate a (almost) fully working version of the Discord client into your website.
WidgetBot is a fully embedded Discord client that you may customize to fit your needs. Size, functionality, channel support, guest memberships, and more may all be used in a WidgetBot widget on your site to attract new users and interact with them without having to go to the Discord website or download the client software.
A premium membership is required for several functionality, such as read-only channels and custom widget themes. However, the basic functionality (such as sending messages and immediately connecting to the server) are available for free.
WidgetBot Installation on Your Server
To begin, you must first install WidgetBot on your server. You must first add the WidgetBot bot to your server in order for WidgetBot to work.
To continue, open the WidgetBot invitation link and login in to Discord. To proceed, select your server from the list and then click Continue.
You’ll be asked which permissions you wish to provide WidgetBot in the next step. To continue, enable all of the checkboxes and then select Authorize. When the operation is finished, go back to your server.
WidgetBot Embedding on Your Website
After WidgetBot has been installed on your server, you can add a WidgetBot widget to your website. You can use a variety of widgets, but the simplest approach to add a basic widget is to use your server’s??crate command.
This creates a Discord chat symbol in the bottom-right corner of your web sites using an HTML code snippet that you can easily integrate into your web pages. This opens a small (but fully working) Discord client for your web users once pressed.
To get started, go to the Discord website or download the Discord software and choose your server from the list on the left. Type??crate into the message box in a sufficiently private channel on your server housing the WidgetBot bot, then send the message.
When you type??crate into your server, the bot will generate an HTML code snippet for you to embed. Right-click > Copy or press Ctrl + C on your keyboard to copy the code from the message.
Copy the code to your clipboard, then paste it into your website’s HTML and publish it. The code will generate a Discord icon in the bottom-right corner, which you can select to view and interact with the widget, including directly submitting messages to your server.
If you’d rather use a different sort of WidgetBot widget, visit the WidgetBot documentation website to learn more about each type of widget, including how to design and embed them into your website.
Utilizing Discord Widgets
A Discord server widget is a great method to attract new members to your community by promoting it on your website. After you’ve set up your server, you can start thinking about how to make Discord work for you. To begin, add bots to your server to boost functionality, such as music bots and moderation bots.
There are, however, options if you’re having issues using Discord. For example, a Discord fatal Javascript error may normally be resolved by reinstalling the software, although Discord connection troubles could indicate a DNS problem. If you’re still having problems, there are a few Discord alternatives you can try.
