Cara menambahkan paywall upgrade dengan Qwen Code tanpa developer
Soft paywall dengan Qwen Code: saat pengguna gratis mencapai fitur berbayar, modal menjelaskan manfaat upgrade dan menautkan ke halaman harga Anda — ditargetkan per paket, terukur, dan bisa diedit tanpa rilis.
- Waktu
- ● 20 menit
- Harga
- Uji coba gratis 14 hari, tanpa kartu
- Siapa yang mengerjakan
- Anda dan Qwen Code
Contoh: ajakan upgrade dengan Qwen Code
Back office B2B dengan paket Basic. Manajer di paket Basic yang membuka /admin/analytics setiap kali melihat “Analitik penjualan termasuk dalam Advanced”, dengan tautan ke halaman upgrade.
Format ini termasuk dalam paket Pro. Setiap akun baru dimulai dengan uji coba gratis 14 hari dengan semua format dan aturan audiens, tanpa kartu. Setelah uji coba berakhir, tidak ada yang dihapus dan yang sudah dipublikasikan tetap tampil; tur dan tooltip tetap gratis di paket Free.
Cara menambahkan paywall upgrade dengan Qwen Code, langkah demi 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
Jalankan Qwen Code di folder proyek
Pasang CLI open-source Qwen Code lalu jalankan
qwendi folder proyek. CLI ini membaca repositori dan mengedit file setelah Anda konfirmasi. Qwen Chat di web hanya menyarankan kode yang harus Anda tempel sendiri.
Langkah 2 · ilustrasi skematis - Langkah 03
Kirim prompt dengan kunci Anda
Ganti
TEMPEL_KUNCI_SITUS_ANDAdengan 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. 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.
Langkah 3 · ilustrasi skematis - Langkah 04
Konfirmasi perubahan lalu deploy
Konfirmasi perubahan setelah memeriksa diff, commit, lalu deploy seperti biasa.

Langkah 4 · ilustrasi skematis - 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.

Langkah 5 · ilustrasi skematis - 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 /admin/analyticsKapan ditampilkan Langsung saat halaman dimuat Target audiens Properti plansama denganbasicFrekuensi Setiap kunjungan 
Langkah 6 · ilustrasi skematis - 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.

Langkah 7 · ilustrasi skematis
Jebakan umum: paywall upgrade dengan Qwen Code
Konfirmasi perubahan satu per satu
Pertahankan mode persetujuan default agar setiap perubahan terlihat. Paywall upgrade hanya butuh tag, beberapa atribut, dan bila perlu satu panggilan identify — tidak lebih.
Panel admin di balik login
Aturan URL berlaku di path apa pun, termasuk /admin. Susun paywall upgrade saat login sebagai staf biasa agar elemen yang dipilih sama dengan yang mereka lihat.
Ajakan ini tidak menggantikan pemeriksaan akses
Jika fitur berbayar bisa diakses pengguna gratis di aplikasi Anda, modal memang muncul, tetapi fiturnya tetap berjalan di belakangnya. Pastikan server menegakkan paket; ajakan hanyalah pesannya.
Perbarui properti setelah upgrade
Properti tersimpan di browser sampai aplikasi mengirim nilai baru. Panggil Clew.identify({ plan: "pro" }) setelah upgrade berhasil, kalau tidak pelanggan baru tetap melihat ajakan.
Tanya jawab
Bisakah ajakan menautkan ke tim sales, bukan halaman harga?
Bisa — ke URL apa pun, misalnya formulir “Hubungi sales”.
Model Qwen apa yang dibutuhkan?
Model coding default di Qwen Code sudah cukup; ini perubahan kecil yang dijelaskan dengan jelas.
Apakah Clew yang menerima pembayaran?
Tidak. Tombol menautkan ke halaman harga atau checkout milik Anda; Clew tidak pernah menangani kartu, langganan, atau akses.
Apakah paywall upgrade gratis?
Dibutuhkan format modal dan aturan audiens, keduanya di Pro. Uji coba 14 hari sudah mencakupnya, tanpa kartu.
Yang juga bisa ditambahkan dengan Qwen Code
- Cara membuat product tour dengan Qwen Code tanpa developer
- Cara menyiapkan onboarding pengguna dengan Qwen Code tanpa developer
Paywall upgrade di platform lain
- ShopifyCara menambahkan paywall upgrade di Shopify tanpa developer
- Google Tag ManagerCara menambahkan paywall upgrade lewat Google Tag Manager tanpa developer
- LovableCara menambahkan paywall upgrade di aplikasi Lovable tanpa developer
- Bolt.newCara menambahkan paywall upgrade di aplikasi Bolt.new tanpa developer
- v0Cara menambahkan paywall upgrade di aplikasi v0 tanpa developer
- ReplitCara menambahkan paywall upgrade di aplikasi Replit tanpa developer
- CursorCara menambahkan paywall upgrade di aplikasi yang dibuat dengan Cursor tanpa developer
- Claude CodeCara menambahkan paywall upgrade dengan Claude Code tanpa developer
- ChatGPT CodexCara menambahkan paywall upgrade dengan ChatGPT Codex tanpa developer