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?

score 8 · Answer 1 · answered Aug 25 '21 at 15:05

8

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>

answered Aug 25 '21 at 15:05

Kehza

363
1
5
11

Thank you! I don't know why they haven't documented this – R.S.K Nov 29 '21 at 10:31
This also works with the default include method: `` – Fabien Snauwaert Feb 16 '22 at 17:11

score 7 · Accepted Answer · answered Oct 01 '18 at 16:05

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.

score 2 · Answer 3 · answered Dec 03 '20 at 03:29

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.

score 2 · Answer 4 · answered Jul 05 '21 at 17:23

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;
    }
 }

score 1 · Answer 5 · answered Mar 21 '21 at 00:21

1

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;
}

answered Mar 21 '21 at 00:21

Marco x

21
3

google reCAPTCHA v3 bottomleft

5 Answers5

Linked