Google Identity Services is migrating to FedCM APIs. Follow the
migration guide to review potential changes and avoid negative impacts for user sign-in to your website.
Send feedback
Change the One Tap prompt position
Stay organized with collections
Save and categorize content based on your preferences.
Warning: When One Tap migrates to use the FedCM API , the browser controls
the size and position of One Tap prompt. Custom positions are not supported. For
new One Tap integration, you shouldn't customize the prompt's position. For
existing integration, review the migration guide and update your app if
necessary. Objective: If the default login flow doesn't meet your requirements, you can
customize it in several ways. Read the following information for available
customization options.
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.
Warning: Don't hide any One Tap prompt content. Don't obscure the perception
that the One Tap prompt content is from a Google iframe. Failure to do so may
result in project suspension, account suspension, or both.
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.
Send feedback
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License , and code samples are licensed under the Apache 2.0 License . For details, see the Google Developers Site Policies . Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2024-02-28 UTC.
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"Missing the information I need"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"Too complicated / too many steps"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"Out of date"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"Samples / code issue"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"Other"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"Easy to understand"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"Solved my problem"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"Other"
}]
Need to tell us more?
{"lastModified": "Last updated 2024-02-28 UTC."}
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2024-02-28 UTC."]]