Paano gumawa ng product tour gamit ang ChatGPT Codex nang walang developer

Halimbawa: product tour gamit ang ChatGPT Codex

Paano gumawa ng product tour gamit ang ChatGPT Codex, 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

   Ikonekta ang repository sa Codex

   Sa ChatGPT buksan ang Codex at ikonekta ang GitHub repository ng inyong app (o patakbuhin ang Codex CLI sa project folder). Ang karaniwang ChatGPT chat o canvas ay nagpapakita ng code lamang — hindi binabago ang inyong repository.

   

3. Step 03

   Simulan ang task gamit ang prompt

   Palitan ang ILAGAY_ANG_SITE_KEY ng inyong key at simulan ang Codex task gamit ang prompt sa ibaba.

   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 repository (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, base template para server-rendered app) at idagdag ang tag roon.
   
   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

   Suriin ang pull request at i-merge

   Ibinabalik ng Codex ang pagbabago bilang diff na maaaring buksan bilang pull request. Tiyakin na ang root file at maliit na dagdag lamang ay nabago, i-merge, at hayaang i-deploy ng hosting.

   

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 /board
   Kailan ipakita	Kaagad kapag nag-load ang page
   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 gamit ang ChatGPT Codex