Embed Status Updates on Your Website

Add a lightweight JavaScript widget to any page. No iframes needed — the widget fetches your live status data and renders it directly using Shadow DOM for complete style isolation.

Templates

Dark Card

Dark green card with logo header and status pill badges. Great for standalone embeds and sports/recreation sites.

<script src="https://statusfy.com/assets/js/statusfy-widget.js"
  data-account="YOUR_ACCOUNT_ID"
  data-template="dark-card"
  data-name="Your Organization Name"
  data-logo="https://your-logo-url.jpg"
  data-refresh="60"></script>

Light Card

White card with subtle shadow, same layout as dark card. Ideal for corporate sites and light themes.

<script src="https://statusfy.com/assets/js/statusfy-widget.js"
  data-account="YOUR_ACCOUNT_ID"
  data-template="light-card"
  data-name="Your Organization Name"
  data-logo="https://your-logo-url.jpg"
  data-refresh="60"></script>

Minimal List

No container chrome, plain list with small colored dots. Perfect for inline embedding within existing content.

<script src="https://statusfy.com/assets/js/statusfy-widget.js"
  data-account="YOUR_ACCOUNT_ID"
  data-template="minimal-list"
  data-name="Your Organization Name"
  data-refresh="60"></script>

Compact Strip

Horizontal flex row of chip-style items. Best for header/footer bars and narrow spaces.

<script src="https://statusfy.com/assets/js/statusfy-widget.js"
  data-account="YOUR_ACCOUNT_ID"
  data-template="compact-strip"
  data-name="Your Organization Name"
  data-refresh="60"></script>

Badge Grid

CSS grid of status tiles with colored indicators. Ideal for dashboards and wide displays.

<script src="https://statusfy.com/assets/js/statusfy-widget.js"
  data-account="YOUR_ACCOUNT_ID"
  data-template="badge-grid"
  data-name="Your Organization Name"
  data-refresh="60"></script>

Configuration Reference

Attribute Type Default Description
data-account string required Your Statusfy account (DNIS) ID
data-template string dark-card Widget template: dark-card, light-card, minimal-list, compact-strip, badge-grid
data-name string "" Organization name displayed in the widget header
data-logo string "" URL to your logo image (shown in card templates)
data-extensions string all Comma-separated extension IDs, or all to show everything
data-sort string name Sort order: name, extension, or time
data-refresh number 60 Auto-refresh interval in seconds. Set to 0 to disable
data-hide-status string "" Comma-separated status codes to hide (1=Green, 2=Yellow, 3=Red, 4=Blue)
data-category string "" Category ID to filter extensions by
data-demo boolean absent When present, renders with sample data (no API call)

Customization

The widget uses Shadow DOM for complete style isolation — your page's CSS won't affect the widget, and the widget won't affect your page.

You can override the following CSS custom properties on the widget's host element to adjust its appearance:

.statusfy-widget {
  --statusfy-font: "Your Custom Font", sans-serif;
  --statusfy-radius: 8px;
  --statusfy-green: #22c55e;
  --statusfy-yellow: #eab308;
  --statusfy-red: #ef4444;
  --statusfy-blue: #3b82f6;
}

Use the Feed Builder to configure and generate your embed code automatically.

Get Started