integration.mdx

title	sidebarTitle
Integrating Roundtable Proof-of-Human	Integrating Roundtable

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 Roundtable Proof-of-Human stores in sessionStorage under rtSessionId. 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 = sessionStorage.getItem('rtSessionId');
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. Roundtable does not use any cookies or local storage.

Next steps

• Visit your Account to access your public API key.
• Learn about Accessing Session Data to retrieve risk scores and session data.
• Learn how to Integrate the Roundtable badge on your site