Plain HTML

Set up

1. Get your client id (it starts with tnt_) from Magic Setup in the dashboard at capchacloud.com/app. Your site origin must be allowlisted there, or the widget will not boot.
2. Give your form a stable id. Paste the wrap snippet anywhere on the same page (after the form is easiest).
3. The widget finds the form when it starts, adds the consent checkboxes under it, and records the capture when the visitor submits. Your form always still submits.
4. Prefer code? The SDK snippet loads the widget and tells you when a capture succeeded.

Snippets

Wrap your formwrap

<script src="https://capchacloud.com/v1/widget.js" async></script>
<capcha-auth
  data-capcha-client-id="YOUR_CLIENT_ID"
  data-capcha-wrap="#contact-form"
  data-capcha-company="Your Company Name"
  data-capcha-privacy-url="https://example.com/privacy"
  data-capcha-terms-url="https://example.com/terms"
  data-capcha-campaign-id="website"
  data-capcha-form-id="contact"></capcha-auth>

Browser SDK: load, mount and listenlatebind

<form id="contact-form" action="/thanks" method="post">
  <input name="name" type="text" autocomplete="name">
  <input name="email" type="email" autocomplete="email">
  <input name="phone" type="tel" autocomplete="tel">
  <button type="submit">Send</button>
</form>
<script src="https://capchacloud.com/integrations/capchacloud-browser.js"></script>
<script>
  var cc = CapchaCloudBrowser.init({ clientId: "YOUR_CLIENT_ID" });
  cc.on("capture:success", function (e) { console.log("evidence recorded:", e.certificate_id); });
  cc.on("widget:error", function (e) { console.warn("capture widget problem:", e.message); });
  cc.load().then(function () {
    cc.mount(null, { wrap: "#contact-form", company: "Your Company Name", privacyUrl: "https://example.com/privacy", termsUrl: "https://example.com/terms", campaignId: "website", formId: "contact" });
  });
</script>