Cara menambahkan paywall upgrade di aplikasi yang dibuat dengan Cursor tanpa developer

Contoh: ajakan upgrade di aplikasi yang dibuat dengan Cursor

Cara menambahkan paywall upgrade di aplikasi yang dibuat dengan Cursor, 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 repositori di Cursor, mode Agent

   Buka folder proyek di Cursor dan chat dalam mode Agent, agar ia bisa mengedit file sendiri.

   

3. Langkah 03

   Kirim prompt dengan kunci Anda

   Ganti TEMPEL_KUNCI_SITUS_ANDA dengan kunci Anda lalu kirim. Cursor membaca repositori dan memilih file root yang tepat dari daftar di 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, src/app.html untuk SvelteKit) lalu tambahkan tag di sana.
   
   Setelah pengguna yang login dimuat, dan setiap kali langganannya berubah, panggil Clew.identify({ plan: <id paket pengguna saat ini sebagai string, misalnya "free"> }). 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 atribut data-tour pada tombol fitur berbayar (misalnya data-tour="export"). Jangan menambahkan logika pembayaran, penguncian, atau paywall sendiri dan jangan mengubah fungsi tombol.
   
   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

   Terima diff, commit, lalu deploy

   Tinjau diff — tag di satu file root plus tambahan kecil dari prompt — lalu terima, commit, dan push. Hosting Anda men-deploy seperti biasa.

   

5. Langkah 05

   Tulis ajakan upgrade

   Di Clew buka Alur → + Alur baru dan pilih Jendela modal. Satu langkah: judul berisi manfaat (“Ekspor ke CSV ada di Pro”), satu kalimat tentang nilainya, dan di Teks link / URL link tombol serta URL halaman harga atau checkout Anda.

   

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	Jendela modal
   Di mana ditampilkan (URL halaman)	Bagian berdasarkan prefiks /deals
   Kapan ditampilkan	Saat elemen diklik: [data-tour="bulk-email"]
   Target audiens	Properti plan sama dengan starter
   Frekuensi	Setiap kunjungan

   

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: paywall upgrade di aplikasi yang dibuat dengan Cursor