google reCAPTCHA v3 bottomleft

Question

Reading through the code at https://www.gstatic.com/recaptcha/api2/v1531759913576/recaptcha__en.js there are numerous references to bottomleft (as opposed to bottomright where the icon is generally placed, I presume).

But how do I enable this setting and move the icon to the bottom left?

Zito

Answer 1

just worked this out. You need:

window._grecaptcha_callback = () => {
  window.grecaptcha.render({
    sitekey: grecaptcha_key,
    badge: 'bottomleft',
  })
  window.grecaptcha.ready(() => {
    // grecaptcha is ready
  })
}

Then load the script as https://www.google.com/recaptcha/api.js?onload=_grecaptcha_callback.

With this the way you call execute has to change slightly to simply

window.grecaptcha.execute(0, {action})

eg. 0 instead of the site key as the first argument.

Looking through the code there are a number of other undocumented settings:

sitekey, type, theme, size, tabindex, stoken, bind, preload, badge, s, pool, 'content-binding', action

But apart fromt sitekey and badge I don't know what they do. But they probably correspond roughly to the settings for v2.

Zito

Answer 2

If you're using V3 Programatically you can instead alter your script to include the position.

Here's an example:

<script src="https://www.google.com/recaptcha/api.js?render=YOURKEY&badge=bottomleft"></script>

Heroworship

Thank you! I don't know why they haven't documented this – Cards

This also works with the default include method: <script src="https://www.google.com/recaptcha/api.js?badge=bottomleft"></script> – Girl

Note that even though this works in a simple flow, it may not work using a caching plugin :-) – Correctitude

Answer 3

You can emulate the bottom left position and hover effect on the icon.

.grecaptcha-badge {
    right: auto !important;
    left: 0;
    width: 70px !important;

    -webkit-transition: width 0.5s ease-in-out !important;
    -moz-transition: width 0.5s ease-in-out !important;
    -o-transition: width 0.5s ease-in-out !important;
    transition: width 0.5s ease-in-out !important;

    &:hover {
        width: 256px !important;
    }
 }

Tripedal

Answer 4

Maybe things have changed in the last 2 years, but you can just add data-badge="bottomleft" as an attribute in your submit button (or whatever element you have with the g-recaptcha class).

It also takes data-theme="dark" too, which is cool.

Still, I had to search the source code for data- to see what was available. It seems like the documentation for reCaptcha v3 is full of holes.

Bernabernadene

Answer 5

This will put the badge in the bottom left and reduce his width cutting away the slide animation effect.

.grecaptcha-badge {
  width: 70px !important;
  left: 4px;
}

Rebarbative