Introduction
Create custom Discord embed pages for your server, host them on GitHub Pages connected to your is-pro.dev subdomain, and embed them on your main website.
What You Will Need
- A Discord server with widget settings configured
- A GitHub account for hosting the widget page
- An is-pro.dev subdomain (free at dash.is-pro.dev)
- Basic HTML/CSS knowledge
- 15-20 minutes of free time
Step 1: Enable Discord Server Widget
In your Discord server, go to "Server Settings → Widget".
Enable the server widget and copy the
serverId from the widget URL (e.g.,
https://discord.com/widget?id=123456789). This ID
is needed to embed live server data.
Step 2: Create the Widget HTML Page
Create an index.html file with a custom embed
layout. Use the Discord Widget API
(https://discord.com/api/guilds/{serverId}/widget.json)
to fetch live member count, online status, and channel info.
Style the page with CSS to match your personal brand or
website theme.
Step 3: Deploy to GitHub Pages
Push the HTML page to a GitHub repository. Go to the
repository "Settings → Pages" and enable GitHub Pages
from the main branch. Your widget page will be
live at
https://{username}.github.io/{repository}/.
Verify it loads and displays Discord data correctly.
Step 4: Connect Your is-pro.dev Subdomain
In your is-pro.dev DNS dashboard, create a CNAME record
pointing your subdomain (e.g.,
discord.yourname.is-pro.dev) to
{username}.github.io. GitHub Pages will recognize
the custom domain and provision a Let's Encrypt certificate
automatically.
Step 5: Verify and Embed
Visit your subdomain to confirm the Discord widget loads
correctly. Use an <iframe> or
<embed> tag on your main website to display
the widget page. Test that the member count, online status,
and invite button all work from the embedded view.
Troubleshooting
CORS errors fetching widget data: The Discord Widget API does not require authentication. If you see CORS errors, ensure you are using the correct API endpoint and that your widget is enabled in Discord server settings.
GitHub Pages not serving custom domain: Add
your is-pro.dev subdomain to the GitHub Pages custom domain
field in the repository settings. Also ensure your DNS CNAME
record has the trailing dot
({username}.github.io.).
Widget data not updating: Discord caches widget data for up to 60 seconds. Your page should use JavaScript to poll the API at regular intervals or on page load to display fresh data.