Referensi Intermediate Iframe API

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

Memuat Library JavaScript Iframe Menengah

Tempatkan cuplikan kode berikut ke halaman HTML yang ingin Anda tampilkan dengan Google One Tap:

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

API HTML

Anda dapat memuat iframe perantara dengan menyertakan elemen HTML dengan atribut ID yang 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 ditetapkan ke g_id_intermediate_iframe. Jangan menempatkan ID ini di beberapa elemen.

Tabel berikut mencantumkan atribut data beserta deskripsinya:

Atribut
data-src URI iframe perantara Sekali Ketuk Anda
data-done Metode callback JavaScript yang akan dipicu saat UX Sekali Ketuk selesai.

data-src

Atribut ini adalah URI iframe perantara Sekali Ketuk Anda. Lihat tabel berikut untuk informasi lebih lanjut:

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

data-done

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

Secara default, halaman konten dimuat ulang saat UX Satu Ketuk selesai. Anda dapat mengganti perilaku default dengan memberikan callback selesai Anda sendiri. Lihat tabel berikut untuk mengetahui 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 metode berikut:

google.accounts.id.initializeIntermediate(IntermediateConfig)

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

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

Jenis data: IntermediateConfig

Tabel berikut mencantumkan kolom beserta deskripsinya:

Kolom
src URI iframe perantara Sekali Ketuk Anda
done Metode callback JavaScript yang akan dipicu jika UX Sekali Ketuk adalah metode yang pertama.

src

Kolom ini adalah URI iframe perantara One Tap Anda. Lihat tabel berikut untuk informasi lebih lanjut:

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

selesai

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

Secara default, halaman konten dimuat ulang saat UX Satu Ketuk selesai. Anda dapat mengganti perilaku default dengan memberikan callback selesai Anda sendiri. Lihat tabel berikut untuk informasi lebih lanjut:

Jenis Wajib Contoh
Fungsi Opsional done: onOneTapSuccess