Paano magdagdag ng onboarding checklist sa v0 app nang walang developer

Halimbawa: onboarding checklist sa v0 app

Paano magdagdag ng onboarding checklist 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 mga value na ito, tawagin ang Clew.identify() na may ilang non-personal na property bilang string — halimbawa { plan: "trial", role: "owner", onboarded: "false" }. 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(...). Huwag kailanman magpadala ng pangalan, email o iba pang personal na data.
   
   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 mga item ng checklist sa Clew

   Sa Clew buksan ang Mga flow → + Bagong flow at piliin ang Onboarding checklist. Sagutan ang Title ng checklist at magdagdag ng 3–5 Mga item ng checklist: title na isang aksyon, isang line ng paliwanag, at sa URL ng link ang page kung saan ginagawa ito. Hindi kailangan ng selector.

   

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	Onboarding checklist
   Saan ipakita (URL ng page)	Seksyon ayon sa prefix /dashboard
   Kailan ipakita	Kaagad kapag nag-load ang page
   Pag-target ng audience	Property role ay equal sa owner
   Frequency	Minsan bawat bisita

   

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: onboarding checklist sa v0 app