Skip to main content
Display your current status on any website with embeddable widgets.

​
Widget Types

​
Status Badge

A simple badge showing current status: 
<script
  src="https://kodostatus.com/widget.js"
  data-page="your-org-slug"
  data-style="badge">
</script>
Preview:
  • 🟢 All Systems Operational
  • 🟡 Degraded Performance
  • 🔴 Major Outage

​
Floating Widget

A floating button that expands to show status: 
<script
  src="https://kodostatus.com/widget.js"
  data-page="your-org-slug"
  data-style="floating"
  data-position="bottom-right">
</script>
Positions: bottom-right, bottom-left, top-right, top-left

​
Status Banner

A full-width banner for the top of your page: 
<script
  src="https://kodostatus.com/widget.js"
  data-page="your-org-slug"
  data-style="banner">
</script>

​
Customization

​
Colors

<script
  src="https://kodostatus.com/widget.js"
  data-page="your-org-slug"
  data-style="badge"
  data-color-operational="#22c55e"
  data-color-degraded="#eab308"
  data-color-outage="#ef4444">
</script>

​
Dark Mode

<script
  src="https://kodostatus.com/widget.js"
  data-page="your-org-slug"
  data-style="badge"
  data-theme="dark">
</script>
Options: light, dark, auto (follows system preference)

​
Custom Text

<script
  src="https://kodostatus.com/widget.js"
  data-page="your-org-slug"
  data-style="badge"
  data-text-operational="Everything is working"
  data-text-degraded="Some issues detected"
  data-text-outage="Services unavailable">
</script>

​
React Component

import { StatusWidget } from '@kodo-status/react';

function App() {
  return (
    <StatusWidget
      page="your-org-slug"
      style="badge"
      theme="auto"
    />
  );
}
Installation: 
npm install @kodo-status/react

​
Vue Component

<template>
  <StatusWidget
    page="your-org-slug"
    style="floating"
    position="bottom-right"
  />
</template>

<script>
import { StatusWidget } from '@kodo-status/vue';
export default {
  components: { StatusWidget }
}
</script>

​
API Endpoint

Build your own widget using our API: 
const response = await fetch(
  'https://kodostatus.com/api/v1/status/your-org-slug'
);

const { status, services, incidents } = await response.json();
Response: 
{
  "status": "operational",
  "services": [
    { "name": "API", "status": "operational" },
    { "name": "Web App", "status": "operational" }
  ],
  "incidents": []
}

​
Caching

The widget caches status for 60 seconds to minimize requests. For real-time updates, use the API directly or implement WebSocket connections.

​
Content Security Policy

If you use CSP, add: 
script-src 'self' https://kodostatus.com;
connect-src 'self' https://kodostatus.com;