JavaScript

Script tag

<script src="https://imnotahuman.ai/widget.js"
        data-site-key="site_live_exampleweb2ab3cd4ef5gh6j"
        data-theme="auto"
        data-action="checkout"
        data-intent="purchase"></script>

When the page contains no explicit container, the widget inserts a <div class="imnotahuman"> directly after the script tag and copies the script's data-* attributes onto it. To place it yourself, add one or more containers; the script mounts into every .imnotahuman[data-site-key] or [data-imnotahuman-widget] element instead.

<div class="imnotahuman" data-site-key="site_live_exampleweb2ab3cd4ef5gh6j" data-action="login"></div>
<script src="https://imnotahuman.ai/widget.js" async></script>

Programmatic mount

const widget = window.imnotahuman.render("#agent-check", {
  siteKey: "site_live_exampleweb2ab3cd4ef5gh6j",
  action: "checkout",
  theme: "dark",
  ttl: 180,
});

widget.onVerified((result) => {
  console.log(result.agent_name, result.token);
});

render(container, options) accepts an element or a selector and returns the widget instance. Options mirror the data attributes: siteKey, theme, action, intent, ttl, api. Attributes already on the container are used as defaults.

window.imnotahuman

Callbacks can be registered before the script loads using a queue, which the widget drains on initialisation:

<script>
  window.imnotahuman = { q: [["onVerified", function (r) { console.log(r.agent_id); }]] };
</script>
<script src="https://imnotahuman.ai/widget.js" data-site-key="site_live_exampleweb2ab3cd4ef5gh6j" async></script>

Statuses

The widget's status (also mirrored on the host element as data-status) is one of:

Forms and the hidden input

Every widget appends <input type="hidden" name="imnotahuman-token"> to its host element. Place the host inside a <form> and the token is submitted with the other fields once verified (the value is empty until then). Verify it on your server before acting on it; see Server verification.

The host also carries a <script type="application/json" data-imnotahuman-challenge> element containing the current challenge document, plus data-challenge-id and data-challenge-url attributes. Agents driving a browser can read these to discover the challenge without parsing the UI.

Test mode

Use the site_test_… key on staging and localhost. The widget shows a Test mode badge and, while PENDING, a Simulate agent button. The host element gets data-mode="test". The subtitle stays "waiting for proof" until the server reports VERIFIED. The badge is not itself a success.

<script src="https://imnotahuman.ai/widget.js"
        data-site-key="site_test_exampleweb2ab3cd4ef5gh6j"
        data-action="checkout"></script>
<script>
  imnotahuman.onChange(function (event) {
    // LOADING | PENDING | VERIFIED | REJECTED | EXPIRED | ERROR
    if (event.status === "ERROR") console.error(event.error);
    // SITE_KEY_INVALID, ORIGIN_UNAUTHORIZED, RATE_LIMITED, SERVICE_UNAVAILABLE, …
  });
  imnotahuman.onVerified(function (result) {
    // result.mode === "test" — reject this token in production unless allow_test
  });
</script>

Simulate agent calls POST /api/v1/challenges/:id/simulate. A failed simulation stays PENDING and shows the error code; it does not flip the widget to VERIFIED.

curl -X POST https://imnotahuman.ai/api/v1/tokens/verify \
  -H 'content-type: application/json' \
  -d '{"token":"<imnotahuman-token>","site_key":"site_test_exampleweb2ab3cd4ef5gh6j","consume":true,"allow_test":true}'

Content Security Policy

Allow script-src https://imnotahuman.ai and connect-src https://imnotahuman.ai. Set data-api="https://imnotahuman.ai" so the widget calls the first-party API at https://imnotahuman.ai/api/v1. The widget injects one <style> element inside its shadow root, so a strict style-src needs 'unsafe-inline' (or an equivalent hash) for it to render.