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.