[Solved] How to Add Discord Widget to Your Site

Discord keeps getting better with time, and each update brings something brilliant to the floor. When Discord rolled out the Discord Widget feature, it won users over as the Widget is highly beneficial for the gaming community, especially for server owners. Owing, thanks to the Discord Widgets, you can implant Discord on your own site. This will allow users to view who’s online on a Discord server, send messages directly, and so much more.

Discord is the type of platform that makes it super easy to build a community with like-minded people and allows you to engage with them. If you have built your Discord community and you plan on showcasing your site for beneficial purposes, the Discord Widget is the best way to go.

There are a few procedures you can follow to add a Discord Widget to your website. The Simplest way to do this is to utilize Discord’s own Widget system. If you want to create custom Widgets that are more advanced than the standard ones, you can use third-party applications like WidgetBot as alternatives.

Contents

What Is a Discord Widget?

A Discord Widget is basically a plug-and-play widget. You can implant this Widget directly onto your website. This way, you can directly display your Discord servers to members on your website. This can be used for promotional purposes for your sites, or you may use it to grow your community. The Discord widget is interactive, meaning your site visitors can view the total number of members on your server and also view how many are online.

Another plus point of a Discord Widget is that users do not have to launch the Discord app or client to view the information that has been mentioned above. They do not have to log in to view this information. They’ll have access to this information directly from the website you have embedded it in. This Widget is an advertisement tool to help grow your server.

Why Use Discord Widget?

When you embed the Discord Widget on your website, you’ll be displaying a list of members and channels of your server. The Widget houses an invite link that will make it easier for users to join your server. This feature is extremely beneficial for growing your Discord community.

Take, for example; you own a website where you regularly post stuff. The Discord widget will allow you to showcase your Discord server to new visitors that reach your website. Therefore, the Widget can be used as a brilliant promotional tool to help grow your server.

It is important to know that the Widget does not support message sending to the server. To send messages, a user must download the Discord application. The Widget does provide an invite link that will directly take you to the app, where you can sign in to join the server. Another great plus point about the Discord widget is that you can monitor the number of members online on your server directly from your site without having to launch the Discord client.

How to add the Discord Widget to your website

The process of adding a Discord Widget to your website is very simple. You can have the Widget activated from the Server settings by going to the “Widget” tab. You’ll be able to enable your Widget and also copy the JSON or HTML embed code. Moreover, you can also change the invite settings for your server.

An important point to note here is that if you want to embed a widget on your website, you must first be the owner or admin of the server. You must also have access to be able to make certain changes to your website. You may also face the need to contact the website developer to have them embed the Widget impeccably.

You’ll have to go through two stages to add a standard Discord server widget to your site. First of all, you’ll have to enable the Widget. After that, you’ll be copying the HTML code that is autogenerated from Discord’s server settings to have it embedded on your website.

Enable Discord Widget and Copy the Embed Code

The first step is to enable the Discord widget from the Server Settings. After that, you’ll have to copy the embed code and paste it in the Widget box wherever required.

Follow the steps below to enable Discord Widget and copy the embed code:

Launch the Discord application.
Make way to the server that you plan on displaying in your Widget.
Next, you must navigate to Server Settings.
Scroll down to the Widget tab and click on it on the left sidebar.
Now select the Enable server widget to have the Widget enabled.
Next, you must select the channel you’re willing to connect to on your Widget.
Scroll down to find the option that reads Premade Widget. From here, you can copy the embed code.

Embedding Discord Widget Code on Site

Once you have copied the code from Discord, save it in your notepad to be able to use it as a quick reference. The next process is to paste the code onto your website. This will embed the Widget to your site.

If you have a WordPress website, you can go through the following steps to embed your Discord Widget to your site:

Sign in to your own WordPress admin panel.
From the dashboard, find your way to Appearance.
From Appearance, you must navigate to Widgets.
Next, you must select the custom HTML box and move it around to the location you want to place your Widget in.
You must fill in certain details such as Title, Section, and so on. Now paste the embed code that you copied earlier from Discord.
Click on Save and then Done to apply the changes.

And that Is it. That’s how simple it is to add a Discord server widget to your website. You can now open your website to confirm if the Widget has been embedded or not. If you use a more advanced website, you must consult your website developer on how and where to integrate the Discord widget into the website.

Alternatives to Discord Widget

