Cara membuat product tour di WordPress tanpa developer
Walkthrough terpandu di WordPress dalam sekitar dua puluh menit: pasang satu baris, telusuri antarmuka Anda sendiri di editor visual, lalu publikasikan tur yang dimulai tepat di tempat pengguna baru membutuhkannya.
- Waktu
- ● 20 menit
- Harga
- Paket Free
- Siapa yang mengerjakan
- Administrator WordPress
Contoh: product tour di WordPress
Situs kursus online di WordPress dengan plugin LMS mendapati siswa bingung setelah mendaftar. Di /courses tur 3 langkah menunjukkan daftar pelajaran, tombol “Tandai selesai”, dan tempat sertifikat muncul.
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 membuat product tour 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
Susun tur langsung di halaman Anda
Di Clew buka Alur → + Alur baru, biarkan Format pada Tooltip langkah demi langkah, lalu klik Edit di situs Anda. Di halaman Anda klik Pilih elemen, klik elemen untuk langkah 1, lalu tulis judul dan satu atau dua kalimat. Ulangi untuk 3–5 langkah; pratinjau diperbarui saat Anda mengetik.
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 /coursesKapan 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: product tour di WordPress
“Delay JavaScript” menyembunyikan product tour 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.
Halaman setelah login sering berbeda
Area member (/my-account WooCommerce, halaman kursus LMS) menampilkan markup yang berbeda dari yang dilihat pengunjung anonim. Susun langkah saat login sebagai member biasa, bukan sebagai administrator dengan toolbar tambahan.
Tautkan langkah ke elemen yang dilihat semua orang
Banner, blok personal, dan varian A/B test tidak dilihat semua orang. Pakai navigasi, judul, dan tombol utama; jika elemen tidak ditemukan, langkah itu muncul di Kesehatan.
Tanya jawab
Apakah berfungsi dengan LearnDash atau Tutor LMS?
Ya. Clew tidak berintegrasi dengan plugin; Clew menunjuk elemen halaman kursus di browser.
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 product tour gratis?
Ya: tur ada di paket Free dengan hingga 3 yang dipublikasikan. Anda hanya butuh Pro untuk aturan audiens, A/B test, dan tur yang lebih banyak.
Apakah saya perlu paham selector CSS?
Tidak. Edit di situs Anda membuka editor di halaman Anda dan Pilih elemen mengisi selector saat Anda mengeklik elemen.
Yang juga bisa ditambahkan di WordPress
- Cara menambahkan popup ke situs WordPress tanpa developer
- Cara menambahkan tooltip ke situs WordPress tanpa developer
- Cara membuat panduan produk interaktif di WordPress tanpa developer
Product tour di platform lain
- Google Tag ManagerCara membuat product tour lewat Google Tag Manager tanpa developer
- LovableCara membuat product tour di aplikasi Lovable tanpa developer
- Bolt.newCara membuat product tour di aplikasi Bolt.new tanpa developer
- v0Cara membuat product tour di aplikasi v0 tanpa developer
- ReplitCara membuat product tour di aplikasi Replit tanpa developer
- CursorCara membuat product tour di aplikasi yang dibuat dengan Cursor tanpa developer
- Claude CodeCara membuat product tour dengan Claude Code tanpa developer
- ChatGPT CodexCara membuat product tour dengan ChatGPT Codex tanpa developer
- Qwen CodeCara membuat product tour dengan Qwen Code tanpa developer