Client-side render

You can initialize and customize the Turnstile widget on your web page via implicit or explicit rendering.

​​ Implicitly render the Turnstile widget

The HTML is scanned for elements that have a cf-turnstile class name:

<div class="cf-turnstile" data-sitekey="yourSitekey" data-callback="javascriptCallback"></div>

Once a challenge has been solved, a token is passed to the success callback. This token must be validated against our siteverify endpoint. A token can only be validated once and cannot be consumed twice.

To configure the challenge, refer to Configurations containing data attributes and render parameters.

Check out the demo Open external link and its source code Open external link .

​​ Protect forms

Turnstile is often used to protect forms on websites such as login forms, contact forms, and more. After inserting the JavaScript script tag, customers can embed <div class="cf-turnstile"></div> into their site to protect their forms.

For example:

<form action="/login" method="POST">
   <input type="text" placeholder="username"/>
   <input type="password" placeholder="password"/>
   <div class="cf-turnstile" data-sitekey="<YOUR_SITE_KEY>"></div> 
   <button type="submit" value="Submit">Log in</button>
</form>

An invisible input with the name cf-turnstile-response is added and will be sent to the server with the other fields.

​​ Disable implicit rendering

You can disable implicit rendering by replacing the script from:

https://challenges.cloudflare.com/turnstile/v0/api.js

To:

https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit

When using this option, HTML elements with the cf-turnstile class will not show a challenge. The turnstile.render function must be invoked using the following steps.

​​ Explicitly render the Turnstile widget

1. Insert the JavaScript tag:

<script src="https://challenges.cloudflare.com/turnstile/v0/api.js?onload=onloadTurnstileCallback" async defer></script>
<!-- OR and then call turnstile.ready(onloadTurnstileCallback) -->
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js"></script>

2. Once the script is embedded, you will have access to a global function with multiple callback options you can customize. For the following function to work properly, the page must contain an HTML element with ID example-container.
   The challenge can be invoked explicitly with the following JavaScript snippet:

window.onloadTurnstileCallback = function () {
    turnstile.render('#example-container', {
        sitekey: '<YOUR_SITE_KEY>',
        callback: function(token) {
            console.log(`Challenge Success ${token}`);
        },
    });
};

// if using synchronous loading, will be called once the DOM is ready
turnstile.ready(onloadTurnstileCallback);

Turnstile can be programmatically loaded by invoking the turnstile.render() function in the global window object.

The turnstile.render: function (container: string | HTMLElement, params: RenderParameters) render takes an argument to a HTML widget.

If the invocation is successful, the function returns a widgetId (string). If the invocation is unsuccessful, the function returns undefined.

Check out the demo Open external link and its source code Open external link .

​​ Access a widget’s state

In addition to the render() function, Turnstile supports obtaining the widget’s response from a widgetId via the turnstile.getResponse(widgetId: string) function.

​​ Reset a widget

If a given widget has timed out, expired or needs to be reloaded, you can use the turnstile.reset(widgetId: string) function to reset the widget.

​​ Remove a widget

Once a widget is no longer needed, it can be removed from the page using turnstile.remove(widgetId: string). This will not call any callback and will remove all related DOM elements.

​​ Configurations

​​ Widget size

The Turnstile widget can have two different sizes when using the Managed or Non-interactive modes:

​​ Refreshing a Widget

A few seconds before a token expires, the expired-callback is invoked.

The refresh-expired or data-refresh-expired parameter defines the behaviour when the token of a Turnstile widget has expired.

By default, the parameter is set to auto, which will automatically instruct Turnstile to obtain a new token by rerunning the challenge. After the challenge is solved again, the callback, if specified, is invoked with the new token.

The visitor can also be instructed to manually obtain a new token by setting the refresh-expired parameter to manual.

Additionally, specifying never will not result in a regeneration of a token, and the application using Turnstile will be responsible for obtaining a novel Turnstile token.

​​ Execution Modes

By default, Turnstile tokens are obtained for a visitor upon the rendering of a widget (even in invisible mode). However, in some scenarios, an application may want to embed Turnstile, but defer running the challenge until a certain point in time. This is where execution mode can be used to control when a challenge runs and a token is being generated.

There are two options:

• The challenge runs automatically after calling the render() function.
• The challenge runs after the render() function has been called, by invoking the turnstile.execute(container: string | HTMLElement, jsParams?: RenderParameters) function separately. This detaches the appearance and rendering of a widget from its execution.

​​ Appearance Modes

If a widget is visible, its appearance can be controlled via the appearance parameter.

By default, appearance is set to always for visible widget types. However, if appearance is set to execute, the widget will only become visible after the challenge begins. This is helpful in situations where execute() is called after render(). If appearance is set to interaction-only, the widget will become only visible in cases where an interaction is required.