KissPOS Status – Widget-Integration

Dieses Dokument beschreibt, wie der Systemstatus in bestehende Web-Anwendungen eingebettet werden kann.

Option 1: Einbettbares JavaScript-Widget

Ein einzelnes <script>-Tag genügt. Das Widget lädt eigenständig, zeigt den aktuellen Systemstatus und aktualisiert sich automatisch.

Floating Badge (Standard)

Rechts unten – schwebend

Füge diesen Code am Ende des <body> in der ServerUI ein:

<script
  src="https://status.kisspos.de/widget.js"
  data-kisspos-status
  data-position="bottom-right"
  data-theme="auto"
  data-refresh="60"
></script>

Inline-Einbettung

In ein bestehendes Element einbetten

Mit data-target kann das Widget in ein beliebiges Element gerendert werden:

<!-- Ziel-Container im ServerUI -->
<div id="kisspos-status-container"></div>

<!-- Widget-Script -->
<script
  src="https://status.kisspos.de/widget.js"
  data-kisspos-status
  data-position="inline"
  data-target="#kisspos-status-container"
  data-theme="dark"
></script>

Verfügbare Optionen (data-Attribute)

Attribut	Werte	Standard	Beschreibung
data-position	top-right, top-left, bottom-right, bottom-left, inline	bottom-right	Position des schwebenden Badges
data-theme	light, dark, auto	light	Farbschema (auto = System-Einstellung)
data-refresh	Zahl (Sekunden)	60	Aktualisierungsintervall
data-target	CSS-Selektor	—	Element für Inline-Einbettung
data-api	URL	Script-Herkunft	Benutzerdefinierte API-URL

Option 2: REST API (eigene Darstellung)

Für eine eigene Darstellung im ServerUI kann die Status-API direkt abgefragt werden. Alle Endpunkte unterstützen CORS.

GET

/api/widget-status

Kompakte Statusübersicht – optimiert für Widgets und Dashboards.

// Beispiel-Antwort
{
  "overall": "operational",      // operational | degraded | partial_outage | major_outage | maintenance
  "services": [
    { "id": "...", "name": "API", "status": "operational" },
    { "id": "...", "name": "Web App", "status": "degraded" }
  ],
  "incidents": [
    {
      "id": "...",
      "title": "Erhöhte Antwortzeiten bei der API",
      "status": "investigating",
      "impact": "minor",
      "started_at": "2026-03-04T10:00:00"
    }
  ]
}

GET

/api/status

Vollständige Statusdaten inkl. Verfügbarkeit und geplante Wartungen.

Beispiel: Fetch in JavaScript/React/Vue

// Vanilla JS
fetch('https://status.kisspos.de/api/widget-status')
  .then(r => r.json())
  .then(data => {
    const { overall, services, incidents } = data;
    if (overall !== 'operational') {
      showStatusBanner(overall, incidents);
    }
  });

// React (useEffect)
useEffect(() => {
  fetch('https://status.kisspos.de/api/widget-status')
    .then(r => r.json())
    .then(setStatus);
}, []);

// Vue 3 (onMounted)
onMounted(async () => {
  status.value = await fetch('https://status.kisspos.de/api/widget-status')
    .then(r => r.json());
});

Status-Werte Referenz

Wert	Bedeutung	Farbe (hex)
operational	Alles normal	#16a34a
degraded	Eingeschränkte Leistung	#d97706
partial_outage	Teilausfall	#ea580c
major_outage	Schwerer Ausfall	#dc2626
maintenance	Geplante Wartung	#4f46e5