The best 3^rd-party alternative available to replace the Discord widget goes by the name WidgetBot. WidgetBot is basically a bot you can add to your server. It will provide you with an embed link which you can use to add to your website. The bot feels exactly like Discord when used. However, it contains highly advanced functions that the official Discord Widget lacks. WidgetBot offers more features when it comes to customization.

This bot is free to use for specific functions. These include basic functions such as joining servers and sending messages through the Widget. You can avail of extra features with the paid version. These features include read-only channels, customized widget themes, and more.

Creating Custom Discord Widgets Utilizing WidgetBot

Although Discord’s Widget is a brilliant way to provide an invite link for your server, it really doesn’t do much other than showing off the list of your members. If you want to embed a more advanced and highly functional Discord widget to your website, using the WidgetBot is the way to go.

WidgetBot is nearly a complete version of a fully embedded Discord that can be altered and tailored according to your needs. Features such as size, channel support, functionality, guest membership, and so much more can be used using a Widget from WidgetBot. This will bring many new users to your server. You may also chat with them directly without having the need to launch the Discord app.

WidgetBot has certain features such as custom widget themes and a read-only channel on a paid membership. However, the basic core features you require are completely free and will benefit you a lot.

Let us proceed to see how we can use WidgetBot. We have divided the process into two. First, you must add WidgetBot to your server. After that, you’ll have to embed WidgetBot to your website.

Adding WidgetBot to Server

To begin the process, you’ll first have to add WidgetBot to your server itself. WidgetBot will only work when you add the bot to your server.

The following are the steps to add WidgetBot to your server:

Launch the WidgetBot invitation link and then log in to Discord to proceed further. You’ll have to choose your server from a list. Once done, click on Continue to move on.
Next, you’ll be asked about the permissions you want to allow to WidgetBot. It is recommended to keep all the checkboxes enabled. After that, click on Authorize to move forward. Once this process has been completed, return back to your server.

Embedding WidgetBot on Website

Once you have started running WidgetBot on your server, you can move forward to adding the WidgetBot Widget to your own website. There is a multiple range of widgets to choose from. The simplest way you can add a basic widget is by using the ??crate command on the server.

This will generate an HTML code which you can easily embed on your website. A Discord chat icon will also be created in the bottom-right corner. Once selected, a fully functional Discord client will be formed for your website visitors.

Follow the steps below to embed WidgetBot on your website:

To initiate the process, launch the Discord website or app. Select your server from the list displayed on the left.
Next, in a private channel containing the WidgetBot bot on your server, type ??crate inside the message box. Once done, send the message.
By sending ??crate to your server, the bot will generate an HTML code. This code can be embedded into your website.
Go ahead and copy the HTML snippet and save it in your notepad for quick references in the future.
After copying the code, paste it into the HTML of your website and publish it. This code will automatically create a discord icon. By selecting the icon, you can view your Widget and interact with it as well. You can also post messages directly to your server.

Making Use of Discord Widgets

A Discord Server Widget is a brilliant way to advertise your Discord community. This will open a portal for visitors to your website to join your server. You can use this to your advantage and increase your membership beyond expectations. This will help grow your server. Moreover, you can use the Widget to monitor your server without opening the Discord website or client.

On the other hand, using the WidgetBot widgets can unlock many more possibilities. These widgets provide an almost fully functional Discord widget. You can even send messages to your server. This will attract many users for you. You can monitor everything related to your server from your website using the WidgetBot Widgets.

Wrapping It Up

As you know by now, the Discord Widget is a brilliant feature that can be used to expand your entire online community. This Widget provides a gateway from your website to your server and invites new users visiting your site to join your server. Once you form a large community, you can assign various roles to the members to keep the community running smooth and swift.

In this article, we walked you through the entire process of how you can add the Discord Widget to your website. Through this Widget, your website visitors will be able to see your servers’ members. Those visitors can even use the Widget as an invite link. If you think the Official Discord widget is not enough, you can try out the WidgetBot Widget. This 3^rd party application will provide you with widgets that contain more features such as messaging and customization.

You can take the widget game up a notch with this application. By the end of the day, choosing which Widget you want to go for is your choice. Both of them have their own benefits and will definitely increase your number of members. We wish you all the best in growing your server, and we hope this guide will have helped you in figuring out how you can add the Discord widget to your website.