Display Google One Tap

Place the following code snippet into any pages where you want Google One Tap displayed:

<div id="g_id_onload"
     data-client_id="YOUR_GOOGLE_CLIENT_ID"
     data-login_uri="https://your.domain/your_login_endpoint"
     data-your_own_param_1_to_login="any_value"
     data-your_own_param_2_to_login="any_value">
</div>

The data-login_uri attribute is the URI of the login endpoint of your own web app. You can add custom data attributes, which are sent to your login endpoint with the ID token retrieved from Google.

For the full list of data attributes, see the g_id_onload reference page.

Do Not Cover Google One Tap

This section only applies when FedCM is disabled, when FedCM is enabled the browser displays user prompts on top of page content.

To make sure end users see all the information displayed, Google One Tap must not be covered by any other content. Otherwise, pop-up windows may be triggered in some cases.

Double check your page layout and elements' z-index properties, to make sure Google One Tap is not covered by any other content at any time. The UX flow change may be triggered even when only a single pixel in the borders is covered.