Cara membuat product tour tanpa developer
Product tour menunjukkan kepada pengguna baru letak setiap hal: “di sini membuat proyek, di sini mengundang tim”. Di Clew Anda cukup mengeklik elemen di aplikasi Anda sendiri, menulis satu kalimat per langkah, lalu mempublikasikannya — tanpa belajar selector dan tanpa merilis kode.
- Waktu
- ● 20 menit
- Harga
- Paket Free
- Format
- Tooltip langkah demi langkah
Apa itu product tour Clew
Product tour (tur terpandu, walkthrough) adalah rangkaian tooltip yang menempel pada elemen halaman. Di Clew ini adalah format Tooltip langkah demi langkah: setiap langkah menunjuk satu elemen, punya judul dan teks, dan pengguna menekan Berikutnya sampai Selesai.
Anda tidak perlu menulis selector CSS: Edit di situs Anda membuka editor di atas situs Anda, dan Pilih elemen memungkinkan Anda mengeklik elemennya langsung. Tur mengikuti navigasi aplikasi single-page dan menunjukkan di langkah mana orang berhenti.
Di mana tur paling berguna
Sesi pertama di SaaS
Tiga sampai lima langkah di layar utama, sampai aksi pertama yang memberi nilai. Tur yang panjang biasanya dilewati.
Bagian baru atau yang didesain ulang
Pengguna membuka layar yang berubah: tur singkat di URL itu menjelaskan apa yang berpindah.
Formulir yang rumit
Pengaturan, integrasi, laporan dengan filter: satu tooltip untuk setiap kolom yang membingungkan mengurangi tiket support.
Melihat di mana orang berhenti
Funnel menunjukkan berapa orang melihat tiap langkah. Langkah dengan penurunan besar biasanya menandakan layar yang membingungkan, bukan tooltip yang buruk.
Cara membuat product tour dalam 5 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 baris kode sekali saja
Tempel snippet di tempat Anda mengelola situs. Setiap panduan butuh 5–10 menit dan tidak perlu diulang: semua langkah berikutnya dikerjakan di Clew.
Langkah 2 · ilustrasi skematis - Langkah 03
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 3 · ilustrasi skematis - Langkah 04
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 /app/reportsKapan ditampilkan Langsung saat halaman dimuat Target audiens Tanpa aturan: semua yang membuka halaman Frekuensi Sekali per pengunjung 
Langkah 4 · ilustrasi skematis - Langkah 05
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 5 · ilustrasi skematis
Langkah demi langkah: product tour di platform Anda
Pilih platform yang dipakai untuk membangun situs atau aplikasi Anda. Setiap panduan berisi langkah pemasangan, contoh dengan pengaturan siap pakai, dan jebakan khas platform tersebut.
Apakah gratis?
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.
Tanya jawab
Apakah product tour di Clew gratis?
Ya. Tur dan tooltip ada di paket Free: satu situs, hingga 3 yang dipublikasikan, tanpa kartu dan tanpa batas waktu. Aturan audiens dan A/B test ada di Pro.
Bagaimana jika developer mengubah halaman?
Jika elemen hilang, tab Kesehatan menampilkan langkah yang tidak menemukannya. Minta developer menambahkan atribut data-tour pada elemen kunci: selector seperti [data-tour="create"] tetap bertahan saat redesain.
Berapa langkah yang ideal?
Tiga sampai lima. Tunjukkan jalan menuju hasil pertama, bukan setiap tombol. Sisanya taruh di tooltip pada layarnya masing-masing atau di checklist.
Apakah berfungsi di aplikasi React, Vue, atau Next.js?
Ya. Widget memantau perpindahan rute di sisi klien, jadi tur yang terikat ke /dashboard dimulai saat pengguna membukanya tanpa reload.