Cómo cambiar la posición del mensaje de One Tap

Advertencia: Cuando One Tap migra para usar la API de FedCM, el navegador controla el tamaño y la posición del mensaje de One Tap. No se admiten las posiciones personalizadas. Para la nueva integración con One Tap, no debes personalizar la posición del mensaje. Para obtener información sobre la integración existente, revisa la guía de migración y actualiza la app si es necesario.

Objetivo: Si el flujo de acceso predeterminado no cumple con tus requisitos, puedes personalizarlo de varias maneras. Lee la siguiente información para conocer las opciones de personalización disponibles.

De forma predeterminada, el mensaje de One Tap se muestra en la esquina superior derecha de las ventanas del navegador web para computadoras de escritorio. Cuando se usa FedCM, el navegador controla por completo la ubicación del mensaje. Por lo tanto, no se admiten los diseños personalizados.

De lo contrario, muestra One Tap dentro de un elemento contenedor para cambiar la posición del mensaje. Para hacerlo, especifica el ID del DOM del elemento de contenedor en el atributo data-prompt_parent_id.

Advertencia: No ocultes el contenido de los mensajes de One Tap. No ocultes la percepción de que el contenido del mensaje de One Tap es de un iframe de Google. De lo contrario, es posible que se suspenda el proyecto o la cuenta, o ambas.

En el siguiente ejemplo de código, se reutiliza el elemento g_id_onload como el elemento contenedor y se muestra el mensaje de One Tap en la posición especificada:

<div id="g_id_onload"
     data-client_id="YOUR_GOOGLE_CLIENT_ID"
     data-login_uri="https://your.domain/your_login_endpoint"
     data-prompt_parent_id="g_id_onload"
     style="position: absolute; top: 100px; right: 30px;
            width: 0; height: 0; z-index: 1001;">
</div>

El atributo data-prompt_parent_id se ignora en los navegadores web móviles.