Paano magdagdag ng paywall upgrade prompt gamit ang Claude Code nang walang developer

Halimbawa: upgrade prompt gamit ang Claude Code

Paano magdagdag ng paywall prompt gamit ang Claude Code, step by step

1. Step 01

   Kopyahin ang inyong Clew snippet

   Gumawa ng libreng account (o mag-sign in), idagdag ang inyong site at buksan ang Buod sa admin. I-click ang line sa card na Walang signal mula sa widget pa. para kopyahin: nasa loob na ang tunay na site key sa halip ng placeholder.

   <!-- Clew: palitan ang ILAGAY_ANG_SITE_KEY ng site key mula sa Admin > Buod -->
   <script src="https://tryclew.io/widget/ILAGAY_ANG_SITE_KEY.js" async></script>

   Kopyahin

   

2. Step 02

   Simulan ang Claude Code sa project

   Patakbuhin ang claude sa project folder (o buksan ang Claude Code sa inyong IDE). Gumagana ito sa inyong tunay na repository at nagtatanong bago i-edit ang mga file.

   

3. Step 03

   Ipadala ang prompt gamit ang inyong key

   Palitan ang ILAGAY_ANG_SITE_KEY ng inyong key at ipadala ang prompt.

   Idagdag ang Clew onboarding widget sa app na ito.
   
   Ilagay ang tag na ito nang eksakto at minsan, para maglo-load sa bawat page, kasama pagkatapos ng client-side route change:
   <script src="https://tryclew.io/widget/ILAGAY_ANG_SITE_KEY.js" async></script>
   
   Hanapin ang root HTML file o root layout ng project (index.html para Vite, app/layout.tsx na may next/script para Next.js App Router, app.head.script sa nuxt.config.ts para Nuxt, src/app.html para SvelteKit, base template para server-rendered app) at idagdag ang tag roon.
   
   Kapag naka-load ang naka-sign-in na user, at tuwing nagbabago ang subscription, tawagin ang Clew.identify({ plan: <id ng kasalukuyang plan ng user bilang string, hal. "free"> }). Kung posible na hindi pa naka-load ang widget, i-define ang queue stub: window.TutorKit = window.TutorKit || { q: [], identify: function (p) { this.q.push(["identify", p]); } }; at tawagin ang window.TutorKit.identify(...). Magdagdag ng data-tour attribute sa mga button ng paid feature (halimbawa data-tour="export"). Huwag magdagdag ng sariling payment, gating o paywall logic at huwag baguhin ang ginagawa ng mga button.
   
   Mga patakaran:
   - Gamitin ang URL ng script nang eksakto. Huwag i-download, i-bundle o mag-install ng npm package.
   - Kung may Content-Security-Policy ang project, payagan ang https://tryclew.io sa script-src at connect-src.
   - Huwag baguhin ang anumang iba pa at ipakita ang diff.

   Kopyahin

   

4. Step 04

   Aprubahan ang mga edit at i-ship

   Aprubahan ang mga iminungkahing edit pagkatapos basahin, pagkatapos commit at deploy gaya karaniwan — o hilingin sa Claude Code na magbukas ng pull request.

   

5. Step 05

   Isulat ang upgrade prompt

   Sa Clew buksan ang Mga flow → + Bagong flow at piliin ang Modal window. Isang step: title na may benepisyo (“Ang Export to CSV ay nasa Pro”), isang pangungusap ng value, at sa Text ng link / URL ng link ang button at URL ng inyong pricing o checkout page.

   

6. Step 06

   Piliin kung saan, kailan at para kanino ipapakita

   Sa parehong editor, sagutan ang Saan ipakita (URL ng page), Kailan ipakita, Pag-target ng audience at Frequency. Ito ang mga setting ng halimbawa sa itaas:

   Setting	Value
   Format	Modal window
   Saan ipakita (URL ng page)	Seksyon ayon sa prefix /invoices
   Kailan ipakita	Kapag i-click ang element: [data-tour="recurring"]
   Pag-target ng audience	Property plan ay equal sa free
   Frequency	Bawat pagbisita

   

7. Step 07

   I-publish at tingnan sa live na site

   Itakda ang Status sa Naka-publish at i-save. Buksan ang page sa private window: tinatandaan ng Clew kung sino ang nakakita na ng item na “minsan”, kaya maaaring hindi ito ipakita sa inyong karaniwang browser. Ang mga view, completion at drop-off ay nasa stats.

   

Mga dapat iwasan: paywall upgrade prompt gamit ang Claude Code