Game servers and widgets

Two things make a game server look alive: a status card on your website, and a live card in your Discord. Dispresso does both from one listing. You add the server once, and the same listing feeds the site widget, the Discord card, the /servers/games page and the seeding tools.

The whole path in four steps#

1. 1
   Get the server ready. Know the address and, for Steam games, the query port. Each game guide below lists exactly what to look for.
2. 2
   Add it. In Discord run /gameserver setup, or use /dashboard/servers/games on the site.
3. 3
   Prove it is yours by putting a short code in the server name for a few minutes.
4. 4
   Embed it. Paste two lines on your website, and run /gameserver pin for a live card in Discord.

Pick your game#

• Minecraft
• DayZ
• Rust
• Garry's Mod
• Arma
• Hell Let Loose
• Squad
• FiveM
• Roblox

The widgets#

• Levels board
• Bump board
• Server status card
• Seeding board: who seeds your Squad, Hell Let Loose or WARDOGS server.
• Put a widget on any website: plain HTML, WordPress, Wix, Squarespace, Carrd and the common mistakes.

Live previews of all four are on /widgets.

How the widgets work#

• Each widget is one small script from dispresso.co/widgets/ that only ever talks to api.dispresso.co. No key, no login, nothing to install.
• They show only what is public: a listed, approved server that is not marked 18+. Anything else shows a short message, never a broken box.
• Two widgets of the same kind on one page need only one script tag.
• They follow the visitor's light or dark theme. data-theme="dark" or "light" forces one.
• data-accent sets the color (a hex such as #5865f2, or blue, violet, green, teal, pink, red, amber, orange, slate) and data-size="compact" gives a tighter card.
• A game server card can also show a 24 hour player chart with today's peak (data-chart="24h") and who is on now (data-players="5", up to 15). Player names show for Rust, Arma, Hell Let Loose and Garry's Mod, whose servers share them with any server browser.
• Each widget draws inside its own shadow root: your site's CSS cannot break it and its styles never leak onto your page. It fits anywhere from 280 to 600 pixels wide.
• The ?v=3 on the script address makes browsers fetch the newest version. Snippets without it keep working and catch up within a few hours.

<div data-dispresso-game-server data-server="YOUR_LISTING_ID"
     data-chart="24h" data-players="5"></div>
<script src="https://dispresso.co/widgets/game-server.js?v=3" async></script>

Build your own look#

Want your own design instead of ours? Read the same public address the widget reads and draw it however you like. This one fetches a listing and prints a line of text:

<p id="my-server">Loading...</p>
<script>
  fetch("https://api.dispresso.co/api/espresso/game-servers/YOUR_LISTING_ID")
    .then(function (res) { return res.ok ? res.json() : null; })
    .then(function (data) {
      var el = document.getElementById("my-server");
      if (!data || !data.server) { el.textContent = "Server not listed right now."; return; }
      var s = data.server;
      el.textContent =
        s.name.trim() + ": " + (s.status === "online" ? "online" : "offline") +
        ", " + s.players + " / " + s.max_players + " players";
    });
</script>

Fields available include name, status, players, max_players, map and last_query_at. The rest of the public API is in Developer API and Wire your website to Discord.

Styling#

Four knobs need no CSS: data-theme, data-accent, data-size and, on lists, data-limit (1 to 25). For the rest, give the div an id: its width comes from your page (at most 600 pixels by default), and the corner radius and font follow the --dispresso-radius and --dispresso-font variables:

<style>
  /* The card draws in its own shadow root, so size it from outside and
     set the look through these variables. Your id beats the built in rules. */
  #server-card {
    max-width: 420px;
    --dispresso-radius: 6px;
    --dispresso-font: Georgia, serif;
  }
</style>
<div id="server-card" data-dispresso-game-server data-server="YOUR_LISTING_ID"
     data-theme="dark" data-accent="#5865f2" data-size="compact"></div>
<script src="https://dispresso.co/widgets/game-server.js?v=3" async></script>