How do you set the badge position with reCAPTCHA v3?

Question

I would like to use an inline badge with v3, but there is no documentation on badge position for v3.

Answer 1

You can make the badge inline in V3 with just Javascript it's just not documented yet.

Set your `render` parameter to `explicit` and add a `onload` parameter for the callback, `onRecaptchaLoadCallback` for example.

<script src="https://www.google.com/recaptcha/api.js?render=explicit&onload=onRecaptchaLoadCallback"></script>

Then set up your callback like so and don't forget to enter the id/DOM node of where you want your badge to go, in this case, the id is inline-badge.

<script>
    function onRecaptchaLoadCallback() {
        var clientId = grecaptcha.render('inline-badge', {
            'sitekey': '6Ldqyn4UAAAAAN37vF4e1vsebmNYIA9UVXZ_RfSp',
            'badge': 'inline',
            'size': 'invisible'
        });

        grecaptcha.ready(function() {
            grecaptcha.execute(clientId, {
                    action: 'action_name'
                })
                .then(function(token) {
                    // Verify the token on the server.
                });
        });
    }
</script>

Example

Source

Note: Valid values for 'badge' are 'inline', 'bottomleft', 'bottomright', and 'bottom'. 'bottom' and 'bottomright' are synonyms.

Answer 2

I just have changed the CSS for the grecaptcha-badge class like this:

.grecaptcha-badge { 
    bottom:25px !important; 
}

Answer 3

you can include this into your sass or css to align at left and keep the hover feature active.

.grecaptcha-badge {
  width: 70px !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
  left: 4px !important;
}

.grecaptcha-badge:hover {
  width: 256px !important;
}

Answer 4

EDIT1: See the answer using the render=explicit parameters. This answer still works but it was before this feature was documented and not as clean.

---

I've managed to do just that by placing a relative box and detaching the reCaptcha v3 badge into it. Then some style adjustments are made to the container.

#grecaptcha-box {
    width: 260px;
    overflow: hidden;
    position: relative;
    height: 75px;
}
#grecaptcha-box .grecaptcha-badge {
    box-shadow: none !important;
}

Then you place the box followed by your JavaScript.

<form>
    <!-- Rest of your form here... -->
    <input type="hidden" id="recaptcha-token"  name="recaptcha-token">
    <input type="hidden" id="recaptcha-action" name="recaptcha-action">
</form>

<div id="grecaptcha-box"></div>

<!-- Recaptcha v3 -->
<script src="https://www.google.com/recaptcha/api.js?render=xxxxxxxxxxxxxxxxxxxxxxxxxxxx"></script>
<script id="js-recaptcha-init">
const RECAPTCHA_PUBLIC_KEY = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx';
grecaptcha.ready(function() {
    // Remove badge from fixed place
    var gb = document.getElementsByClassName("grecaptcha-badge")[0];
    gb.style.position = 'absolute';
    document.getElementById('grecaptcha-box').appendChild(gb.cloneNode(true));

    gb.parentNode.removeChild(gb);

    // Do the normal recaptcha things...
    var grecaptcha_opts = {'action' : 'custom_action'};
    grecaptcha.execute(RECAPTCHA_PUBLIC_KEY, grecaptcha_opts)
        .then(function(token) {
            document.getElementById('recaptcha-token').value = token;
            document.getElementById('recaptcha-action').value = grecaptcha_opts.action;
        });
});
</script>

Answer 5

After execute, you can move the badge by Javascript. It will fix recaptcha timeout error in firefox and chrome browsers.

grecaptcha.ready(function() {  
        grecaptcha.execute('sitekey', {actienter code hereon: 'loginpage'}).then(function(token) {
               /* Move Google Badge to your Div ID */
               jQuery('.grecaptcha-badge').appendTo("#g-badge-newlocation");
        });
    });

Answer 6

Just set it at the div section

<div vc-recaptcha
badge="bottomleft"
>
</div>