📖Overview⚡Quick Start🔌Integration🔧API Reference🎫Badge & Embed

Badge & Embed Guide

Add visual verification proof to your website

What's a Verification Badge?

After a user completes the Pulse verification, they receive a unique session ID that can be embedded as a visual badge anywhere on the web. The badge displays their keystroke pattern as an animated bar graph — a unique visual fingerprint that proves they've been verified as human.

Think of it like a GitHub contribution graph, but for human verification. It's embeddable, shareable, and cryptographically backed.

How It Works

1

1. User Verifies

User completes the Pulse verification flow (types naturally, finalize button)

2

2. Receive Session ID

Upon finalization, user gets a certificate URL with their unique session ID

3

3. Generate Badge URL

Session ID maps to a deterministic visual fingerprint at /badge/[sessionId]

4

4. Embed Anywhere

Users embed the badge iframe on blogs, profiles, or forum posts

5

5. Proof of Humanity

Visitors see verified human status + can click through to full certificate

Embed Code

After finalization, users receive this embed code:

<iframe 
  src="https://pulse.bp.la/badge/[SESSION_ID]" 
  width="200" 
  height="280" 
  frameborder="0" 
  style="border: none; border-radius: 8px;">
</iframe>

Replace [SESSION_ID] with the actual session ID from the finalization result

Display Sizes

Small Badge

150px × 200px

Comments, signatures

width="150" height="200"

Medium Badge

200px × 280px

Profile sidebars (default)

width="200" height="280"

Large Badge

300px × 420px

Landing pages, portfolios

width="300" height="420"

Customization

CSS Styling

Style the iframe container with CSS:

<!-- Custom container styles --> <div style="display: flex; justify-content: center; align-items: center;"> <iframe src="..." style="border-radius: 12px; box-shadow: 0 8px 16px rgba(0,0,0,0.2);"></iframe> </div>

Caption Below Badge

<!-- Add context --> <div> <iframe src="..." width="200" height="280" frameborder="0"></iframe> <p style="text-align: center; font-size: 12px; color: #999; margin-top: 8px;"> ✓ Verified Human • Pulse Badge </p> </div>

Use Cases

💬

Reddit/Forum Profiles

Show badge next to username

📝

Blog Author Byline

Verify author is human

🐙

GitHub Profile

Human contributor badge

👤

Personal Website

About page verification

✍️

Medium/Substack

Author verification badge

🎫

Event Registration

Attendee verification

Live Example

Complete the live demo to get your verification badge:

Try the Live Demo

Security & Verification

  • ✓Each badge maps to a cryptographically signed C2PA certificate
  • ✓Session IDs are UUIDs — statistically impossible to brute-force
  • ✓Badges are deterministic — same session always shows same pattern
  • ✓Certificates include timestamp to prevent replay attacks
  • ✓Badge page shows full certificate data for verification
  • ✓All data is signed with edge secrets for authenticity

Troubleshooting

❓ Badge shows loading forever

✓ Check if JavaScript is enabled. Badge page requires client-side rendering.

❓ Session ID is not available after finalize

✓ Ensure finalize() completed successfully. Check browser console for errors.

❓ Embedded badge looks stretched

✓ Use recommended dimensions: 200px × 280px for optimal appearance