All examples

Vanilla JavaScript

A bundler imports @razorsoft/tracewise-status-js. This page calls the same functions from the embed script, which exposes them as TraceWiseStatus. The public slug is demo. No API key.

import {
  createIncidentList,
  createStatusBadge,
  createStatusCard,
  createStatusIndicator,
  createUptimeHistory,
} from "@razorsoft/tracewise-status-js";

const slug = "demo";
createStatusBadge({ target: "#badge", slug });
createStatusIndicator({ target: "#indicator", slug, showLabel: true });
createStatusCard({ target: "#card", slug, showUptime: true });
createUptimeHistory({ target: "#history", slug, period: 30, showUptime: true });
createIncidentList({ target: "#incidents", slug, limit: 5 });

Loading the embed script…

Status badge

Status indicator

Status card

Uptime history

Incident list

Custom elements

The embed script registers these tags. In an application, import "@razorsoft/tracewise-status-js" registers them instead. show-uptime is off unless the attribute is present.