Using the Proof of Human badge

Proof of Human’s verification badge is a small, drop-in widget that shows whether Proof of Human is running. It auto-renders wherever you place <div class="roundtable-badge">, listens to your tracker’s events, and gracefully handles SPAs and back-navigation. Note that the badge does not display any results related to risk score. Instead, it determines success or failure based on whether the Proof of Human tracking is working correctly.

Quick start

We recommend adding the tracker and the badge script on the same page, with the badge script after the tracking script:

<!-- Core tracker -->
<script
  src="https://cdn.poh.org/v1/rt.js"
  data-site-key="YOUR_SITE_KEY"
></script>

<!-- Badge -->
<div class="roundtable-badge"></div>
<script src="https://cdn.poh.org/v1/badge.js"></script>

After importing the badge script, the badge can be added anywhere by adding a div with the class roundtable-badge:

<div class="roundtable-badge"></div>

Styling

The badge renders inside a Shadow DOM, so your site’s CSS won’t break it (and vice-versa). By default, the badge is collapsed to show just the logo. On hover (or tap, on touch devices), it expands its width to reveal the “Proof of Human” text and links. The badge uses a dark theme by default. For light backgrounds, add data-theme="light":

<div class="roundtable-badge" data-theme="light"></div>

State

At any given time, the badge is in one of three states:

Loading: shows a spinner and an animating progress bar while the tracker initializes and verifies Proof of Human is running.
Pass: displays a check icon. This indicates that Proof of Human is running and gathering user data.
Fail: displays an X icon in red. This indicates that Proof of Human is not running.

Getting Started

Set up

Guides

Developer Resources

Support Center

Using the Proof of Human badge

Quick start

Styling

State

​Quick start

​Styling

​State

Quick start

Styling

State