Badge & Widget

Show visitors that your file is cryptographically signed. Drop a snippet on any page; the widget fetches verification data and renders a card, badge, or minimal indicator.

No build step. No framework requirements. No dependencies. ~3 KB minified.

Quick Start

<div data-flowsta-hash="abc123..."></div>
<script src="https://flowsta.com/sign-it/widget.js" async></script>

Replace abc123... with the SHA-256 hash of your file. On page load, the script finds every [data-flowsta-hash] element and renders verification UI into it.

Attributes

Attribute	Values	Default	Notes
data-flowsta-hash	64-char hex SHA-256	-	Required.
data-flowsta-style	card, badge, minimal	card	See examples below.
data-flowsta-theme	light, dark	light	Auto-detects prefers-color-scheme if unset.
data-flowsta-api	API base URL	https://auth-api.flowsta.com	Override for self-hosted deployments.

Styles

Card (default)

Full card with signer name/avatar, timestamp, content-rights badges, and a "Verify on Flowsta" link.

<div data-flowsta-hash="abc123..." data-flowsta-style="card"></div>

Best for landing pages, portfolio items, release notes.

Badge

Compact inline pill: "✓ Signed · by Alice" with a hover tooltip of content rights.

<div data-flowsta-hash="abc123..." data-flowsta-style="badge"></div>

Best for blog posts, file download pages, image captions.

Minimal

Just a small colored dot + "Signed" / "Unsigned" status. For density-constrained UI.

<div data-flowsta-hash="abc123..." data-flowsta-style="minimal"></div>

Theming

All three styles respect data-flowsta-theme="light|dark". Omit the attribute to follow the user's system theme via prefers-color-scheme.

Styling lives in shadow DOM, so your site's CSS cannot affect it, and the widget's CSS cannot affect your site.

Content Security Policy

If your site has a strict CSP, allow:

script-src https://flowsta.com
connect-src https://auth-api.flowsta.com

Multiple Badges

The widget handles an unlimited number of hashes on the same page. Each [data-flowsta-hash] element is rendered independently.

<!-- Each image gets its own badge -->
<figure>
  <img src="photo1.jpg" />
  <div data-flowsta-hash="<sha256 of photo1.jpg>" data-flowsta-style="badge"></div>
</figure>
<figure>
  <img src="photo2.jpg" />
  <div data-flowsta-hash="<sha256 of photo2.jpg>" data-flowsta-style="badge"></div>
</figure>

Custom Rendering - Badge API

For full control over layout, skip the widget and call the badge endpoint directly.

SVG

GET https://auth-api.flowsta.com/api/v1/sign-it/badge?hash=<sha256>&format=svg

Returns a shields.io-style SVG image you can embed directly. It shows the signature count plus the license and AI training policy from the first active signature (e.g. signed · CC BY-NC · No AI), or not signed for unsigned hashes.

<img src="https://auth-api.flowsta.com/api/v1/sign-it/badge?hash=abc123..." alt="Signed with Flowsta" />

JSON

GET https://auth-api.flowsta.com/api/v1/sign-it/badge?hash=<sha256>&format=json

Response:

{
  "signed": true,
  "active_signatures": 1,
  "revoked_signatures": 0,
  "license": "CCBYNC",
  "ai_training": "NotAllowed",
  "intent": "Authorship",
  "verify_url": "https://flowsta.com/sign-it/?hash=abc123..."
}

Field	Type	Description
signed	boolean	true if the file has at least one active (non-revoked) signature
active_signatures	number	Count of active signatures
revoked_signatures	number	Count of revoked signatures
license	string | null	License from the first active signature, in raw enum form (CCBYNC, AllRightsReserved, ...)
ai_training	string | null	AI training policy from the first active signature (NotAllowed, Allowed, ...)
intent	string | null	Intent of the first active signature (e.g. Authorship)
verify_url	string	Link to the verification page for this hash

This endpoint is a compact summary for badges. For per-signer details, use the Verification API; for aggregated rights across all signers, use Content Rights.

Render it however you like - React, server-side, static site generator, anything.

Rate Limit & Cache

60 requests/minute per IP. Both SVG and JSON responses include Cache-Control: public, max-age=300 (5 minutes) - safe for CDN edge caching.

Getting Your File's Hash

Use any SHA-256 tool, or via the SDK:

import { hashFile } from '@flowsta/auth';
const hash = await hashFile(file);  // "abc123..."

Or in the terminal:

# macOS / Linux
shasum -a 256 yourfile.jpg

# Windows
certutil -hashfile yourfile.jpg SHA256

Examples

WordPress / Blog Post

Paste this inside any post:

<div data-flowsta-hash="abc123..." data-flowsta-style="card"></div>
<script src="https://flowsta.com/sign-it/widget.js" async></script>

The <script> only needs to load once per page - add it to your theme if you use multiple badges.

React

import { useEffect } from 'react';

export function FlowstaBadge({ hash, style = 'card' }: { hash: string; style?: string }) {
  useEffect(() => {
    if (!document.querySelector('script[src*="flowsta.com/sign-it/widget.js"]')) {
      const s = document.createElement('script');
      s.src = 'https://flowsta.com/sign-it/widget.js';
      s.async = true;
      document.head.appendChild(s);
    }
  }, []);
  return <div data-flowsta-hash={hash} data-flowsta-style={style} />;
}

Static Site (Hugo, 11ty, Astro, etc.)

Use the SVG endpoint so there's no JavaScript:

<a href="https://flowsta.com/sign-it/?hash={{ .Hash }}">
  <img src="https://auth-api.flowsta.com/api/v1/sign-it/badge?hash={{ .Hash }}" alt="Signed with Flowsta" />
</a>

See Also

• Verification API - full signature details, not just badge data
• Content Rights - machine-readable rights for each signed file
• Developer Guide - sign files from your own app