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 posiciones personalizadas. Para la integración de One Tap nueva, no debes personalizar la posición del mensaje. Para 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 diseños personalizados.

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

Advertencia: No ocultes el contenido de las instrucciones de One Tap. No ocultes la percepción de que el contenido del mensaje de One Tap proviene de un iframe de Google. De lo contrario, se podría suspender el proyecto, la cuenta o ambos.

En el siguiente ejemplo de código, se reutiliza el elemento g_id_onload como elemento del 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 para dispositivos móviles.