Keep your site secure and your UX clean. This component handles the heavy lifting of script loading and token management so you don't have to code. Simply drop it into any Framer form, paste your Site Key, and you're protected.

Unlike traditional verification methods, this component is Canvas-safe — it displays a clean placeholder during editing and only activates once your site is published. It's self-contained, communicating through smart callbacks to ensure it never breaks your existing form logic.

Key Features: • Easy Setup — Works seamlessly with Framer's native form elements. Just drop it in and go. • Canvas-Safe Design — Shows a static placeholder in the Framer Canvas; only initializes on live sites. • Full Visual Control — Choose between Light, Dark, or Auto themes and Normal or Compact sizes. • Programmatic Control — Built-in reset() function via onReady callback for form resubmissions and multi-step flows. • Developer Friendly — Manages token states automatically with onVerify, onError, and onReady props. • Smart Error Handling — Detects invalid site keys, network failures, or domain mismatches instantly. • Accessibility Compliant — Supports ARIA roles, keyboard navigation, and screen readers out of the box. • Optimized Performance — Lightweight and SSR-safe with proper React lifecycle cleanup.

Note: This component loads necessary scripts from Cloudflare's secure CDN.