Comma

Embed an HTML report in your own site

There is a specific kind of page that always ends up stale: the docs page, intranet dashboard or customer-portal tab that shows "the latest numbers." Someone exports an HTML file, drops it in a bucket, iframes it — and then the numbers change and nobody re-exports it, because the export lives in a different workflow from the report.

The fix is to embed the report itself rather than a copy of it.

Two lines

<div data-comma-report="REPORT_ID"></div>
<script src="https://commareports.com/embed.js" async></script>

Then add the host site's origin to that report's allowed embed origins. That list is the switch: with it empty, the embed endpoint renders nothing. With https://docs.example.com on it, that origin — and only that origin — can frame the report, because frame-ancestors is built from the same list. Clearing the list revokes every existing embed on the next load.

The loader builds the frame and relays the content height back out, so the embed grows with the report instead of scrolling inside a fixed box.

How it's isolated

The report document renders in a nested sandboxed iframe — sandbox="allow-scripts" with no allow-same-origin, so it sits on an opaque origin. Concretely:

  • It cannot read your page's cookies, localStorage or DOM.
  • It cannot reach a Comma app session either, which is why report HTML can keep its scripts and stay interactive.
  • The only thing crossing the boundary is the height message.

Interactive reports — a Plotly figure, a filterable table, an interactive HTML report — keep working inside the embed for exactly that reason.

What you get that a static iframe can't give you

  • Always current. The embed serves the live revision, so a report refreshed from CI or by a routine updates everywhere it's embedded. Nobody re-exports anything.
  • Approval gating, if you want it. With approved-only enabled, the embed serves the approved revision — so a customer-facing page never shows an unreviewed number.
  • One source of truth. The same report has its own URL, its own comment threads, and its own access rules. The embed is a view of it, not a fork of it.

Where teams use it

Customer-facing status and usage pages. Internal wikis and Backstage pages, where the alternative is a screenshot with a date on it. Docs sites that need a live example rather than a picture of one. Client portals, where the report is the deliverable and the portal is just the frame around it.

Try it

Comma is free — unlimited reports, unlimited commenters, unlimited revision history. Publish one report, allow one origin, paste two lines.

Create your first report →

Related