Cipta dan paparkan borang tetingkap timbul

Diterbitkan: 16 Julai 2026 · Kemas kini terakhir: 12 September 2026 · Oleh Marcus Biel

Tetingkap timbul dipaparkan di atas kandungan laman web anda. Tawaran pendaftaran ditunjukkan terus di hadapan pelawat, sementara halaman asal kekal di bawahnya.

Tetingkap timbul berguna untuk tawaran buletin e-mel, diskaun, pendaftaran acara, insentif pendaftaran dan seruan tindakan lain yang khusus. Oleh sebab tetingkap timbul mengganggu pengalaman biasa pelawat semasa melihat halaman, masa dan kekerapan paparan sama pentingnya dengan reka bentuk.

Panduan ini menerangkan tetapan khusus untuk tetingkap timbul. Susun atur, blok kandungan, medan pelanggan, teg, tipografi, lapisan dan aliran pendaftaran diterangkan dalam panduan utama pembina borang pendaftaran.

Cipta tetingkap timbul

Buka “Signup Forms”, klik “Create Form” dan pilih “Popup”. Masukkan nama dalaman yang jelas, kemudian teruskan ke pembina.

Anda juga boleh mengedit tetingkap timbul sedia ada dengan mengklik namanya dalam Signup Forms Overview.

Gunakan nama yang menerangkan tawaran atau lokasi paparannya, seperti “Tetingkap timbul diskaun halaman utama”, “Tetingkap timbul pendaftaran webinar” atau “Tetingkap timbul muat turun panduan”. Nama dalaman tidak dipaparkan secara automatik kepada pelawat.

Pilih templat tetingkap timbul

Pilihan untuk tetingkap timbul merangkumi borang kosong, borang standard dan empat templat siap reka:

• Clean discount
• Warm guide
• Dark webinar
• Soft community

Pilih templat dengan saiz dan struktur kandungan yang sesuai dengan tawaran. Semua teks, medan, warna, imej, jarak dan susun atur boleh diubah kemudian.

Reka bentuk tetingkap timbul

Gunakan pembina visual untuk menyusun tetingkap timbul. Anda boleh menggabungkan borang pendaftaran dengan teks, imej, video, senarai, butang, pautan media sosial, pembilang pelanggan, ruang kosong dan pemisah.

Pastikan mesej utama ringkas supaya dapat difahami serta-merta. Tajuk yang jelas, satu penerangan ringkas dan butang hantar yang khusus biasanya lebih berkesan daripada beberapa mesej yang berebut perhatian.

Pilih blok borang pendaftaran untuk menetapkan medan, maklumat wajib, teg tersembunyi, penunjuk kemajuan, pembilang pelanggan, input dan butang hantar. Buka “Page settings” untuk menukar latar belakang keseluruhan tetingkap timbul dan tetapan lalai penampilannya.

Tetingkap timbul muncul di atas laman web dengan kawalan untuk menutupnya. Sediakan ruang visual yang mencukupi di sekeliling teks dan medan penting supaya borang kekal mudah digunakan pada skrin kecil.

Tetapkan tingkah laku tetingkap timbul

Pilih blok borang pendaftaran dan buka “Widget Settings”. Bahagian ini mengawal masa tetingkap timbul dipaparkan dan kekerapan pelawat boleh melihatnya.

Kelewatan paparan

“Display Delay” menentukan tempoh dalam saat yang Maildroppa perlu tunggu sebelum memaparkan tetingkap timbul pada halaman laman web tempat ia dibenamkan.

Masukkan 0 untuk memaparkannya tanpa kelewatan tambahan. Gunakan nilai yang lebih besar untuk memberi pelawat masa membaca halaman sebelum tawaran muncul. Pembina menerima kelewatan sehingga 86,400 saat.

Pilih tempoh kelewatan berdasarkan halaman. Kelewatan singkat mungkin sesuai untuk halaman kempen yang khusus, manakala kelewatan lebih lama boleh mengurangkan gangguan semasa pelawat membaca artikel.

