DEV Community

Draginox
Draginox

Posted on

Embed Minecraft Server Status Badges on Any Website (HTML, Markdown, BBCode)

#webdev #html #gamedev #opensource

Server owners and community managers often want to display their Minecraft server's live status on a website, forum post, or GitHub README. In this guide, I'll show you how to embed dynamic server status badges anywhere using Minecraft ServerHub.

What Are Server Status Badges?

Server status badges are small, auto-updating images that show whether your Minecraft server is online, how many players are connected, and what version it runs. They work like CI/CD badges on GitHub but for game servers.

Here's an example badge URL for Hypixel:

https://minecraft-serverhub.com/api/badge/play.hypixel.net
Enter fullscreen mode Exit fullscreen mode

This returns an SVG image that updates in real-time. No JavaScript needed on the client side — it's just an image tag.

Available Badge Styles

The Badge Generator offers three visual styles:

Rounded (Default)

The rounded style has smooth corners and a modern look. It works well on light backgrounds and README files:

https://minecraft-serverhub.com/api/badge/play.hypixel.net?style=rounded
Enter fullscreen mode Exit fullscreen mode

Flat

The flat style matches the popular shields.io aesthetic. Perfect for GitHub READMEs where you already use flat badges:

https://minecraft-serverhub.com/api/badge/play.hypixel.net?style=flat
Enter fullscreen mode Exit fullscreen mode

Minecraft

The minecraft style uses the iconic Minecraft font and color scheme. Great for fan sites and server communities:

https://minecraft-serverhub.com/api/badge/play.hypixel.net?style=minecraft
Enter fullscreen mode Exit fullscreen mode

Customization Options

Every badge URL accepts query parameters for customization:

Parameter Values Description
style rounded, flat, minecraft Visual style
label Any text Custom left-side label
players true/false Show player count
version true/false Show server version
dark true/false Dark theme variant

Example with all options:

https://minecraft-serverhub.com/api/badge/play.hypixel.net?style=flat&players=true&version=true&dark=true&label=My%20Server
Enter fullscreen mode Exit fullscreen mode

Embedding in HTML

For websites, use a simple image tag wrapped in a link:

<a href="https://minecraft-serverhub.com/server/play.hypixel.net">
  <img src="https://minecraft-serverhub.com/api/badge/play.hypixel.net?style=rounded"
       alt="Server Status"
       loading="lazy" />
</a>
Enter fullscreen mode Exit fullscreen mode

This creates a clickable badge that links to the full server status page with detailed information.

Auto-Refreshing Badge

If you want the badge to update without page refresh, add a small script:

<img id="server-badge"
     src="https://minecraft-serverhub.com/api/badge/mc.example.com?style=rounded" />

<script>
setInterval(function() {
  var img = document.getElementById("server-badge");
  img.src = img.src.split("&t=")[0] + "&t=" + Date.now();
}, 60000); // Refresh every 60 seconds
</script>
Enter fullscreen mode Exit fullscreen mode

Embedding in Markdown (GitHub, GitLab, dev.to)

For README files and Markdown-based platforms:

[![Server Status](https://minecraft-serverhub.com/api/badge/play.hypixel.net?style=flat)](https://minecraft-serverhub.com/server/play.hypixel.net)
Enter fullscreen mode Exit fullscreen mode

This renders as a clickable badge image in any Markdown renderer.

GitHub README Example

Add server status to your Minecraft plugin's README alongside your CI badges:

# My Minecraft Plugin

[![Build](https://img.shields.io/github/actions/workflow/status/user/repo/build.yml)]()
[![Server Status](https://minecraft-serverhub.com/api/badge/play.myserver.com?style=flat)](https://minecraft-serverhub.com/server/play.myserver.com)

A custom plugin for our community server.
Enter fullscreen mode Exit fullscreen mode

Embedding in BBCode (Forums)

Many Minecraft communities use XenForo, phpBB, or other forum software. Use BBCode to embed badges:

[url=https://minecraft-serverhub.com/server/play.myserver.com]
[img]https://minecraft-serverhub.com/api/badge/play.myserver.com?style=minecraft[/img]
[/url]
Enter fullscreen mode Exit fullscreen mode

The minecraft style looks especially good on forum signatures and server listing posts.

Using the npm Package

For programmatic badge generation, install the minecraft-server-badge package:

npm install minecraft-server-badge
Enter fullscreen mode Exit fullscreen mode 
const { badge, html, markdown, bbcode } = require("minecraft-server-badge");

// Get just the badge URL
const url = badge("play.hypixel.net", { style: "flat", players: true });

// Get ready-to-paste HTML
const htmlCode = html("play.hypixel.net", { style: "rounded" });

// Get ready-to-paste Markdown
const mdCode = markdown("play.hypixel.net", { style: "flat" });

// Get ready-to-paste BBCode
const bbCode = bbcode("play.hypixel.net", { style: "minecraft" });
Enter fullscreen mode Exit fullscreen mode

This is useful when building tools that generate embed codes for server owners, like the interactive badge generator on Minecraft ServerHub.

Using the Visual Badge Generator

If you prefer a no-code approach, the Badge Generator tool provides:

  • Live preview as you configure options
  • One-click copy for HTML, Markdown, and BBCode
  • All style and customization options in a visual interface
  • Instant badge preview with your actual server data

Just enter your server address, pick a style, toggle the options you want, and copy the embed code.

Combining with the Status API

For more advanced integrations, combine badges with the full status API. The badge gives you a visual indicator, while the API gives you raw data for custom displays:

// Show badge + detailed stats below it
async function getServerInfo(address) {
  const response = await fetch("https://minecraft-serverhub.com/api/server/" + address);
  const data = await response.json();
  return {
    badgeUrl: "https://minecraft-serverhub.com/api/badge/" + address + "?style=flat",
    players: data.players,
    version: data.version,
    motd: data.motd
  };
}
Enter fullscreen mode Exit fullscreen mode

Real-World Examples

Here are some ways the Minecraft community uses status badges:

  1. Server listing websites — Show live status next to each server entry
  2. Discord server info channels — Embed badges in channel topics
  3. Forum signatures — Display your server status in every forum post
  4. GitHub READMEs — Show server status alongside project badges
  5. Personal websites — Add a "Join my server" widget with live status

Monitoring Multiple Servers

If you run a network with multiple servers, you can display badges for each one. The server explorer shows how multiple servers can be displayed together with their status data.

Performance Considerations

The badge API is designed for embedding:

  • SVG format — Tiny file size, scales to any resolution
  • CDN-cached — Served through Cloudflare for fast global delivery
  • 5-minute cache — Balances freshness with performance
  • No JavaScript required — Works as a plain image tag

Conclusion

Server status badges are the easiest way to show live Minecraft server information anywhere on the web. Whether you embed them in HTML, Markdown, or BBCode, they just work — no API keys, no JavaScript, no setup.

Try the Badge Generator to create your first badge, or explore the full developer documentation for advanced integrations.

Built with Minecraft ServerHub — free Minecraft server monitoring and status tools.

Top comments (0)