This reference page describes how to load intermediate iframe into HTML pages.
Load the Intermediate Iframe JavaScript Library
Place the following code snippet into any HTML pages that you want to Google One Tap to display:
<script src="https://accounts.google.com/gsi/intermediate"></script>
HTML API
You can load the intermediate iframe by including an HTML element with the ID
attribute set to g_id_intermediate_iframe
. See the following example code
snippet:
<script src="https://accounts.google.com/gsi/intermediate"></script>
<div id="g_id_intermediate_iframe"
data-src="https://example.com/onetap_iframe.html">
</div>
Element with ID "g_id_intermediate_iframe"
You can put the intermediate iframe data attributes in any visible or invisible
elements, such as <div>
and <span>
. The only requirement is that the element
ID is set to g_id_intermediate_iframe
. Don't put this ID on multiple
elements.
The following table lists the data attributes with their descriptions:
Attribute | |
---|---|
data-src |
The URI of your One Tap intermediate iframe |
data-done |
A JavaScript callback method to be triggered when the One Tap UX is done. |
data-src
This attribute is the URI of your One Tap intermediate iframe. See the following table for further information:
Type | Required | Example |
---|---|---|
string | Yes | data-src="https://example.com/onetap_iframe.html" |
data-done
This attribute is a JavaScript callback method triggered when the One Tap UX is done.
By default, the content page is reloaded when the One Tap UX is done. You can override the default behavior by providing your own done callback. See the following table for further information:
Type | Required | Example |
---|---|---|
Function | Optional | data-done="onOneTapSuccess" |
JavaScript API
You can load the intermediate iframe by calling a JavaScript method.
Method: google.accounts.id.initializeIntermediate
The google.accounts.id.initializeIntermediate
method load the intermediate
iframe based on the configuration object. See the following code example of the
method:
google.accounts.id.initializeIntermediate(IntermediateConfig)
The following code example implements the
google.accounts.id.initializeIntermediate
method with an onload
function:
<script>
window.onload = function () {
google.accounts.id.initializeIntermediate({
src: 'https://example.com/intermediate'
});
};
</script>
Data type: IntermediateConfig
The following table lists the fields with their descriptions:
Field | |
---|---|
src |
The URI of your One Tap intermediate iframe |
done |
A JavaScript callback method to be triggered when the One Tap UX is one. |
src
This field is the URI of your One Tap intermediate iframe. See the following table for further information:
Type | Required | Example |
---|---|---|
string | Yes | src: "https://example.com/onetap_iframe.html" |
done
This field is the JavaScript callback method to be triggered when the One Tap UX is done.
By default, the content page is reloaded when the One Tap UX is done. You can override the default behavior by providing your own done callback. See the following table for further information:
Type | Required | Example |
---|---|---|
Function | Optional | done: onOneTapSuccess |