Browser setup

<!-- 1. Load the script once, with your public key -->
<script src="https://bot403.com/v1/bot403.js" data-bot403-key="pk_live_YOUR_PUBLIC_KEY" async></script>

<!-- 2. Keep your form as it is. Every form on the page is protected -->
<form action="/contact" method="POST">
  <input type="email" name="email" required>
  <textarea name="message" required></textarea>
  <button type="submit">Send</button>
</form>

<!-- 3. On your server, post the _bot403 field to /api/v1/verify. See the server tabs. -->

// npm install @bot403/browser, or load the script tag and call Bot403.solve()
import { solve, FIELD } from "@bot403/browser";

// 1. Get a token. The proof of work runs in a Web Worker
const token = await solve("pk_live_YOUR_PUBLIC_KEY");

// 2. Send the token with your data. Your server posts it to /api/v1/verify
await fetch("/contact", {
  method: "POST",
  body: new URLSearchParams({ email: "[email protected]", message: "Hello", [FIELD]: token }),
});

// npm install @bot403/react
import { useBot403, FIELD } from "@bot403/react";

export function ContactForm() {
  // 1. Loads the script on mount; getToken() returns a fresh single-use token
  const getToken = useBot403("pk_live_YOUR_PUBLIC_KEY");
  async function onSubmit(e) {
    e.preventDefault();
    const body = new URLSearchParams(new FormData(e.currentTarget));
    // 2. Add the token before you post the form to your server
    body.set(FIELD, await getToken());
    await fetch("/contact", { method: "POST", body });
  }
  return (
    <form onSubmit={onSubmit}>
      <input name="email" type="email" required />
      <textarea name="message" required />
      <button>Send</button>
    </form>
  );
}