Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

How to Embed Discord Widget into WordPress

Discord is a well-known VOIP chat application that allows you to build your own communities and enables users to communicate with each other through text, voice, and video. As of 2024, Discord has about 227 million active users.

Connecting your WordPress site with your Discord community can improve user interaction and boost engagement by providing a seamless communication channel.

Embedding a Discord widget into your website will allow visitors to join and interact with your Discord server directly, whether you are fostering a community around gaming, teaching, or creative collaboration.

In this article, we will show you how to easily embed a Discord widget into WordPress.

How to Embed Discord Widget into WordPress

Why Add a Discord Widget to Your WordPress Site?

Discord chat allows users to communicate with each other over messages, voice calls, and video calls.

By embedding a Discord widget in your WordPress website, you can provide a way for your users to connect. This widget will display the total members of your Discord server and will also provide an invite link for new members to join.

By allowing WordPress users to join the Discord chat room, you can build a huge community for your website and encourage visitors to stay on your site longer.

Additionally, you can use the Discord widget to provide customer support by creating dedicated channels for support questions and providing live support to your users.

That being said, let’s see how you can add a Discord widget in WordPress.

How to Embed a Discord Widget in WordPress

To embed a Discord widget in WordPress, you must visit the official Discord website.

Here, you will have to create a Discord user account and a Discord server for your community.

Step 1: Creating a Discord Account and Server

Once you are on the Discord website, simply click the ‘Login’ button in the top right corner of the screen if you already have a Discord account.

However, if you don’t have an account, click the ‘Open Discord in your browser’ button.

Login to your Discord account or create a new account

You will be then asked to choose a username for your Discord account.

This will be your handle for others to find you, but you can change your display name on a server-by-server basis.

Choose a username for your discord account

Next, Discord will take you to the ‘Channels’ page and then ask for your date of birth.

Simply enter your details and click the ‘Next’ button to continue.

Type your date of birth and click Next button

After that, you will be asked to create your first Discord server. Now, you can either create your own template or choose any of the premade ones.

For this tutorial, we will be using the ‘Gaming’ server template.

Create a discord server

Next, you will be asked to choose a ‘Server Name’ for your chatroom. You can also upload an image for the server.

Once you’ve done that, simply click the ‘Create’ button to create your Discord server.

Type a name for your discord server

Lastly, you will be asked to provide your email address and choose a password for your Discord account.

Once you provide these details, click the ‘Claim Account’ button.

Provide your email and password

Now, Discord will send a verification email to your email address.

Once you verify your account, your server will be set up.

Email for verification

Now, all you have to do is embed the Discord widget in WordPress.

To do this, click the arrow icon next to your server name at the top of the Discord ‘Channels’ page.

This will open up a dropdown menu where you have to click the ‘Server Settings’ option.

Click server settings option

You will now be directed to the ‘Server Settings’ page. From here, click the ‘Widget’ tab from the sidebar.

This will open up the ‘Server Widget’ settings on the screen from where you must toggle the ‘Enable Server Widget’ switch.

Toggle the enable server widget switch

After that, scroll down to the ‘Premade Widget’ section and click the ‘Copy’ button under the ‘Premade Widget’ option.

You can now embed the Discord widget anywhere on your website by pasting this code.

Copy premade widget shortcode

Step 2: Embedding the Discord Widget in WordPress

First, go to the WordPress page or post where you want to embed the Discord widget.

Once you’re there, click the add block ‘+’ button in the top left corner of the screen to open the block menu.

From here, find and add the Custom HTML block to the page/post. Next, simply paste the HTML code for the widget into the block.

Paste the discord widget shortcode into the HTML block

After that, click the ‘Publish’ or ‘Update’ button at the top to store your settings. The Discord widget will now be embedded in your WordPress blog or website.

This is how the Discord widget looked on our demo site.

Discord widget on your website

Note that you can embed the Discord widget in any block-enabled area of your themes, such as a sidebar, header, or footer.

Bonus: Create Chatrooms in WordPress

If you don’t want to use Discord, then you can create chat rooms directly on your WordPress blog. This way, an instant messaging prompt will be displayed on your site where users can leave their opinions about your posts or discuss them with other visitors.

You can easily create a chatroom with Simple Ajax Chat. This free plugin lets you add chatrooms anywhere on your WordPress site. They can be open to the public or restricted to logged-in users. To learn more, see our Simply Ajax Chat review.

First, you need to install and activate the Simple Ajax Chat plugin. For details, see our beginner’s guide on how to install a WordPress plugin.

Upon activation, visit the Settings » Simple Ajax Chat page where you can add a name and default message for the chatroom. You can also decide if you want to allow unregistered users to participate, add your custom logo, configure brand colors, and so much more.

Add a name and message for chat room

Once you are done, just click the ‘Save Settings’ button to store your settings. After that, scroll down to the Shortcode & Template Tag section and expand the tab.

From here, you can copy the shortcode and paste it anywhere on your website where you want to add a chat room.

Copy shortcode for the chat room

For details, you can see our tutorial on how to create a chat room in WordPress for your users.

We hope this article helped you learn how to easily embed the Discord widget in WordPress. You may also want to check our tutorial on how to add an interactive map in WordPress and our article on how to embed TikTok videos on your website.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

2 CommentsLeave a Reply

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Dennis Muthomi

    Thank you for this comprehensive guide !
    One thing I found particularly valuable was the mention of using Discord for customer support. This could be a game-changer for many WordPress site owners looking to improve their user engagement. I’ve personally used Discord for community building, and I can attest to its effectiveness in fostering real-time interactions.

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.