> ## Documentation Index
> Fetch the complete documentation index at: https://docs.roundtable.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Integrating Roundtable Proof-of-Human

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

## Quick start

```html theme={null}
<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](https://accounts.roundtable.ai)).
* `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.

```ts theme={null}
window.setRoundtableUserId(uid);
window.setRoundtableTags(["my_tag_1", "my_tag_2"]);
```

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

```html theme={null}
<script
  src="https://cdn.roundtable.ai/v1/rt.js"
  data-site-key="YOUR_SITE_KEY">
</script>
```

Then wire the user ID in React:

```ts theme={null}
// 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.

```tsx theme={null}
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.

```js theme={null}
// 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](https://accounts.roundtable.ai/account) to access your public API key.
* Learn about [Accessing Session Data](accessing-session-data) to retrieve risk scores and session data.
* Learn how to [Integrate the Roundtable badge](badge) on your site