Referência da API não AMP Component

Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.

Esta página de referência descreve como carregar um iframe intermediário em páginas HTML.

Carregar a biblioteca JavaScript Iframe intermediária

Insira o snippet de código a seguir em qualquer página HTML que você queira usar no Google One Toque para exibir:

<script src="https://accounts.google.com/gsi/intermediate"></script>

API HTML

É possível carregar o iframe intermediário incluindo um elemento HTML com o atributo ID definido como g_id_intermediate_iframe. Veja o exemplo de snippet de código abaixo:

<script src="https://accounts.google.com/gsi/intermediate"></script>
...
<div id="g_id_intermediate_iframe"
        data-src = "https://example.com/onetap_iframe.html">
</div>

Elemento com ID "g_id_intermediate_iframe"

É possível colocar os atributos de dados do iframe intermediários em elementos visíveis ou invisíveis, como <div> e <span>. O único requisito é que o ID do elemento seja definido como g_id_intermediate_iframe. Não coloque esse ID em vários elementos.

A tabela a seguir lista os atributos de dados com as respectivas descrições:

Atributo
data-src O URI do seu iframe intermediário de um toque
data-done Um método de callback JavaScript a ser acionado quando a UX de um toque for concluída.

criador de dados

Esse atributo é o URI do seu iframe intermediário de um toque. Consulte a tabela a seguir para mais informações.

Tipo Obrigatório Exemplo
string Sim data-src="https://example.com/onetap_iframe.html"

dados concluídos

Esse atributo é um método de callback JavaScript que será acionado quando a UX de um toque for concluída.

Por padrão, a página de conteúdo será atualizada quando a UX com um toque for concluída. É possível substituir o comportamento padrão fornecendo seu próprio callback concluído. Consulte a tabela abaixo para mais informações:

Tipo Obrigatório Exemplo
Função Opcional data-done="onOneTapSuccess"

JavaScript API

É possível carregar o iframe intermediário chamando um método JavaScript.

Método: google.accounts.id.InitializeIntermediário

O método google.accounts.id.initializeIntermediate carrega o iframe intermediário com base no objeto de configuração. Veja o exemplo de código do método a seguir:

google.accounts.id.initializeIntermediate(IntermediateConfig)

O exemplo de código a seguir implementa o método google.accounts.id.initializeIntermediate com uma função onload:

<script>
  window.onload = function () {
    google.accounts.initializeIntermediate({
      src: 'https://example.com/intermediate'
    });
  };
</script>

Tipo de dados: Intermediário

A tabela a seguir lista os campos com as respectivas descrições:

Campo
src O URI do seu iframe intermediário de um toque
done Um método de callback JavaScript a ser acionado quando a UX de um toque é uma.

src

Este campo é o URI do seu iframe intermediário de um toque. Consulte a tabela a seguir para mais informações.

Tipo Obrigatório Exemplo
string Sim src: "https://example.com/onetap_iframe.html"

concluído

Esse campo é o método de callback JavaScript a ser acionado quando a UX de um toque for concluída.

Por padrão, a página de conteúdo será atualizada quando a UX com um toque for concluída. É possível substituir o comportamento padrão fornecendo seu próprio callback concluído. Consulte a tabela abaixo para mais informações:

Tipo Obrigatório Exemplo
Função Opcional done: onOneTapSuccess