Badge & Widget

Show visitors that your file is cryptographically signed. Drop a snippet on any page; the widget fetches the badge summary for your hash and renders a card, a badge pill, or a minimal text link.

No build step. No framework requirements. No dependencies. About 6 KB, served as plain (unminified) JavaScript.

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. When the script runs, it finds every [data-flowsta-hash] element on the page, shows "Checking signature..." in it, fetches GET /badge?format=json for the hash, and replaces the placeholder with the rendered markup. It runs once; elements added to the page later are not picked up.

Attributes

Attribute	Values	Default	Notes
data-flowsta-hash	64-char hex SHA-256	-	Required. Anything that is not 64 characters renders "Invalid file hash".
data-flowsta-style	card, badge, minimal	card	See examples below. Unknown values fall back to card.
data-flowsta-theme	light, dark	light	Only the card style reads it. There is no system-theme detection.
data-flowsta-api	API base URL	https://auth-api.flowsta.com	Override for self-hosted deployments.

Styles

Card (default)

A bordered card (max width 360 px, system font) with:

• a status dot (green when signed, gray when not) and the heading Signed with Flowsta or Not signed
• for a signed file, one muted line built from the badge summary: the signature count, then the license, the AI training policy and the intent of the first active signature when they are declared - for example 1 signature · CC BY-NC · No AI · Authorship
• a Verify on Flowsta → link to the verification page

The card does not show the signer's name, picture or the signing time - the badge summary it renders from does not carry them. For per-signer detail, render the Verification API yourself.

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

Best for landing pages, portfolio items, release notes.

Badge

A compact two-segment pill, shields style: a gray Flowsta segment and a colored status segment reading Signed (green, followed by · <license> when one is declared, e.g. Signed · CC BY) or Not signed (gray). The whole pill links to the verification page. There is no signer name and no tooltip.

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

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

Minimal

A plain text link: ✓ Signed in green, or Not signed in gray. For density-constrained UI.

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

Theming

data-flowsta-theme="light|dark" switches the card's background, border and text colors. The badge and minimal styles use fixed colors and ignore the attribute. The widget does not read prefers-color-scheme; pick the theme that matches your page.

Styling is applied as inline styles on ordinary elements (no shadow DOM), so your site's CSS can restyle the widget - useful when you want to adjust it, and worth knowing if a global rule for links or divs touches it.

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. For a signed file the right-hand text is signed (one active signature) or N signatures, followed by the license and AI training policy of the first active signature when declared (e.g. signed · CC BY-NC · No AI). Unsigned hashes render not signed; a malformed hash renders invalid hash; a lookup failure renders error. format=svg is the default.

<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 | object | null	License from the first active signature, in raw enum form (CCBYNC, AllRightsReserved, ...). A custom license is an object: { "Custom": "..." }
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

A malformed hash returns 400 { "error": "invalid_hash" } in JSON format.

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

The widget renders the [data-flowsta-hash] elements that exist when the script runs, once. In a React app, mount the badge elements first and load the script after them - the component below does that for the badges present on first render. Badges mounted later (a new route, a list that grows) are not rendered; for those, fetch the JSON badge yourself and render it in your component.

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