Framework examples

HTML

<script src="https://humanproof.eu/widget.js" defer></script>\n<human-proof data-api-endpoint="https://humanproof.eu/api/captcha/site_your_public_key"></human-proof>

Next.js

import Script from 'next/script';

export default function Form() {
  return (
    <form action="/api/contact" method="POST">
      <Script src="https://humanproof.eu/widget.js" strategy="afterInteractive" />
      <human-proof data-api-endpoint="https://humanproof.eu/api/captcha/site_your_public_key" />
      <button type="submit">Send</button>
    </form>
  );
}

React

useEffect(() => {
  const script = document.createElement('script');
  script.src = 'https://humanproof.eu/widget.js';
  script.defer = true;
  document.head.appendChild(script);
}, []);

Vue

onMounted(() => {
  const script = document.createElement('script');
  script.src = 'https://humanproof.eu/widget.js';
  script.defer = true;
  document.head.appendChild(script);
});

Alpine.js

<form x-data="{ solved: false }">
  <human-proof
    data-api-endpoint="https://humanproof.eu/api/captcha/site_your_public_key"
    x-on:solve="solved = true"
    x-on:expired="solved = false"
  ></human-proof>
  <button :disabled="! solved">Send</button>
</form>