Introducción
En esta entrada vamos a aprender a como cambiar de posición u ocultar el icono de reCaptcha.
reCaptcha v3 es una herramienta desarrollada por Google que ayuda a proteger sitios web contra el tráfico abusivo sin interrumpir a los usuarios. Analiza el comportamiento del usuario en la página y asigna una puntuación basada en su nivel de confianza. Los administradores del sitio pueden entonces utilizar esta puntuación para determinar cómo tratar las interacciones sospechosas, como permitir, bloquear o presentar desafíos adicionales.
Cambiar de posición
Por defecto, el banner nos aparece en la esquina inferior derecha de la página, donde se suelen poner botones de contacto, redes sociales o el botón de «Volver arriba»
Esto hace que se solapen y uno u otro no sean accesibles cómodamente para el usuario. Así que una opción rápida sería cambiarlo de posición, en este caso lo vamos a mover a la esquina inferior izquierda. Para ello usaremos código CSS que podemos incluir en WordPress > Apariencia > Personalizar > CSS Adicional. Otras formas de incluir código CSS puede ser mediante un plugin específico; si usamos Elementor en la configuración Avanzada > CSS Personalizado.
/*Mover Recaptcha a la izquierda*/
.grecaptcha-badge {
width: 70px !important;
overflow: hidden !important;
transition: all 0.3s ease !important;
left: -2px !important;
bottom: 20px !important;
}
.grecaptcha-badge:hover {
width: 256px !important;
}
¿Y si cambiarlo de posición no es suficiente?
Puede ocurrirnos que en la esquina inferior izquierda, también tengamos algún elemento, y nos venga mejor ocultarlo, ya sea por adaptabilidad o por estética. Para eso también tenemos solución.
Para este caso, la solución nos la proporciona Google de forma oficial aquí.
Te lo resumo:
Habría que incluir de forma visible en el flujo de usuarios el siguiente texto:
Este sitio está protegido por reCaptcha y la
<a href="https://policies.google.com/privacy">Política de Privacidad</a> y los
<a href="https://policies.google.com/terms">Términos de Servicio</a> de Google.
Y para ocultar el icono usaremos CSS:
.grecaptcha-badge { visibility: hidden; }
Y para ocultar el icono usaremos CSS: