Cara menambahkan tooltip ke situs WordPress tanpa developer
Petunjuk kontekstual di WordPress: 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
- Administrator WordPress
Contoh: tooltip di WordPress
Toko WooCommerce menjual template digital, dan pelanggan tidak menemukan file mereka. Di /my-account tooltip menunjuk tab Downloads: “File Anda ada di sini — tautannya tidak kedaluwarsa”.
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 WordPress, 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
Pasang plugin kode header
Di Plugins → Add New pasang dan aktifkan plugin gratis WPCode (atau pakai opsi “header scripts” dari tema Anda). Jangan edit
header.php: pembaruan tema akan menimpanya.
Langkah 2 · ilustrasi skematis - Langkah 03
Tempel baris ke kotak Header
Buka Code Snippets → Header & Footer, tempel baris Clew ke Header, lalu klik Save Changes.
Langkah 3 · ilustrasi skematis - Langkah 04
Bersihkan cache
Jika Anda memakai WP Rocket, LiteSpeed Cache, W3 Total Cache, atau CDN, bersihkan cache. Di pengaturan “delay JavaScript”, kecualikan
tryclew.io/widget.
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) Bagian berdasarkan prefiks /my-accountKapan 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 WordPress
“Delay JavaScript” menyembunyikan tooltip sampai ada interaksi
WP Rocket, LiteSpeed, dan Perfmatters bisa menunda skrip sampai scroll atau klik pertama. Widget jadi terlambat dimulai dan item Langsung saat halaman dimuat terlihat rusak. Tambahkan tryclew.io/widget ke pengecualian.
Pembaruan tema dan plugin mengganti nama tab dan tombol
WooCommerce dan tema sesekali mengubah markup tab akun dan formulir produk. Tautkan petunjuk ke elemen dengan class yang stabil seperti woocommerce-MyAccount-navigation-link--downloads, bukan posisinya, dan cek Kesehatan setelah memperbarui plugin.
Utamakan id dan atribut data
Jika Pilih elemen menyarankan rangkaian class yang panjang, pilih elemen induk terdekat yang punya id atau minta atribut data-tour — selector yang stabil membuat petunjuk bertahan setelah pembaruan tema.
Tanya jawab
Apakah berfungsi dengan page builder seperti Elementor?
Ya. Clew bekerja pada halaman yang sudah dirender; pilih elemennya dengan Pilih elemen, apa pun yang membangunnya.
Apakah bisa di WordPress.com?
Plugin seperti WPCode butuh paket Business WordPress.com atau lebih tinggi. WordPress self-hosted bisa di hosting mana pun.
Apakah akan tampil di wp-admin?
Plugin header biasanya hanya menambahkan kode ke situs publik. Untuk panduan di dalam /wp-admin, tambahkan baris lewat snippet khusus area admin (WPCode bisa memilih area admin).
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.
Yang juga bisa ditambahkan di WordPress
- Cara menambahkan popup ke situs WordPress tanpa developer
- Cara membuat product tour di WordPress tanpa developer
- Cara membuat panduan produk interaktif di WordPress tanpa developer