Invisible Puzzle CAPTCHA - Implicit Rendering

This example demonstrates how to use Procaptcha in invisible Puzzle mode with implicit rendering directly on a button. The puzzle overlay appears when the button is clicked.

Example Form

CAPTCHA Status Log

How Invisible Puzzle CAPTCHA Works (Implicit Rendering)

Implementation Details

This example demonstrates how to use Procaptcha in puzzle mode with implicit rendering:

  1. Import the Procaptcha script
  2. Add a div with the procaptcha class
  3. Set data-* attributes to configure the CAPTCHA
  4. Handle the verification result in the callback function

Key Code Example

<div
    class="procaptcha"
    data-theme="light"
    data-sitekey="%PROSOPO_SITE_KEY_PUZZLE%"
    data-failed-callback="onCaptchaFailed"
    data-callback="onCaptchaVerified"
    data-size="invisible"
></div>

Execution Flow

  1. On page load, Procaptcha scans for elements with the procaptcha class
  2. A drag-to-target puzzle challenge is presented to the user
  3. When the user completes the puzzle, the callback function is called
  4. On successful verification, the form can be submitted with the token