\ud83d\udc49 In this post, we’ll take a closer look at why you might want to add a Discord widget to your site<\/a>. Then, we’ll guide you through three simple steps to embed a Discord widget<\/a> in WordPress. Let’s get started!<\/p>\n<\/div>\n\n\n\n Discord is a communications app that enables users to share voice, video, and texts messages. Although it’s used socially, it’s also relied on heavily within gaming communities<\/a>, and by developers.<\/p>\n\n\n\n You can use it to set up private channels and create custom member access<\/a>. Plus, it’s a great way to share videos, collaborate with other users, and watch friends live stream games.<\/p>\n\n\n\n With the growing popularity of Discord, you might want to embed a Discord widget into your WordPress site purely because of it. While Slack is a platform that’s more popular among professionals, Discord is more in tune with casual audiences that gather around a cause [1]<\/sup>.<\/p>\n\n\n\n Your Discord widget will offer a simple way for users to connect with each other. Additionally, the widget will clearly display the number of users on your Discord server. Plus, you can even send links to invite new members to join your chat rooms.<\/p>\n\n\n Now that you know why to embed a Discord widget on your site, let’s take a look at how to do this in WordPress in three steps.<\/p>\n\n\n\n To embed a Discord widget, you’ll first need to create a Discord account. So, head over to Discord’s official website<\/a>.<\/p>\n\n\n\n If you already have a Discord account, click on the Login<\/strong><\/em> button in the top right corner of the screen. Otherwise, select Open Discord in your browser<\/strong><\/em>:<\/p>\n\n\n\n At this point, you can choose a username for your Discord account. This will become the handle for other users to find you.<\/p>\n\n\n\n Next, you’ll be asked to fill in your date of birth. You’ll then be prompted to create your first Discord server. To do this, you can either use a pre-built template, with options for gaming, friends, artists, and more. Or, click on Create My Own<\/strong><\/em>.<\/p>\n\n\n\n Now, you’re able to customize your Discord server. Here, you can give your server a name and upload a logo or icon. Then, click on Create<\/strong><\/em>:<\/p>\n\n\n You’ll be notified when your server is ready. Then, follow the link that says Take me to my server!<\/em><\/strong><\/p>\n\n\n\n Although you’ll arrive in your server, be aware that your account hasn’t yet been verified. Therefore, you need to click on the Claim Account<\/strong><\/em> link from the green banner at the top of the page:<\/p>\n\n\n Here, enter your email address and a password.<\/p>\n\n\n\n A confirmation link will be sent to your email. Click on the link in your inbox to verify your account. Then, select Continue to Discord<\/strong><\/em>:<\/p>\n\n\n Now, you should be able to see your Discord server without the Claim Now<\/em><\/strong> banner.<\/p>\n\n\n Now that you’ve set up your server and verified your account, you’re ready to embed the Discord widget into WordPress. To do this, navigate to the Text Channels<\/strong><\/em> page. You’ll find this by clicking on the server tab below Direct Messages<\/strong><\/em>.<\/p>\n\n\n\n On our screen, this tab is labelled 1s<\/em><\/strong>:<\/p>\n\n\n Now, at the top of the page, click on the arrow besides your server name. This will open a dropdown menu where you’ll select the Server Settings<\/em><\/strong> option:<\/p>\n\n\n Next, find the Widget<\/strong><\/em> tab in the sidebar to the left of your screen. At the top of the Server Widget<\/strong><\/em> section, toggle on the Enable Server Widget<\/strong><\/em> setting:<\/p>\n\n\n Scroll down to the Premade Widget<\/strong><\/em> section at the bottom of the page. In order to embed a Discord widget, you’ll need to copy the HTML code:<\/p>\n\n\n Now, you’re able to embed the Discord widget on your site using the code.<\/p>\n\n\n With your Discord HTML code<\/a> at the ready, you’re all set to embed a Discord widget. All you need to do is open the WordPress post or page where you want to include the widget.<\/p>\n\n\n\n Then, click on the +<\/strong><\/em> icon to add a new WordPress block. Find the Custom HTML<\/strong><\/em> block and add it to your page:<\/p>\n\n\n Now, paste in your Discord HTML embed code that you copied in the previous section:<\/p>\n\n\n Click on Save<\/strong><\/em> or Publish<\/strong><\/em> at the top of your page. Then, select Preview<\/strong><\/em> to see how your Discord widget will display to your visitors:<\/p>\n\n\n You can also embed your Discord widget into any area of your site that uses WordPress blocks. For instance, if you use the Full Site Editor (FSE)<\/a>, you can add the widget to your template parts<\/a> like your header, sidebar, or footer.<\/p>\n\n\n Due to the growing popularity of the Discord app, adding a Discord widget to your site is a great idea. This way, users can share videos, texts, and voice messages with one another. It’s a super easy way to foster a community on your site<\/a> and facilitate conversations between your members.<\/p>\n<\/div>\n\n\n\nWhy embed a Discord widget into WordPress?<\/h2>\n\n\n\n
How to embed a Discord widget into WordPress<\/h2>\n\n\n\n
\n
Step 1: Set up a Discord account and create a server \ud83d\udda5\ufe0f\ud83e\uddcd<\/h3>\n\n\n
![\"Create](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/05\/open-discord.png\")
<\/figure><\/div>\n\n\n![\"Customize](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/05\/customize-server.png\")
<\/figure><\/div>\n\n\n![\"Discord](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/05\/discord-server.png\")
<\/figure><\/div>\n\n\n![\"Verify](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/05\/verify-email.png\")
<\/figure><\/div>\n\n\nStep 2: Enable the server widget and copy the embed link \ud83d\udda5\ufe0f\ud83d\udd17<\/h3>\n\n\n\n
![\"Access](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/05\/channels-tab-scaled.jpg\")
<\/figure><\/div>\n\n\n![\"Discord](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/05\/discord-server-settings.png\")
<\/figure><\/div>\n\n\n![\"Enable](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/05\/server-widget.jpg\")
<\/figure><\/div>\n\n\n![\"The](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/05\/embed-widget-link.jpg\")
<\/figure><\/div>\n\n\nStep 3: Embed a Discord widget \ud83d\uddb1\ufe0f\u2699\ufe0f<\/h3>\n\n\n\n
![\"Embed](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/05\/add-html-scaled.jpg\")
<\/figure><\/div>\n\n\n![\"Pasting](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/05\/paste-discord-html.png\")
<\/figure><\/div>\n\n\n![\"Preview](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/05\/preview-discord-widget.png\")
<\/figure><\/div>\n\n\nConclusion \ud83e\uddd0<\/h2>\n\n\n\n