Paano gumawa ng product tour sa v0 app nang walang developer

Halimbawa: product tour sa v0 app

Paano gumawa ng product tour 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>.
   
   Magdagdag din ng stable na data-tour attribute sa mga element na tutukuyin ng product tour: main navigation, pangunahing create/add button, pangunahing filter o search, at page heading — halimbawa data-tour="create-button". Huwag baguhin ang kanilang style, text o behavior.
   
   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

   Buuin ang tour sa ibabaw ng inyong page

   Sa Clew buksan ang Mga flow → + Bagong flow, iwan ang Format sa Step-by-step na tooltip at i-click ang I-edit sa iyong site. Sa inyong page i-click ang Pumili ng element, i-click ang element para step 1, at magsulat ng title at isa o dalawang pangungusap. Ulitin para 3–5 step; nag-a-update ang preview habang nagtitipa.

   

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	Step-by-step na tooltip
   Saan ipakita (URL ng page)	Seksyon ayon sa prefix /dashboard/analytics
   Kailan ipakita	Pagkatapos ng N segundo: 2 segundo
   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: product tour sa v0 app