Paano i-set up ang user onboarding sa app na ginawa gamit ang Cursor nang walang developer

Halimbawa: user onboarding sa app na ginawa gamit ang Cursor

Paano i-set up ang user onboarding sa app na ginawa gamit ang Cursor, 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 repository sa Cursor, Agent mode

   Buksan ang project folder sa Cursor at ang chat sa Agent mode, para kusang i-edit nito ang mga file.

   

3. Step 03

   Ipadala ang prompt gamit ang inyong key

   Palitan ang ILAGAY_ANG_SITE_KEY ng inyong key at ipadala. Binabasa ng Cursor ang repository at pinipili ang tamang root file mula sa listahan sa 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) at idagdag ang tag roon.
   
   Pagkatapos ng sign-in, tawagin ang Clew.identify() na may non-personal na property bilang string na nag-iiba ng bagong user mula sa dati — halimbawa { signup_source: "web", onboarded: "false", role: "owner" } — at i-update ang onboarded sa "true" kapag tinapos ng user ang pangunahing aksyon. 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 din ng data-tour attribute sa main navigation at pangunahing create button. Huwag kailanman magpadala ng pangalan o email.
   
   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

   Tanggapin ang diff, commit at deploy

   Suriin ang diff — ang tag sa isang root file plus maliit na dagdag mula sa prompt — tanggapin, commit at push. Karaniwang dine-deploy ng inyong hosting.

   

5. Step 05

   Gawin ang tatlong item ng onboarding

   Sa Mga flow gumawa ng tatlong item: Modal window na may isang pangungusap na pagbati at link sa pangunahing screen; Step-by-step na tooltip tour na 3–4 step sa screen na iyon, ginawa gamit ang I-edit sa iyong site at Pumili ng element; at Onboarding checklist na may natitirang setup na gawain.

   

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
   Welcome popup
   Format	Modal window
   Saan ipakita (URL ng page)	Exact na path /deals
   Kailan ipakita	Kaagad kapag nag-load ang page
   Pag-target ng audience	Property role ay equal sa sales_rep
   Frequency	Minsan bawat bisita
   Product tour
   Format	Step-by-step na tooltip
   Saan ipakita (URL ng page)	Seksyon ayon sa prefix /deals/pipeline
   Kailan ipakita	Kaagad kapag nag-load ang page
   Pag-target ng audience	Walang rule: lahat na nagbukas sa page
   Frequency	Minsan bawat bisita
   Checklist
   Format	Onboarding checklist
   Saan ipakita (URL ng page)	Seksyon ayon sa prefix /deals
   Kailan ipakita	Sa ika-N na pagbisita: 2
   Pag-target ng audience	Walang rule: lahat na nagbukas sa page
   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: user onboarding sa app na ginawa gamit ang Cursor