Static Hosting and Website Embedding

Required Files

A typical deployment contains:

/
├── .well-known/
│   └── bar/
│       └── jwks.json
├── a/
│   └── BADGE_ID.json
├── badges/
│   └── BADGE_ID.svg
└── verify.html

verify.html is optional but recommended when you want to provide a verification interface.

Export the Badge SVG

Click Download badge.svg.

The actual filename is generated from the badge ID.

Upload the SVG to the public badges directory.

Example:

https://example.com/badges/BADGE_ID.svg

Export the Public JWKS

Click Download jwks.json.

Upload it to:

/.well-known/bar/jwks.json

The directory name .well-known begins with a period.

Make sure your hosting platform serves files from this directory.

Export the Assertion JSON

Choose the intended status and optional expiry.

Click Download /a/<id>.json.

Upload the file to:

/a/BADGE_ID.json

The URL must match the assertion URL embedded in the signed badge.

Embed Code

BadgeMax Pro generates HTML using an object element with an image fallback.

Example:

<object
  data="https://example.com/badges/BADGE_ID.svg"
  type="image/svg+xml"
  style="display:block;margin:0 auto;border-radius:12px;overflow:hidden;background:transparent">
  <img
    src="https://example.com/badges/BADGE_ID.svg"
    alt="Attested badge">
</object>

Replace the example URL with the actual hosted SVG URL.

The generated embed field provides a similar structure.

Why Use an Object Element?

The object element can display an SVG as a separate document.

This may preserve SVG interactions, including its clickable assertion checkmark and fingerprint hover behavior, depending on browser policies.

An ordinary image element displays the artwork but does not generally expose the SVG's internal interactive elements.

Copy Embed Code

Click Copy beside the Embed code field.

The application attempts to place the generated HTML on the clipboard.

Paste it into your website's HTML.

Generated Embed URL

The implementation derives the badge URL from the assertion URL by replacing:

/a/

with:

/badges/

and:

.json

with:

.svg

This means the generated embed assumes a particular hosting directory structure.

Review the URL before publishing.

MIME Types

Configure your web server to serve the resources with appropriate types.

CORS

When the verification page is hosted on a different origin from the badge or assertion resources, the remote host must allow the required browser requests.

The verifier fetches:

• Badge SVG
• Public JWKS
• Assertion JSON

HTTPS

Use HTTPS for public deployment.

HTTPS helps protect against network modification of downloaded badge and verification resources.

It also supports the secure-context requirements of Web Crypto.

Remote Logos

If the badge references a remote logo URL, the image may require a separate network request when displayed.

For a more self-contained SVG, use an embedded Data URL or monogram.

Content Security Policy

A restrictive Content Security Policy may affect:

• Inline scripts in verify.html
• SVG object embedding
• Remote logo images
• Data URL images
• Cross-origin verification fetches

Configure CSP deliberately rather than disabling security protections indiscriminately.

Deployment Checklist

• Generate or import the intended signing key.
• Set the correct assertion URL.
• Generate the badge.
• Download the SVG.
• Download the public JWKS.
• Download the assertion JSON.
• Publish all three files.
• Confirm each URL loads.
• Check CORS where required.
• Run the built-in verification.
• Test the standalone verification page.
• Embed the SVG on the destination website.
• Keep the private key securely backed up.

Updating a Badge

Changing artwork requires regenerating the badge and its signed attestation.

Changing the published status requires replacing the assertion JSON.

Rotating signing keys requires updating the JWKS and managing compatibility with existing badges.

Note: The exported HTML snippet is generated from the configured assertion URL. It does not automatically upload or publish any files.