How to remove annoying ReCaptcha V3 sticky info box

How to remove annoying ReCaptcha V3 sticky info box

KestutisIT
Tourist
5 0 1

I want to remove that annoying sticky ReCaptcha V3 on the right side of the website. 

I want to go with Recaptcha V2 instead that has an input box, but no sticky bar over the website.

Also, I'm wondering to use any other Captcha system, maybe self-hosted.

I cannot disable captcha at all due to spam-protection reasons (as I understand it is used in newsletter subscription popup, blog post comment, and Shopify registration probably).

And still, I cannot put any ultra slow app that would slow down the website.

EWP.com - Elite WordPress, Shopify & Amazon FBA Agency.
Certified WordPress & Shopify Developer. Amazon FBA guru.
Replies 8 (8)

Bitfresh
Shopify Partner
57 10 12

You are allowed to hide the badge as long as you include the reCAPTCHA branding visibly in the user flow (see this link for more info). Add the following code to hide the badge in your CSS:

.grecaptcha-badge { 
    visibility: hidden;
}

 

sweetcassie
Tourist
10 0 3

Where do I go to hide the sticky? Also, it just appeared this morning. I have had this site up and running for the past year and this was never visible. Now it's on my home page. Weird! 

JoesIdeas
Shopify Partner
2385 219 630

You can hide the badge with CSS, just inspect the element with chrome dev tools to get the id / class, then add a CSS rule to hide it (see this guide if you're not familiar how to inspect / edit CSS).

*If you do that, you have to show a disclaimer (https://developers.google.com/recaptcha/docs/faq#id-like-to-hide-the-recaptcha-badge.-what-is-allowe...).

We have recaptcha v3 set up, hiding the widget + disclaimer here if you want to see an example: https://speedboostr.com/contact. The CSS rule we use to hide it is 

.grecaptcha-badge { visibility: hidden; }

 

• Creator of Shopify automation apps Order Automator + Product Automator [apps that save you time + money]
• Shopify developer for 10+ years, store owner for 7 years
• I also make guides like Shopify Automation Tips and How to Figure Out Why You're Not Getting Sales
KristaRivera
Visitor
1 0 1

You can hide the badge with CSS, just inspect the element with chrome dev tools to get the id / class, then add a CSS rule to hide it (see this guide if you're not familiar how to inspect / edit CSS).

*If you do that, you have to show a disclaimer (https://developers.google.com/recaptcha/docs/faq#id-like-to-hide-the-recaptcha-badge.-what-is-allowe Tellpizzahut).

We have recaptcha v3 set up, hiding the widget + disclaimer here if you want to see an example: https://speedboostr.com/contact. The CSS rule we use to hide it is 

 

.grecaptcha-badge { visibility: hidden; }

 

Exactly what I needed! You just saved me several hours. Thanks!

 

CrossandShield
Visitor
2 0 0

The dev tools were useless to me. A bunch of jibberish and I didn't see anything (that I could tell) as to where to find the proper CSS file/ location to add this code. Do you have more specifics on this? Thanks!

ryanbartz
Tourist
5 0 1

I was able to accomplish it by adding the code to my "theme.css" file. Most themes have this file.

DuraPaw
Shopify Partner
17 0 10

Now Shopify has integrated the new hcaptcha but there is no documentation as of yet for if we can (or how) to hide it. Google says there is an "invisible mode" but does not say how to activate it: https://docs.hcaptcha.com/faq#do-i-need-to-display-anything-on-the-page-when-using-hcaptcha-in-invis...

Romaha
Visitor
2 0 0

And nobody said a word about what exactly .css file need to modify 😐