Client integration
Render the widget deliberately
Choose implicit or explicit rendering and place the widget where it matches the protected action and page lifecycle.
8 minute lesson
Implicit rendering finds configured elements when the Turnstile script loads. Explicit rendering lets application code decide when and where the widget appears.
Use explicit rendering for modals, single-page navigation, conditional forms, or repeated components. Load the official script from its documented URL and do not proxy or cache it yourself. Keep one widget lifecycle per rendered container.
Render a contact-form widget, navigate away and back, and confirm no duplicate widgets or stale tokens remain.
Keep the site key in the page and the secret on the server:
<div
class="cf-turnstile"
data-sitekey="YOUR_SITE_KEY"
></div>Load the official script using the documented mode, then submit the generated token with the form. Test keyboard navigation, expiration, and a blocked script. The widget is one input to the server decision; it is not proof that the requested business action is authorized.
Lesson completed