what is the difference between explicit & implicit rendering

13 Replies

James•14mo ago

Take a read through the docs at https://developers.cloudflare.com/turnstile/get-started/client-side-rendering/#implicitly-render-the-turnstile-widget

Cloudflare Docs

Client-side rendering · Cloudflare Turnstile docs

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

tala⸆⸉OP•14mo ago

When using render=explicit, HTML elements with the cf-turnstile class will not show a challenge.

so explicit rendering is done in the background without any ui?

James•14mo ago

Not quite. The next sentence reads "The turnstile.render function must be invoked using the following steps." explicit rendering prevents the widget from rendering automatically, and you will have to manually render it in your own code using turnstile.render() You might be thinking of the widget types, where "managed" happens in the background and might not have to show the "verify you are human" checkmark: https://developers.cloudflare.com/turnstile/reference/widget-types/

tala⸆⸉OP•14mo ago

You might be thinking of the widget types, where "managed" happens in the background

correctI was thinking about the background check i want it for simple form and don't want to manually render it. so implicit is what i was looking for thank you for clarfying

nico•14mo ago

Hi everyone, in my opinion the Turnstile widget completely ruins the aesthetics of the pages I use Cloudflare Turnstile on. How do you handle this? Do you just f*ck it or do you have a way to style it? Just being able to stretch the width all the way (w-full) and make the banner disappear when the challenge is successful would be an absolute dream.

Chaika•14mo ago

I've never see a UI with the captcha above the form lol

nico•14mo ago

Is it somehow possible to stretch the width to the full div? Thank you

YTW7•14mo ago

Is this a pro feature? thank you, is "Turnstile" just for form submissions?

Adi•14mo ago

It is possible with css, you just have to target the styles inside of the iframe and use !important. It's not pretty code, but it works.

Unknown User•14mo ago

Message Not Public

nico•14mo ago

Thank you very much, looking forward for it. 🙂

Adi•14mo ago

Hey, you're right, I misspoke, you can't apply css to the contents within an iframe 🤦‍♂️ Hoever, thankfully you don't need to. You can actually modify the turnstile widget length based on it's parent div as long as you target the iframe. Again, slightly hacky, but it works. Here is a simple html code demo.

<!doctype html>
<html>
    <head>
        <title>Turnstile test</title>
        <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
    </head>
    <style>
        .full-width {
            width: 100%;
        }
        .turnstile-wrapper {
        }

        .turnstile-wrapper > #cf-turnstile {
            width: 100% !important;
        }

        .turnstile-wrapper > #cf-turnstile > iframe {
            width: 100% !important;
        }
    </style>
    <body>
        <main>
            <h1>Showcasing full width turnstile</h1>
            <div class="full-width">
                <div class="turnstile-wrapper">
                    <div id="cf-turnstile" class="cf-turnstile" data-sitekey="3x00000000000000000000FF" data-callback="turnstileCallback"></div>
                </div>
            </div>
        </main>
        <script>
            function turnstileCallback() {}
        </script>
    </body>
</html>

<!doctype html>
<html>
    <head>
        <title>Turnstile test</title>
        <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
    </head>
    <style>
        .full-width {
            width: 100%;
        }
        .turnstile-wrapper {
        }

        .turnstile-wrapper > #cf-turnstile {
            width: 100% !important;
        }

        .turnstile-wrapper > #cf-turnstile > iframe {
            width: 100% !important;
        }
    </style>
    <body>
        <main>
            <h1>Showcasing full width turnstile</h1>
            <div class="full-width">
                <div class="turnstile-wrapper">
                    <div id="cf-turnstile" class="cf-turnstile" data-sitekey="3x00000000000000000000FF" data-callback="turnstileCallback"></div>
                </div>
            </div>
        </main>
        <script>
            function turnstileCallback() {}
        </script>
    </body>
</html>

Adi•14mo ago

Hey, see the example above 🙂 Hope this helps The good thing about this approach is that you can control the width of turnstile based on the parent div, allowing a lot of flexibility.

Gaming

Programming

what is the difference between explicit & implicit rendering

Did you find this page helpful?