Paano magdagdag ng paywall upgrade prompt sa v0 app nang walang developer

Halimbawa: upgrade prompt sa v0 app

Paano magdagdag ng paywall prompt sa v0 app, 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

   Buksan ang chat ng inyong v0 project

   Buksan ang project sa v0. Gumagawa ang v0 ng Next.js na App Router, kaya ang tamang file ay app/layout.tsx.

   

3. Step 03

   Ipadala ang prompt gamit ang inyong key

   Palitan ang ILAGAY_ANG_SITE_KEY ng inyong key at ipadala ang prompt. Gumagamit ito ng next/script, ang paraan ng Next.js para third-party script.

   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>
   
   Ito ay v0 project na Next.js App Router: sa app/layout.tsx i-import ang Script mula "next/script" at magdagdag ng <Script src="(parehong URL)" strategy="afterInteractive" /> sa loob ng <body>.
   
   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

   Tingnan ang layout.tsx at i-deploy

   Inaasahan ang <Script> element sa app/layout.tsx. Pagkatapos Deploy sa Vercel at buksan ang production URL.

   

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 /dashboard/reports
   Kailan ipakita	Kapag i-click ang element: [data-tour="export-csv"]
   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 sa v0 app