Embed the x402-list widget

Show live x402 services (names, status, and 24h uptime) directly on your own site, README-hosted page, or docs. The widget is a single dependency-free script: it injects a small card into a host <div> and keeps every visitor pointed back to the full directory. It reads the public /api/v1/services endpoint (CORS is open), so there is no backend to run and nothing to configure.

It is not an iframe. x402-list sets X-Frame-Options: DENY, so the widget injects DOM into your page instead. All styling is inline on the elements it creates, so it never touches your stylesheet or Content-Security-Policy for markup.

Install

Paste this where you want the widget to appear:

<div id="x402-widget" data-limit="5"></div>
<script src="https://x402-list.com/assets/x402-widget-1.0.0.js"
        integrity="sha384-kPckH7vneFA+1jFW9TRs1IwB5998fOui2GQlicviB7FenOUVMsXmzncJ6cUEwcex"
        crossorigin="anonymous" defer></script>

That is it. The script finds the host div and renders live services on load.

The snippet pins version 1.0.0 and its integrity hash, so your browser runs the file only if it matches the release byte for byte. Existing embeds of /assets/x402-widget.js keep working: that path is the unversioned alias of the latest release, and it carries no hash because its bytes move with each release.

Options

Configure via data-* attributes on the host <div>:

When a service has a measured on-chain figure, each row also shows its 30-day settlement volume (a conservative undercount). Set data-sort="volume" to rank the shown services by that figure; services without a measured volume sort to the bottom.

You can also mount on any element with a data-x402-widget attribute instead of the #x402-widget id, useful if you embed more than one.

Live demo

This is the widget running with data-limit="5":

Or embed a badge

Prefer a single static trust marker over a live list? Embed the x402-list badge, an SVG that shows your endpoint is in the directory and continuously monitored. Drop it in any README or page.

Live example:

Paste this on your site, replacing your-service with your listing slug:

<a href="https://x402-list.com/services/your-service?utm_source=badge&utm_medium=referral&utm_campaign=embed">
  <img src="https://x402-list.com/badge/your-service.svg" alt="Listed on x402-list" height="28">
</a>

Or, for a README:

[![x402-list](https://x402-list.com/badge/your-service.svg)](https://x402-list.com/services/your-service?utm_source=badge&utm_medium=referral&utm_campaign=embed)

The badge shows the listing state (rolling 30d uptime, cached ~4h). For the uptime we measure, append ?data=uptime (window ?period=24h|7d|30d|90d, default 30d). On a light surface, add ?theme=light.

Static badge, self-hosted

The badge above is fetched from us every time your page loads. If you would rather serve nothing of ours from your page, download the static badge and host it yourself. It is a plain SVG with no live data in it: no request to x402-list, no hotlink, nothing on your page that we can change later.

Static badge: download the SVG

Grab the file:

curl -O https://x402-list.com/assets/x402-listed-badge.svg

Then point the image at your own copy of it:

<a href="https://x402-list.com/services/your-service?utm_source=badge&utm_medium=referral&utm_campaign=embed">
  <img src="/your/path/x402-listed-badge.svg" alt="Listed on x402-list" height="28">
</a>

The trade-off is the point: a file on your server says you are in the directory and nothing else. It does not follow your listing state or your uptime, and it keeps saying the same thing after either one changes. Use the live badge above when you want the mark to track the measurement.