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.