Change the One Tap prompt position

AI-generated Key Takeaways

outlined_flag

• Custom positions for the One Tap prompt are not supported when using the FedCM API, as the browser controls its size and position.

• You can customize the One Tap prompt's position by displaying it inside a container element and specifying its DOM ID using the data-prompt_parent_id attribute, except on mobile browsers or when FedCM is used.

• Do not hide any One Tap prompt content or obscure its origin from a Google iframe to avoid potential project or account suspension.

By default, the One Tap prompt is displayed in the top-right corner of desktop web browser windows. When FedCM is used, browser fully controls the prompt location. Hence, custom layouts are not supported.

Otherwise, display One Tap inside a container element to change prompt position. To do so, specify the DOM ID of the container element in the data-prompt_parent_id attribute.

The following code example reuses the g_id_onload element as the container element and displays the One Tap prompt in the specified position:

<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>

The data-prompt_parent_id attribute is ignored on mobile web browsers.