Intermediate Iframe API reference

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:

data-src

This attribute is the URI of your One Tap intermediate iframe. See the following table for further information:

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:

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:

src

This field is the URI of your One Tap intermediate iframe. See the following table for further information:

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: