Bagaimana cara menggunakan fungsi pengembang di widget situs web?

WhatsForm menyediakan serangkaian fungsi JavaScript yang memungkinkan Anda mengontrol widget secara terprogram. Gunakan ini untuk membuat interaksi kustom, memicu widget berdasarkan perilaku pengguna, atau mengintegrasikannya ke dalam UI Anda yang sudah ada.

Fungsi yang Tersedia

whatsform.open()

Membuka widget WhatsForm. Jika widget sudah terbuka, memanggil ini lagi tidak akan berpengaruh.

whatsform.open();

Contoh: Buka widget saat pengguna mengklik tombol.

<button onclick="whatsform.open()">Chat dengan kami</button>

whatsform.close()

Menutup widget WhatsForm. Jika widget sudah tertutup, memanggil ini lagi tidak akan berpengaruh.

whatsform.close();

Contoh: Tutup widget setelah pengiriman formulir atau saat menavigasi keluar dari suatu bagian.

<button onclick="whatsform.close()">Tutup Obrolan</button>

whatsform.toggle()

Mengalihkan widget antara status terbuka dan tertutup. Jika widget saat ini terbuka, ia akan tertutup. Jika tertutup, ia akan terbuka.

whatsform.toggle();

Contoh: Gunakan satu tombol untuk membuka dan menutup widget.

<button onclick="whatsform.toggle()">💬 WhatsApp</button>

Contoh Penggunaan

Buka saat menggulir

Picu widget saat pengguna menggulir melewati titik tertentu di halaman.

window.addEventListener('scroll', function () {
  if (window.scrollY > 1500) {
    whatsform.open();
  }
});

Buka setelah jeda

Tampilkan widget secara otomatis setelah pengguna berada di halaman selama beberapa saat.

setTimeout(() => {
  whatsform.open();
}, 15000); // Buka setelah 15 detik

Tutup setelah tidak aktif

let inactivityTimer;

function resetTimer() {
  clearTimeout(inactivityTimer);
  inactivityTimer = setTimeout(() => {
    whatsform.close();
  }, 30000); // Tutup setelah 30 detik tidak aktif
}

window.addEventListener('mousemove', resetTimer);
window.addEventListener('keydown', resetTimer);

Alihkan dengan tombol mengambang kustom

Sembunyikan peluncur default dan gunakan tombol bergaya Anda sendiri.

<script async src="https://whatsform.com/launcher.js" id="wf-widget" data-id="demo" data-message="Message on WhatsApp"></script>
<script>window.whatsformHideButton = true;</script>

<button class="my-custom-chat-btn" onclick="whatsform.toggle()">
  Perlu bantuan?
</button>

Catatan Penting

• Fungsi-fungsi ini hanya tersedia setelah skrip WhatsForm dimuat sepenuhnya. Jika Anda memanggilnya segera saat halaman dimuat, fungsi-fungsi tersebut mungkin belum siap. Bungkus panggilan awal dalam timeout atau dengarkan event load.

• Pasangkan fungsi-fungsi ini dengan window.whatsformHideButton = true jika Anda ingin sepenuhnya mengganti peluncur default dengan UI Anda sendiri.

• Ketiga fungsi tersebut bekerja dengan setiap jenis widget WhatsForm.