По умолчанию приглашение One Tap отображается в правом верхнем углу окон веб-браузера на рабочем столе. При использовании FedCM браузер полностью контролирует расположение подсказок. Следовательно, пользовательские макеты не поддерживаются.
В противном случае отобразите One Tap внутри элемента контейнера, чтобы изменить положение подсказки. Для этого укажите идентификатор DOM элемента контейнера в атрибуте data-prompt_parent_id .
В следующем примере кода элемент g_id_onload повторно используется в качестве элемента контейнера и отображается приглашение One Tap в указанной позиции:
<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>
Атрибут data-prompt_parent_id игнорируется в мобильных веб-браузерах.
По умолчанию приглашение One Tap отображается в правом верхнем углу окон веб-браузера на рабочем столе. При использовании FedCM браузер полностью контролирует расположение подсказок. Следовательно, пользовательские макеты не поддерживаются.
В противном случае отобразите One Tap внутри элемента контейнера, чтобы изменить положение подсказки. Для этого укажите идентификатор DOM элемента контейнера в атрибуте data-prompt_parent_id .
В следующем примере кода элемент g_id_onload повторно используется в качестве элемента контейнера и отображается приглашение One Tap в указанной позиции:
<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>
Атрибут data-prompt_parent_id игнорируется в мобильных веб-браузерах.