Integrating Proof of Human

This guide shows how to integrate Proof of Human’s bot detection suite into any web app.

Quick start

<script
  src="https://cdn.poh.org/v1/rt.js"
  data-site-key="YOUR_SITE_KEY"
  data-user-id="OPTIONAL_USER_ID"
  data-tags="OPTIONAL_TAG"
  >
</script>

<!-- 2 ‑ (optionally) set / update the UID when the tracker is ready (skip if you used data-user-id) -->
<script>
  const setUid = () => window.setRoundtableUserId?.('USER_ID');  // Only runs if script is ready
  setUid(); // Try right away
  window.addEventListener('roundtable:ready', setUid, { once:true }); // Try again once if event fires
</script>

The Proof of Human tracker dispatches a roundtable:ready event on window as soon as it is done loading. Block 2 listens for that completion event so you can safely call window.setRoundtableUserId once the tracker is loaded.

Script‑tag attributes

The tracker recognizes three data‑attributes that let you tailor the tracker’s behavior:

data-site-key (required) – Your workspace’s site key (find it in the Dashboard).
data-user-id (optional) – A stable identifier for a logged‑in user to track them over multiple sessions (a hashed value is fine).
data-tags (optional) – A comma-separated list of tags that will be associated with this session. Tags help you group and organize sessions.

React / SPA example

The Proof of Human tracker exposes two functions to manually set extra tracking information. These are useful in React or single-page apps.

window.setRoundtableUserId(uid);
window.setRoundtableTags(["my_tag_1", "my_tag_2"]);

First, add the Proof of Human tracking script in public/index.html:

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

Then wire the user ID in React:

// useRoundtableUid.tsx
import { useEffect } from 'react';

export const useRoundtableUid = (uid?: string) => {
  useEffect(() => {
    if (!uid) return;

    const send = () => {
      if (window.setRoundtableUserId) {
        window.setRoundtableUserId(uid);
        return true;             // tracker ready
      }
      return false;              // not yet
    };

    if (send()) return;          // ran instantly
    window.addEventListener('roundtable:ready', send, { once: true });
    return () => window.removeEventListener('roundtable:ready', send);
  }, [uid]);
};

Call the hook in your auth/provider component; it runs every time currentUser changes, so it sets the UID immediately on page‑refresh and again right after a fresh login.

const { currentUser } = useAuth();
useRoundtableUid(currentUser?.uid);

Using the Session ID

Every page‑view (or SPA session) gets a unique session ID that can be retrieved with window.getRoundtableSessionId(). You can reference this ID to pull risk scores and data from the session in your back end.

// Access the session ID anywhere in the front end
const sessionId = window.getRoundtableSessionId();
console.log('Roundtable session:', sessionId);

Because the session ID is stored in sessionStorage, the value is scoped to the current tab and cleared automatically when the tab is closed.

Next steps

Visit your Account to access your data site key.
Learn about Accessing Session Data to retrieve risk scores and session data.
Learn how to Integrate the Proof of Human badge on your site

Getting Started

Set up

Guides

Developer Resources

Support Center

Integrating Proof of Human

Quick start

Script‑tag attributes

React / SPA example

Using the Session ID

Next steps

​Quick start

​Script‑tag attributes

​React / SPA example

​Using the Session ID

​Next steps

Quick start

Script‑tag attributes

React / SPA example

Using the Session ID

Next steps