Kekerapan paparan

“Display Frequency” mengawal tempoh sebelum tetingkap timbul boleh dipaparkan semula kepada pelawat yang sama. Pilihan yang tersedia ialah:

• Always
• Once per hour
• Once per day
• Once per week
• Once per month

Gunakan “Always” dengan berhati-hati. Tetingkap timbul yang berulang kali mengganggu pelawat yang sama boleh menjengkelkan. Kekerapan harian atau mingguan selalunya lebih sesuai sebagai tetapan awal untuk tawaran umum di laman web.

Kekerapan ini disimpan dalam pelayar pelawat. Oleh itu, ujian menggunakan pelayar lain, tetingkap pelayaran peribadi atau storan pelayar yang telah dikosongkan boleh memberikan hasil yang berbeza.

Gunakan pengesanan niat keluar

Dayakan “Exit Intent Popup” jika anda mahu tetingkap timbul dibuka selepas pelawat menggerakkan penuding keluar dari kawasan halaman, yang menandakan mereka mungkin akan meninggalkan halaman.

Apabila pengesanan niat keluar didayakan, tetingkap timbul menunggu tindakan ini dan bukannya mengikut kelewatan paparan biasa. Kekerapan paparan yang dipilih masih menghalangnya daripada dipaparkan semula terlalu awal.

Pengesanan niat keluar bergantung pada pergerakan penuding, jadi ia paling relevan pada pelayar komputer meja dan komputer riba. Peranti skrin sentuh tidak memberikan isyarat keluar yang sama. Sentiasa pastikan pelawat yang menggunakan peranti mudah alih masih boleh menemui tawaran pendaftaran anda pada halaman itu sendiri atau melalui borang lain yang sesuai.

Buka tetingkap timbul secara manual melalui elemen halaman

Tetingkap timbul boleh dibuka apabila pelawat mengklik butang, imej atau pautan tertentu di laman web anda. Ini ialah pencetus klik manual. Ia berbeza daripada “Exit Intent Popup”, yang bertindak balas apabila pelawat menggerakkan penuding keluar dari halaman.

Tetapkan dan pasang pencetus klik manual seperti berikut:

1. Buka tetingkap timbul dalam Signup Form Builder.
2. Klik blok borang pendaftaran pada kanvas dan buka “Settings” di sebelah kanan.
3. Kembangkan “Widget Settings” dan dayakan “Open popup when a customer clicks a page element”.
4. Klik “Save changes”.
5. Kembali ke Signup Forms Overview dan aktifkan tetingkap timbul jika ia tidak aktif.
6. Klik “Show Code Snippet” pada baris tetingkap timbul tersebut.

Kotak dialog ini mengandungi dua nilai yang diperlukan di laman web anda:

1. Salin kod lengkap daripada tab “JavaScript” dan tambahkannya pada halaman laman web tempat tetingkap timbul perlu tersedia.
2. Di bawah kod tersebut, salin ID yang dipaparkan di bawah “Add this ID to element from which you want to manually trigger Popup”.
3. Tambahkan nilai yang sama tepat pada atribut id bagi butang, imej atau pautan yang akan membuka tetingkap timbul.

ID menggunakan format ini:

maildroppa-popup-btn-[form-id]

Contohnya:

<button id="maildroppa-popup-btn-[form-id]">Get the guide</button>

JavaScript memuatkan tetingkap timbul. ID pula menghubungkan tetingkap timbul dengan elemen halaman yang dipilih. Kedua-duanya mesti ada pada halaman diterbitkan yang sama. Apabila pelawat mengklik elemen dengan ID yang sama tepat, skrip Maildroppa membuka tetingkap timbul.

Jika butang laman web anda sudah mempunyai ID daripada sistem tetingkap timbul lain, gantikannya dengan ID pencetus Maildroppa jika anda mahu Maildroppa mengendalikan klik tersebut. Jangan letakkan tetingkap timbul Maildroppa di dalam tetingkap timbul lain yang disediakan oleh pembina laman web anda.

