Cara menambahkan tooltip ke situs Webflow tanpa developer
Petunjuk kontekstual di Webflow: satu kalimat di samping elemen yang membuat pengunjung ragu, dipasang dengan satu klik di editor visual dan ditampilkan tepat saat dibutuhkan.
- Waktu
- ● 10 menit
- Harga
- Paket Free
- Siapa yang mengerjakan
- Admin situs Webflow
Contoh: tooltip di Webflow
Di halaman harga Webflow, pengunjung tidak sadar bahwa bayar tahunan menghemat dua bulan. Tooltip pada tombol bulanan/tahunan berbunyi “Tahunan = gratis 2 bulan” bagi siapa pun yang membuka /pricing, sekali.
Gratis di paket Free Clew, tanpa kartu dan tanpa batas waktu: satu situs dan hingga 3 tur atau tooltip yang dipublikasikan. Aturan audiens dan A/B test tersedia di Pro.
Cara menambahkan tooltip di Webflow, langkah demi langkah
- Langkah 01
Salin snippet Clew Anda
Buat akun gratis (atau masuk), tambahkan situs Anda, lalu buka Ringkasan di admin. Klik baris pada kartu Belum ada sinyal dari widget. untuk menyalinnya: baris itu sudah berisi kunci situs asli Anda, bukan placeholder.
<!-- Clew: ganti TEMPEL_KUNCI_SITUS_ANDA dengan kunci situs dari Admin > Ringkasan --> <script src="https://tryclew.io/widget/TEMPEL_KUNCI_SITUS_ANDA.js" async></script>
Langkah 1 · ilustrasi skematis - Langkah 02
Buka Site settings → Custom code
Di dashboard Webflow buka Site settings situs Anda dan tab Custom code. Custom code membutuhkan Site plan berbayar.
Langkah 2 · ilustrasi skematis - Langkah 03
Tempel ke Head code
Tempel baris Clew ke Head code lalu klik Save changes.
Langkah 3 · ilustrasi skematis - Langkah 04
Publikasikan situs
Custom code baru sampai ke situs live setelah Publish — ke domain Anda dan ke
webflow.iojika memakai keduanya.
Langkah 4 · ilustrasi skematis - Langkah 05
Tempelkan tooltip ke elemen
Di Clew buka Alur → + Alur baru, biarkan Tooltip langkah demi langkah, lalu klik Edit di situs Anda. Di halaman Anda klik Pilih elemen, klik kolom atau tombolnya, lalu tulis judul singkat dan satu kalimat. Atur Posisi jika posisi otomatis menutupi sesuatu yang penting.
Langkah 5 · ilustrasi skematis - Langkah 06
Tentukan di mana, kapan, dan untuk siapa tampil
Di editor yang sama, isi Di mana ditampilkan (URL halaman), Kapan ditampilkan, Target audiens, dan Frekuensi. Ini pengaturan untuk contoh di atas:
Pengaturan Nilai Format Tooltip langkah demi langkah Di mana ditampilkan (URL halaman) Path persis /pricingKapan ditampilkan Langsung saat halaman dimuat Target audiens Tanpa aturan: semua yang membuka halaman Frekuensi Sekali per pengunjung 
Langkah 6 · ilustrasi skematis - Langkah 07
Publikasikan dan cek di situs live
Ubah Status menjadi Terbit lalu simpan. Buka halaman di jendela privat: Clew mengingat siapa yang sudah melihat item “sekali”, jadi browser yang biasa Anda pakai mungkin melewatinya. Tayangan, penyelesaian, dan titik berhenti muncul di statistik.
Langkah 7 · ilustrasi skematis
Jebakan umum: tooltip di Webflow
Domain staging dihitung sebagai URL terpisah
Aturan URL membandingkan path, jadi tooltip untuk /pricing tampil di situsanda.webflow.io maupun di domain Anda. Berguna untuk menguji sebelum publish ke domain.
Combo class dipakai bersama banyak elemen
Class Webflow seperti .button.is-secondary berulang di halaman. Beri elemen target atribut kustom data-tour di pengaturan elemen, lalu arahkan tooltip ke sana.
Builder bisa membuat ulang elemen saat publish
Website builder kadang mengganti id elemen saat blok diduplikasi atau dibuat ulang. Setelah perubahan desain besar, buka Kesehatan: jika petunjuk kehilangan elemennya, pilih ulang.
Tanya jawab
Apakah tooltip ikut bergeser di breakpoint mobile?
Ya. Posisinya dihitung relatif terhadap elemen saat ditampilkan, apa pun tata letak breakpoint-nya.
Apakah saya butuh paket Webflow berbayar?
Ya. Webflow hanya mengizinkan custom code untuk seluruh situs pada Site plan berbayar, dan tidak ada cara lain yang didukung.
Apakah tooltip gratis?
Ya, di paket Free — hingga 3 tur dan tooltip yang dipublikasikan di satu situs.
Bisakah petunjuk hanya terbuka saat diklik?
Bisa. Pilih Saat elemen diklik, isi selector ikon atau tautan yang membukanya, lalu atur Setiap kunjungan.