Clew

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.

Yang dilakukan dan tidak dilakukan Clew. Clew menampilkan ajakan upgrade — modal berisi teks Anda dan tautan ke halaman harga atau checkout milik Anda sendiri — kepada pengguna yang dipilih oleh aturan Anda. Clew tidak menerima pembayaran, tidak mengelola langganan, dan tidak menyembunyikan atau mengunci konten: aplikasi Anda yang menentukan akses, penyedia pembayaran Anda yang menagih.

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

  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>
    Ringkasan di admin Clew dengan baris embed dan kunci situs yang disamarkan (paywall upgrade dengan Qwen Code)
    Langkah 1 · ilustrasi skematis
  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.

    Sesi asisten AI di terminal yang dibuka di sebuah proyek (paywall upgrade dengan Qwen Code)
    Langkah 2 · ilustrasi skematis
  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.
    
    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.
    Kolom asisten AI dengan prompt Clew (paywall upgrade dengan Qwen Code)
    Langkah 3 · ilustrasi skematis
  4. Langkah 04

    Konfirmasi perubahan lalu deploy

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

    Diff dengan satu baris skrip ditambahkan ke file root (paywall upgrade dengan Qwen Code)
    Langkah 4 · ilustrasi skematis
  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.

    Modal ajakan upgrade di atas aplikasi web, dengan judul manfaat dan tombol tautan ke halaman harga (paywall upgrade dengan Qwen Code)
    Langkah 5 · ilustrasi skematis
  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:

    PengaturanNilai
    FormatJendela modal
    Di mana ditampilkan (URL halaman)Bagian berdasarkan prefiks /admin/analytics
    Kapan ditampilkanLangsung saat halaman dimuat
    Target audiensProperti plan sama dengan basic
    FrekuensiSetiap kunjungan
    Editor tur Clew dengan format, aturan URL, pemicu, dan aturan audiens (paywall upgrade dengan Qwen Code)
    Langkah 6 · ilustrasi skematis
  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.

    Ringkasan di admin Clew dengan kartu hijau widget aktif (paywall upgrade dengan Qwen Code)
    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.

Satu baris di situs Anda — lalu tur, tooltip, dan checklist tanpa rilis.

Dapatkan kunci situs gratisCara kerja ClewPaket gratis selamanya, tanpa kartu kredit

Product tour, popup, dan onboarding di era AI

7 pola lengkap dengan jumlah langkah, aturan teks, dan metrik, apa yang diubah AI, serta checklist sebelum terbit. PDF, 2 halaman. Isi panduan →

Panduannya dalam bahasa Inggris.