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, meaning it won't interfere with your design process. It displays a clean placeholder during editing and only activates once your site is published. It is built to be 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, published sites.
Full Visual Control: Match your brand perfectly by choosing between Light, Dark, or Auto themes and Normal or Compact sizes.
Programmatic Control: Includes a built-in reset() function via the onReady callback, making form resubmissions and multi-step flows a breeze.
Developer Friendly: Automatically manages token states and provides onVerify, onError, and onReady props for advanced custom integrations.
Smart Error Handling: Detects and reports specific issues like invalid site keys, network failures, or domain mismatches to help you troubleshoot instantly.
Accessibility Compliant: Fully supports ARIA roles, keyboard navigation, and screen readers right out of the box.
Optimized Performance: Lightweight and SSR-safe, using proper React lifecycle cleanup to ensure no memory leaks or unnecessary script bloating.
Note: To function, this component loads necessary scripts from Cloudflare’s secure CDN.
Frame Blocks
