Discord is a popular voice over IP (VOIP) chat application that enables users to create communities and communicate through text, voice, and video. As of 2024, Discord boasts approximately 227 million active users.
Integrating your WordPress site with your Discord community can enhance user interaction and increase engagement by offering a smooth communication channel.
By embedding a Discord widget on your website, visitors can join and engage with your Discord server directly, whether your focus is on gaming, education, or creative collaboration.
In this article, we will guide you through the simple process of embedding a Discord widget into your WordPress site.
Benefits of Adding a Discord Widget to Your WordPress Site
Discord chat enables users to communicate via messages, voice calls, and video calls.
Embedding a Discord widget on your WordPress site provides a way for users to connect. This widget displays the total number of members in your Discord server and includes an invite link for new members to join.
By enabling WordPress users to join the Discord chat room, you can cultivate a vibrant community around your website and encourage visitors to spend more time on your site.
You can utilize the Discord widget to enhance customer support by setting up specific channels for inquiries and offering real-time assistance to your users.
Now, let’s explore how to integrate a Discord widget into your WordPress site.
How to Integrate a Discord Widget into WordPress
To integrate a Discord widget into WordPress, start by visiting the official Discord website.
Here, you will need to create a Discord user account and set up a Discord server for your community.
Step 1: Setting Up Your Discord Account and Server
If you already have a Discord account, click the ‘Login’ button located in the top right corner of the Discord homepage.
If you don’t have an account yet, click the ‘Open Discord in your browser’ option.
You will then be prompted to select a username for your Discord account.
This username will help others find you, but you can customize your display name for each server.
Next, Discord will direct you to the ‘Channels’ page and ask for your date of birth.
Simply input your information and click the ‘Next’ button to proceed.
After that, you will be prompted to create your first Discord server. You can either start with your own custom template or select from the available pre-made options.
In this tutorial, we will utilize the ‘Gaming’ server template.
Next, you’ll need to select a ‘Server Name’ for your chatroom and have the option to upload an image for the server.
After completing that, simply click the ‘Create’ button to set up your Discord server.
Finally, you will need to enter your email address and choose a password for your Discord account.
Once you provide this information, click the ‘Claim Account’ button.
Discord will then send a verification email to your provided email address.
After verifying your account, your server will be fully set up.
Now, you just need to embed the Discord widget into your WordPress site.
To do this, click the arrow icon next to your server name at the top of the Discord ‘Channels’ page.
This will reveal a dropdown menu where you should select the ‘Server Settings’ option.
You will be taken to the ‘Server Settings’ page. From there, click on the ‘Widget’ tab in the sidebar.
This will display the ‘Server Widget’ settings on the screen, where you need to 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.
Easily embed the Discord widget on your website by inserting the provided code.
Step 2: How to Embed the Discord Widget in WordPress
Begin by navigating to the WordPress page or post where you wish to add the Discord widget.
Once there, click the ‘+’ button in the top left corner to access the block menu.
Locate and select the Custom HTML block, then paste the widget’s HTML code into this block.
Finally, click the ‘Publish’ or ‘Update’ button at the top to save your changes. The Discord widget will now appear on your WordPress blog or website.
Here’s how the Discord widget appears on our demonstration site.
Remember, you can place the Discord widget in any block-enabled area of your theme, including sidebars, headers, or footers.
Bonus: Set Up Chatrooms in WordPress
If you prefer not to use Discord, you can create chat rooms directly on your WordPress blog. This feature allows an instant messaging prompt to appear on your site, enabling users to share their thoughts on your posts or engage in discussions with other visitors.
Easily set up a chatroom on your WordPress site using the Simple Ajax Chat plugin. This free tool allows you to add chatrooms that can be public or limited to logged-in users. For more information, check out our review of Simple Ajax Chat.
To get started, install and activate the Simple Ajax Chat plugin. For step-by-step instructions, refer to our beginner’s guide on installing a WordPress plugin.
After activating the plugin, navigate to the Settings » Simple Ajax Chatpage where you can customize the chatroom by adding a name and a default message. You can also choose whether to allow unregistered users to join, upload a custom logo, set brand colors, and much more.
Once you’ve made your adjustments, click the ‘Save Settings’ button to apply your changes. Then, scroll down to the Shortcode & Template Tag section and expand the tab.
Here, you can copy the shortcode and paste it anywhere on your website to display the chatroom.
For further guidance, check out our tutorial on creating a chat room in WordPress for your users.
We hope this article has helped you learn how to easily embed the Discord widget in your WordPress site. You may also want to explore our tutorial on adding an interactive map in WordPress and our guide on embedding TikTok videos on your website.
If you enjoyed this article, consider subscribing to our YouTube Channel for helpful WordPress video tutorials. You can also connect with us on Twitter and Facebook.
