Cara membuat product tour dengan Qwen Code tanpa developer

Contoh: product tour dengan Qwen Code

Cara membuat product tour dengan Qwen Code, langkah demi langkah

1. 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>

   Salin

   

2. Langkah 02

   Jalankan Qwen Code di folder proyek

   Pasang CLI open-source Qwen Code lalu jalankan qwen di folder proyek. CLI ini membaca repositori dan mengedit file setelah Anda konfirmasi. Qwen Chat di web hanya menyarankan kode yang harus Anda tempel sendiri.

   

3. Langkah 03

   Kirim prompt dengan kunci Anda

   Ganti TEMPEL_KUNCI_SITUS_ANDA dengan kunci Anda lalu kirim prompt.

   Tambahkan widget onboarding Clew ke aplikasi ini.
   
   Sisipkan tag persis seperti ini satu kali saja, supaya dimuat di setiap halaman, termasuk setelah perpindahan rute di sisi klien:
   <script src="https://tryclew.io/widget/TEMPEL_KUNCI_SITUS_ANDA.js" async></script>
   
   Cari file HTML root atau root layout proyek ini (index.html untuk Vite, app/layout.tsx dengan next/script untuk Next.js App Router, app.head.script di nuxt.config.ts untuk Nuxt, template dasar untuk aplikasi yang dirender server) lalu tambahkan tag di sana.
   
   Tambahkan juga atribut data-tour yang stabil pada elemen yang akan ditunjuk product tour: navigasi utama, tombol utama untuk membuat/menambah, filter atau pencarian utama, dan judul halaman — misalnya data-tour="create-button". Jangan ubah gaya, teks, atau perilakunya.
   
   Aturan:
   - Gunakan URL skrip persis seperti yang diberikan. Jangan mengunduh, membundel, atau memasang paket npm.
   - Jika proyek memakai Content-Security-Policy, izinkan https://tryclew.io di script-src dan connect-src.
   - Jangan ubah hal lain, lalu tunjukkan diff-nya.

   Salin

   

4. Langkah 04

   Konfirmasi perubahan lalu deploy

   Konfirmasi perubahan setelah memeriksa diff, commit, lalu deploy seperti biasa.

   

5. 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.

   

6. 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 /admin/orders
   Kapan ditampilkan	Langsung saat halaman dimuat
   Target audiens	Tanpa aturan: semua yang membuka halaman
   Frekuensi	Sekali per pengunjung

   

7. 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.

   

Jebakan umum: product tour dengan Qwen Code