Skip to main content
This guide shows how to integrate Roundtable Proof-of-Human’s bot detection suite into any web app.

​
Quick start

<script
  src="https://cdn.roundtable.ai/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
</script>
The Roundtable Proof-of-Human tracker dispatches a roundtable:ready event on window as soon as it is done loading. Block 2 listens for that event so you can safely call window.setRoundtableUserId once the script is loaded.

​
Script‑tag attributes

The tracker recognizes three data‑attributes that let you tailor its 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 Roundtable 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 Roundtable Proof-of-Human tracking script in public/index.html: 
<script
  src="https://cdn.roundtable.ai/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