Cara menambahkan checklist onboarding di aplikasi Lovable tanpa developer

Contoh: checklist onboarding di aplikasi Lovable

Cara menambahkan checklist onboarding di aplikasi Lovable, 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

   Buka chat proyek di Lovable

   Buka proyek Anda di Lovable. Chat mengedit kode secara langsung; pastikan Anda berada di versi utama yang dipublikasikan, bukan remix lama.

   

3. Langkah 03

   Kirim prompt dengan kunci Anda

   Salin prompt, ganti TEMPEL_KUNCI_SITUS_ANDA dengan kunci Anda, lalu kirim. Selain tag, prompt ini meminta apa yang dibutuhkan checklist onboarding dari kode.

   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>
   
   Ini proyek Lovable (React + Vite): letakkan tag di index.html tepat sebelum </head>.
   
   Setelah pengguna yang login dimuat, dan setiap kali nilai berikut berubah, panggil Clew.identify() dengan beberapa properti non-pribadi berupa string — misalnya { plan: "trial", role: "owner", onboarded: "false" }. Jika widget mungkin belum dimuat, definisikan dulu stub antrean: window.TutorKit = window.TutorKit || { q: [], identify: function (p) { this.q.push(["identify", p]); } }; lalu panggil window.TutorKit.identify(...). Jangan pernah mengirim nama, email, atau data pribadi lainnya.
   
   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

   Cek perubahan lalu publish

   Buka tampilan kode: seharusnya index.html bertambah satu baris, plus tambahan kecil dari prompt. Lalu klik Publish — widget hanya berfungsi di aplikasi yang dipublikasikan.

   

5. Langkah 05

   Tulis item checklist di Clew

   Di Clew buka Alur → + Alur baru dan pilih Checklist onboarding. Isi Judul checklist, lalu tambahkan 3–5 Item checklist: judul berupa aksi, satu baris penjelasan, dan di URL link halaman tempat tugas dikerjakan. Tidak perlu selector.

   

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	Checklist onboarding
   Di mana ditampilkan (URL halaman)	Bagian berdasarkan prefiks /dashboard
   Kapan ditampilkan	Langsung saat halaman dimuat
   Target audiens	Properti onboarded tidak sama dengan true
   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: checklist onboarding di aplikasi Lovable