Cara membuat panduan produk interaktif di WordPress tanpa developer
Bantuan yang menunjukkan, bukan sekadar menjelaskan, di WordPress: checklist berisi topik praktis, masing-masing membuka halaman yang tepat dan memandu pengguna dengan tooltip.
- Waktu
- ● 30 menit
- Harga
- Uji coba gratis 14 hari, tanpa kartu
- Siapa yang mengerjakan
- Administrator WordPress
Contoh: panduan interaktif di WordPress
Agensi WordPress menyerahkan situs kepada klien yang sering lupa cara mempublikasikan. Di halaman /docs panduan berisi daftar topik; “Publikasikan artikel” membuka /wp-admin/post-new.php?tutorial=publish-post dengan tur editor.
Format ini termasuk dalam paket Pro. Setiap akun baru dimulai dengan uji coba gratis 14 hari dengan semua format dan aturan audiens, tanpa kartu. Setelah uji coba berakhir, tidak ada yang dihapus dan yang sudah dipublikasikan tetap tampil; tur dan tooltip tetap gratis di paket Free.
Cara membuat panduan interaktif 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
Buat turnya dulu, lalu checklist panduan
Pertama buat satu tur Tooltip langkah demi langkah per topik dengan Edit di situs Anda dan Pilih elemen, lalu catat Slug (dipakai di link) setiap tur. Kemudian buat Checklist onboarding: satu item per topik, dan di URL link isi alamat halaman ditambah
?tutorial=dan slug turnya.
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 Checklist Format Checklist onboarding Di mana ditampilkan (URL halaman) Bagian berdasarkan prefiks /docsKapan ditampilkan Langsung saat halaman dimuat Target audiens Tanpa aturan: semua yang membuka halaman Frekuensi Setiap kunjungan Tur produk Format Tooltip langkah demi langkah Di mana ditampilkan (URL halaman) Bagian berdasarkan prefiks /wp-admin/post-new.phpKapan 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: panduan produk interaktif di WordPress
“Delay JavaScript” menyembunyikan panduan produk interaktif 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.
Jaga parameter URL tetap utuh
Sebagian situs melakukan redirect dan membuang parameter (misalnya saat memaksa garis miring di akhir). Buka setiap tautan topik sekali: jika ?tutorial= hilang dari address bar, tautkan ke URL akhirnya.
Tombol bantuan butuh selector yang stabil
Saat elemen diklik mendengarkan klik pada selector yang Anda isi. Pakai id atau atribut data-tour pada tombol bantuan, bukan class yang bisa berganti nama saat gaya diubah.
Tanya jawab
Apakah tur berjalan di dalam wp-admin?
Hanya jika baris kode juga dimuat di area admin — tambahkan lewat snippet khusus admin di WPCode.
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).
Berapa biayanya?
Tur gratis; checklist panduan termasuk dalam Pro. Setiap akun baru mendapat uji coba 14 hari untuk keduanya, tanpa kartu.
Bisakah tur yang sama tampil otomatis untuk pengguna baru?
Bisa. Tur yang dibuka dengan ?tutorial= mengabaikan aturannya, jadi tur yang sama tetap bisa punya aturan URL sendiri dan Sekali per pengunjung untuk pengunjung pertama kali.
Yang juga bisa ditambahkan di WordPress
- Cara menambahkan popup ke situs WordPress tanpa developer
- Cara membuat product tour di WordPress tanpa developer
- Cara menambahkan tooltip ke situs WordPress tanpa developer