So you recently stumbled upon a Discord server widget and now you are desperately looking for a way to create them for your own server. Right? Well, you are at the right spot as this is a complete A to Z guide about the free Discord widgets.
In this guide, you’ll get to learn what is a discord server widget and also a complete tutorial on how to embed a Discord server widget in a website.
Basically, Discord server widgets are an easy way to promote your server on a website easily. It lets you show a quick preview of your server, the channels & what it has to offer on the website itself. It is quite better than just a regular boring server invite link.
Enough talking, let’s get straight into the Discord server widget tutorial and learn what is it and how to embed it into a website using HTML in a few easy steps.
Contents
What is a Discord Server Widget?
Discord server widgets are one of the coolest ways to promote your server on your website, blog, or any website. To be honest, Discord invite links are kind of a boring way to promote your server and grow it. When you add a Discord widget to a website, instead of just a link, you’re showing a complete preview of your server.
It increases the chances of users getting attracted to your server and it really helps to grow the server much more quickly as compared to the regular invite links. Here’s a Discord widget example so you can have an idea of how it looks on the website.
If you run a blog or website, it’s a really good idea to embed the Discord server widget into your WordPress website. It lets you easily look at what’s happening on your server from your site itself. You won’t have to log in to your Discord account again & again.
Also, it is much easier for your blog’s audience to know about your server and join it easily by tapping on the Discord server widget. I hope now you have learned what is a Discord server widget.
By the way, this is not the only way to create & add discord widgets, you can also use the discord widget bot. You can also try discord widget themes using multiple options. But using the internal feature, you can easily set up a Discord server widget and it is the best way to do it.
Let’s move to the Discord server widget tutorial to learn how to create and embed Discord server widget HTML into any website.
How to Enable Discord Server Widget?
If you want to learn how to make a discord server widget or how to enable the discord server widget, here’s our step-by-step guide for you.
It is actually pretty easy. Basically, when you enable the Discord server widget feature on your server, you get the Discord Server Widget HTML code.
All you have to do is paste the Discord server widget HTML code into your website and your server widget gets live on the website using discord widget API. We’ll also learn how to embed the Discord server widget to your website in the next step.
Firstly, let’s look at how to enable and get the Discord server widget HTML code that you have to copy and embed into your website.
1. Open your Discord app & go to the Discord server for which you want to create a Discord server widget.
2. Click on the server name & click on Server Settings.
3. Search for ‘Widget’ & click on it to get the widget HTML code.
4. Simply, toggle the button to Enable the Discord Server Widget feature.
5. Choose your default invite channel from the drop-down menu for the widget.
6. That’s it, simply, copy the widget HTML code under Premade Widget section.
Basically, inside the Widget settings, you can customize and choose where the user lands when they enter your server using the Discord server widget appearing on your website.
Inside the drop-down menu, you can choose your desired text channel. Also, you can easily enable or disable the server widget feature here.
Just in case you need to, simply come back to this page & toggle the button & your server widget will disappear from the website. The widget works upon the discord widget API system, so if you turn it off it will not work on your website even if the code is embedded. It is useful in case a lot of bots, spammers, or fake users start bombarding your server.
The Discord widget API works for all devices. Once you add the code to your website which we’ll learn in the next step, your widget will appear on your website on every device. Whether you want the Discord server widget on iPhone or Android, it will get displayed on all devices.
Now you know how to enable the Discord server widget feature on your server. Let’s learn how to add discord server widget HTML to any website.
How to Add Discord Server Widget HTML to Website?
To add a Discord server widget to your website, all you need to do is embed the widget HTML code into your website. The method to embed the HTML code into your website can be different depending upon what CMS platform you have built your website upon.
According to Hubspot, 43.2% of all the websites on the Internet are built upon WordPress. Not just it, the share percentage is even increasing more year by year at a rapid pace.
Most probably, you have also a WordPress blog where you want to embed the Discord server widget. That’s why in this guide, we’ll explain how to embed Discord server widget HTML code into your WordPress website in a few easy steps.
In case, you are not using any CMS and you have a custom-coded website, please contact your developer to embed the server widget code for you into your website. That should be the only method for custom-built websites.
Anyways, here is the step-by-step method to easily embed Discord server widget HTML code into your WordPress website.
1. Log into your WordPress website by entering your admin credentials.
2. In the left panel, hover over Appearance & click on Widgets.
3. Simply, choose the area where you want your server widget to be placed like Footer or Sidebar.
4. Add the Custom HTML element to your desired Widget location.
5. Simply, paste the Discord server widget HTML code in the Custom HTML element & save it.
Yes, it’s done. Now go ahead & refresh your website, you’ll be able to see your Discord server widget preview on your website. If you’re not able to see any changes, please clear your WordPress & browser cache to see the latest version of your website.
If you want your server widget to appear on a specific page on your website, simply add the HTML code to that page and your Discord server widget will be shown to users on that page only like I have embedded the code on this page only.
There are various CMS platforms on the web that you can use to build your own blog or website. Some of the popular names include Wix, Joomla, Shopify, Magento, WordPress, etc.
WordPress is the most used and popular CMS on the web. That’s why in this guide we shared how to embed server widget code into a WordPress website. If you want to learn how to do it in Wix, Shopify, or any other CMS. Simply, look for a tutorial on the web.
The steps are exactly the same, just paste the HTML code into the widget section. Here is an awesome video explaining more about Discord server widgets.
Discord Widget Not Loading – How to Fix?
Is your Discord Widget not loading properly? Well, there could be multiple reasons why it’s happening. If your Discord server widget is not showing or loading on your website. You need to check and fix a couple of things.
Let’s look what can be the reasons behind the Discord server widget not being able to load properly on your website page. These are very simple issues you can easily solve yourself.
1. Clear Website Cache: As already explained in the article, your Discord widget might be loading for a new user but if you open your site frequently on your PC, you might be seeing the old cached webpage. Simply, clear your website cache to load the latest version.
2. Clear Discord & Browser Cache: If clearing the website cache doesn’t work, do clear your Discord cache files and also your web browser cache completely. This should surely fix the issue and you’ll be able to see the latest version of your website along with the Discord server widget.
3. Check Discord Server Widget Code: Probably, you haven’t placed the Discord server widget HTML code correctly on your website. You can try re-inserting the code by following our step-by-step guide to easily embed the HTML code into your website. Also, do check if the widget feature is enabled in your Discord server or not.
These are the only possible reasons why your Discord widget is not loading properly. If everything is perfectly fine and still you’re not able to preview your server widget on your website then there might be a Discord server outage issue.
Also Read: How to Contact Discord Support (3 Best Ways)
Please do check and confirm if their server is down or under maintenance. If this is the case, your server widget will start loading perfectly fine once the maintenance is completed. Wait for some time, you don’t need to do anything.
FAQs
What is a Discord server widget?
The discord server widget is a feature that lets you easily show a preview of your Discord server on a website page by embedding an HTML code.
How do I get a Discord server widget?
You can easily get the Discord server widget on your website by enabling it in your server settings on Discord. Simply, go to Server Settings > Widget > Enable Server Widget.
How do I add a Discord server to my website?
To add a Discord server widget to the website, simply copy the widget HTML code and paste it onto the webpage where you want to add the widget. Just follow our step-by-step guide as explained in this article.
Conclusion
Discord Server Widget is a really awesome feature that gives you the ability to show a preview of your server on your blog or website. It makes it easier for the user to get some idea of what your server has to offer them and they can easily join your server by clicking on the widget.
In this tutorial guide, you learned what is a Discord server widget, how to enable a discord server widget, and how to add discord server widget HTML code to your website.
If you learned something new from this guide, please support my work by sharing it with your Discord mates. For more awesome Discord tutorial guides, keep visiting The Discord Guide!
Hey Folks, I am Dustin Anderson. I’m a very passionate tech enthusiast who loves experimenting with cool gadgets and software on the computer. On this blog, I majorly write informative & in-depth Discord Tips, Tricks & Tutorial Guides.
