Embed the status widget

Give your customer a "connected / syncing / error" view without building an integrations dashboard. The flow has two roles, and one runnable example plays both.

The two roles

1. Your backend holds the Siphon API key and mints a short-lived, connection-scoped embed token:

   curl -X POST https://your-siphon.app/api/v1/tokens/embed \
     -H "Authorization: Bearer ck_your_key" \
     -H "content-type: application/json" \
     -d '{ "connectionId": "<id>", "ttlSeconds": 300 }'

2. Your frontend takes that token and calls the embed endpoint directly — the API key never reaches the browser:

   curl https://your-siphon.app/api/v1/embed/connection \
     -H "x-siphon-embed-token: <token>"

   The response carries the connection's freshness (health, last-synced age, overdue flag) and its recentRuns.

The runnable example

examples/embed-demo/server.mjs is a single dependency-free Node server that plays both roles: it mints the token server-side and serves an HTML page that renders a live status widget, polling every 10 seconds.

SIPHON_API_KEY=ck_your_key SIPHON_CONNECTION_ID=<id> \
  node examples/embed-demo/server.mjs
# open http://localhost:4000

With React

For a drop-in component, use @siphon/embed-react:

import { ConnectionStatus } from "@siphon/embed-react";

<ConnectionStatus baseUrl="https://your-siphon.app" token={embedToken} showRuns pollMs={15000} />

Your server hands the component a freshly minted token; the component renders the health pill, "last synced", an Overdue badge, and (optionally) recent runs.