WidgetsTrust badge

One script. One score. Anywhere your name appears.

A 3-kilobyte script reads a Peerseal Trust Score and renders a compact badge — display name, score, link back to the canonical profile. No SDK to install, no API key to provision. Three lines of HTML and the badge shows up next to a byline.

Inspect the script ↗How the score works

01 · Live preview

What a third-party page sees after pasting the snippet.

The card below is rendered against the same /api/users/<handle>resolver a consumer’s script reads — no key required for this read because the handle is the auth surface. What you see here is the same DOM the third-party page would paint.

Live preview
Served live against the seeded demo author. Mounts into a scoped DOM with the exact stylesheet the served script ships.

live · /api/users/demo0001

DOM below matches what mount() builds in the served bundle.

mount div ↓

scoring…

02 · Drop-in examples

Three formats. Same badge.

The HTML block is what most pages need. The React snippet shows the same script loaded as a component. The WordPress shortcode wraps it for any classic editor. Copy whichever fits your stack.

embed.html
<!-- Mount point: where the badge renders -->
<div data-peerseal-handle="demo0001"></div>

<!-- Script: idempotent — multiple mount divs each get their own badge -->
<script src="https://getpeerseal.com/embed/badge/demo0001.js"></script>
PeersealBadge.tsx
import { useEffect } from "react";

const SCRIPT_SRC = "https://getpeerseal.com/embed/badge/demo0001.js";

function loadRuntime() {
  if (document.querySelector('script[data-peerseal-runtime]')) return;
  const s = document.createElement("script");
  s.src = SCRIPT_SRC;
  s.dataset.peersealRuntime = "1";
  document.body.appendChild(s);
}

export function PeersealBadge({ handle, className }) {
  useEffect(loadRuntime, []);
  return (
    <div data-peerseal-handle={handle} className={className} />
  );
}

// Use: <PeersealBadge handle="demo0001" />
functions.php
// In your theme's functions.php:
add_shortcode("peerseal", function ($atts) {
  $atts = shortcode_atts(["handle" => ""], $atts);
  if (!$atts["handle"]) return "";
  static $loaded = false;
  $src = esc_url("https://getpeerseal.com/embed/badge/" . rawurlencode($atts["handle"]) . ".js");
  $inline = !$loaded ? '<script src="' . $src . '"></script>' : "";
  $loaded = true;
  return '<div data-peerseal-handle="' . esc_attr($atts["handle"]) . '"></div>' . $inline;
});

// Usage in a post or page: [peerseal handle="demo0001"]

03 · Integration guide

From snippet to paint.

The widget is intentionally narrow: a mount div, a script tag, and an absolute URL the script reads. No SDK to vendor, no key to provision. Steps below are idempotent.

  1. 01

    Add a mount div

    Place <div data-peerseal-handle="demo0001"></div> next to the byline / listing title. The widget injects the badge in this div, so put it where you want it to appear.

  2. 02

    Include the script once

    Add <script src="https://getpeerseal.com/embed/badge/demo0001.js"></script> once per page. The script is idempotent: every data-peerseal-handle div on the page gets its own badge.

  3. 03

    Allow the script in your CSP

    The script is a classic load (no inline JS), so script-src https://getpeerseal.com is enough. If your CSP additionally blocks inline <style> injection, allow style-src 'unsafe-inline' or a nonce — the widget injects one scoped stylesheet into document.head on first mount.

  4. 04

    Handle the “Not verified” pill

    If the handle is unknown (or the API errors), the badge degrades to a muted “Not verified on Peerseal” pill linking to the same profile URL. No thrown errors, no flash of empty content.