Cara menyiapkan onboarding pengguna dengan ChatGPT Codex tanpa developer

Contoh: onboarding pengguna dengan ChatGPT Codex

Cara menyiapkan onboarding pengguna dengan ChatGPT Codex, 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

   Hubungkan repositori ke Codex

   Di ChatGPT buka Codex dan hubungkan repositori GitHub aplikasi Anda (atau jalankan Codex CLI di folder proyek). Chat ChatGPT biasa atau canvas hanya menampilkan kode — tidak mengubah repositori Anda.

   

3. Langkah 03

   Mulai task dengan prompt

   Ganti TEMPEL_KUNCI_SITUS_ANDA dengan kunci Anda lalu mulai task Codex dengan prompt di bawah.

   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 repositori 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.
   
   Setelah login, panggil Clew.identify() dengan properti non-pribadi berupa string yang membedakan pengguna baru dari pengguna lama — misalnya { signup_source: "web", onboarded: "false", role: "owner" } — dan ubah onboarded menjadi "true" saat pengguna menyelesaikan aksi utama. 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(...). Tambahkan juga atribut data-tour pada navigasi utama dan tombol utama untuk membuat. Jangan pernah mengirim nama atau email.
   
   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

   Tinjau pull request lalu merge

   Codex mengembalikan perubahan sebagai diff yang bisa Anda buka sebagai pull request. Pastikan hanya file root dan tambahan kecil yang tersentuh, merge, lalu biarkan hosting men-deploy.

   

5. Langkah 05

   Buat tiga item onboarding

   Di Alur buat tiga item: Jendela modal dengan satu kalimat sambutan dan tautan ke layar utama; tur Tooltip langkah demi langkah 3–4 langkah di layar itu, dibuat dengan Edit di situs Anda dan Pilih elemen; serta Checklist onboarding berisi tugas setup yang tersisa.

   

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
   Popup sambutan
   Format	Jendela modal
   Di mana ditampilkan (URL halaman)	Path persis /board
   Kapan ditampilkan	Langsung saat halaman dimuat
   Target audiens	Tanpa aturan: semua yang membuka halaman
   Frekuensi	Sekali per pengunjung
   Tur produk
   Format	Tooltip langkah demi langkah
   Di mana ditampilkan (URL halaman)	Bagian berdasarkan prefiks /board
   Kapan ditampilkan	Saat elemen diklik: [data-tour="new-task"]
   Target audiens	Tanpa aturan: semua yang membuka halaman
   Frekuensi	Sekali per pengunjung
   Checklist
   Format	Checklist onboarding
   Di mana ditampilkan (URL halaman)	Bagian berdasarkan prefiks /board
   Kapan ditampilkan	Pada kunjungan ke-N: 2
   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: onboarding pengguna dengan ChatGPT Codex