Discord Server Widget Generator: Embed Code for Your Website

Turn the widget on first

The code does nothing until Discord is told the widget is allowed. A server owner or someone with Manage Server does this once.

1. Open Server Settings and find the Widget page.
2. Switch on Enable Server Widget.
3. Pick the invite channel. This is the channel visitors are sent to when they press Join.
4. Save.

Generate the code

1. Get the server ID. Turn on Developer Mode in Advanced settings, right-click the server icon and choose Copy Server ID.
2. Choose a theme. Dark suits dark sites. Light suits white pages.
3. Set the size. Discord's default is 350 wide and 500 tall. Keep the width at least 250.
4. Copy the code and paste it into your page's HTML, in a custom HTML block if you use a site builder.

What the widget shows

• Your server name and icon.
• Members who are online, with their names and avatars, up to a limit Discord decides.
• Voice channels in use and a Join button using the invite channel you picked.

Only online members appear, and anyone who visits your site can see their names and avatars. If your community values privacy, think about that before you publish the widget, and tell members it exists.

Honest limits

• The tool does not preview the widget. It never calls Discord, so check the result on your page.
• You cannot restyle the inside of the iframe. Only theme and size are yours.
• Large servers may only list a part of their online members.
• If the widget shows an error saying it is disabled, Server Widget is still off in settings.
• Some site builders strip iframes. Use their embed or custom HTML block.

The sandbox attributes in the snippet are Discord's own. Leave them as they are so the Join button can open a new tab.

Is a widget the right tool?

A widget is a quick way to show life in a community. For a nicer first impression, link to a good invite and a clear rules channel. The invite link checker confirms your link works, the rules template generator helps you write rules, and the server description generator drafts the text for your listing. After people arrive, the verification and welcome docs show how Noxyr greets and sorts them, and the getting started guide covers adding the bot.