Referensi API Komponen Non-AMP

Halaman referensi ini menjelaskan cara memuat iframe perantara ke dalam halaman HTML.

Catatan: Lihat bagian Mengintegrasikan Satu Ketuk melalui Iframe untuk mengetahui beberapa informasi latar belakang untuk iframe perantara.

Memuat Library JavaScript Iframe Menengah

Tempatkan cuplikan kode berikut ke dalam halaman HTML yang ingin Anda tampilkan di Google One Tap untuk menampilkan:

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

API HTML

Anda dapat memuat iframe perantara dengan menyertakan elemen HTML dengan atribut ID ditetapkan ke g_id_intermediate_iframe. Lihat contoh cuplikan kode berikut:

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

Elemen dengan ID "g_id_intermediate_iframe"

Anda dapat menempatkan atribut data iframe perantara di elemen yang terlihat atau tidak terlihat, seperti <div> dan <span>. Satu-satunya persyaratan adalah ID elemen disetel ke g_id_intermediate_iframe. Jangan tempatkan ID ini pada beberapa elemen.

Tabel berikut mencantumkan atribut data beserta deskripsinya:

Atribut
data-src	URI iframe menengah One Tap
data-done	Metode callback JavaScript yang akan dipicu saat UX Sekali Ketuk selesai.

data-src

Atribut ini adalah URI iframe menengah Sekali Ketuk Anda. Lihat tabel berikut untuk informasi selengkapnya:

Jenis	Wajib	Contoh
string	Ya	data-src="https://example.com/onetap_iframe.html"

data selesai

Atribut ini adalah metode callback JavaScript yang akan dipicu saat UX Sekali Ketuk selesai.

Secara default, halaman konten akan dimuat ulang saat UX Sekali Ketuk selesai. Anda dapat mengganti perilaku default dengan memberikan callback yang telah diselesaikan sendiri. Lihat tabel berikut untuk informasi selengkapnya:

Jenis	Wajib	Contoh
Fungsi	Opsional	data-done="onOneTapSuccess"

JavaScript API

Anda dapat memuat iframe perantara dengan memanggil metode JavaScript.

Metode: google.accounts.id.InitializeIntermediate

Metode google.accounts.id.initializeIntermediate memuat iframe perantara berdasarkan objek konfigurasi. Lihat contoh kode berikut dari metode ini:

google.accounts.id.initializeIntermediate(IntermediateConfig)

Contoh kode berikut mengimplementasikan metode google.accounts.id.initializeIntermediate dengan fungsi onload:

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

Jenis data: IntermediateConfig

Tabel berikut mencantumkan kolom beserta deskripsinya:

Kolom
src	URI iframe menengah One Tap
done	Metode callback JavaScript yang akan dipicu saat UX Sekali Ketuk adalah salah satunya.

src

Kolom ini adalah URI iframe menengah One Tap. Lihat tabel berikut untuk informasi selengkapnya:

Jenis	Wajib	Contoh
string	Ya	src: "https://example.com/onetap_iframe.html"

done

Kolom ini adalah metode callback JavaScript yang akan dipicu saat UX Sekali Ketuk selesai.

Secara default, halaman konten akan dimuat ulang saat UX Sekali Ketuk selesai. Anda dapat mengganti perilaku default dengan memberikan callback yang telah diselesaikan sendiri. Lihat tabel berikut untuk informasi selengkapnya:

Jenis	Wajib	Contoh
Fungsi	Opsional	done: onOneTapSuccess