Gunakan setiap ID HTML sekali sahaja pada setiap halaman. Jika beberapa elemen perlu membuka tetingkap timbul yang sama, minta orang yang mengendalikan pelaksanaan laman web menghubungkan elemen tersebut tanpa menggunakan ID yang sama berulang kali.

Hubungkan aliran pendaftaran

Semak aliran pendaftaran yang ditetapkan pada pengepala pembina. Aliran ini mengawal respons serta-merta selepas borang dihantar, e-mel pengesahan langganan (double opt-in) dan hasil selepas pengesahan.

Anda boleh memilih aliran sedia ada, mengeditnya atau mencipta aliran berasingan untuk tetingkap timbul ini. Aliran khusus berguna apabila tawaran memerlukan mesej pengesahan atau penghantaran insentif pendaftarannya sendiri.

Pratonton dan simpan

Klik “Preview” untuk menyemak reka bentuk dan tingkah laku tetingkap timbul tanpa mengubah versi yang digunakan di laman web anda. Semak susun atur, kawalan tutup, susunan medan, ruang untuk mesej pengesahan input dan respons selepas borang dihantar.

Klik “Save changes” apabila tetingkap timbul sudah sedia. Kemudian kembali ke Signup Forms Overview.

Aktifkan dan benamkan tetingkap timbul untuk paparan automatik

Aktifkan tetingkap timbul melalui menu tindakan tiga titik jika ia belum aktif. Kemudian klik “Show Code Snippet” dan salin kod lengkap daripada tab “JavaScript”.

Tambahkan skrip pada setiap halaman laman web tempat tetingkap timbul perlu tersedia. Kod ini mengandungi ID borang unik tetingkap timbul dan memuatkan konfigurasi terkini yang telah disimpan.

Tab “HTML” menyediakan kod penanda yang dijana untuk pelaksanaan tersuai. Jika anda menggunakannya, uji semua tingkah laku dan langkah penghantaran borang dengan teliti kerana kod dan gaya laman web anda boleh mempengaruhi hasilnya.

Bahagian ini terpakai apabila tetingkap timbul perlu dibuka secara automatik berdasarkan kelewatan paparan atau pengesanan niat keluar. Untuk butang, imej atau pautan yang membuka tetingkap timbul apabila diklik, ikuti

.

Untuk arahan umum tentang pembenaman, lihat Bina dan benamkan borang terbenam.

Uji tetingkap timbul di laman web anda

Uji tetingkap timbul pada halaman laman web sebenar selepas menambahkan kod:

1. Semak kelewatan yang ditetapkan.
2. Uji butang tutup dan tindakan mengklik di luar borang.
3. Jika pengesanan niat keluar didayakan, gerakkan penuding keluar dari halaman untuk mengujinya.
4. Jika pencetus manual didayakan, klik elemen halaman yang ditetapkan untuk mengujinya.
5. Semak susun atur pada skrin sempit.
6. Hantar borang dan lengkapkan proses pengesahan langganan melalui e-mel (double opt-in).
7. Semak pelanggan dan teg tersembunyi dalam Maildroppa.

Tetapan kekerapan mungkin menghalang tetingkap timbul daripada muncul semula semasa ujian berulang. Gunakan tetingkap pelayaran peribadi atau kosongkan storan pelayar yang berkaitan apabila anda perlu membuat lawatan ujian tanpa dipengaruhi rekod lawatan terdahulu.

Kemas kini atau nyahaktifkan tetingkap timbul

Untuk mengemas kini tetingkap timbul, bukanya dalam Maildroppa, edit reka bentuk atau tingkah lakunya, semak pratonton dan klik “Save changes”. Coretan JavaScript terus menggunakan ID borang yang sama.

Untuk menghentikan paparannya buat sementara waktu, pilih “Deactivate” daripada menu tindakan. Penyahaktifan mengekalkan tetingkap timbul dan data laporan terdahulunya. Alih keluar juga skrip atau elemen pencetus daripada laman web jika tidak lagi diperlukan.