Tour at onboarding sa app na ginawa gamit ang AI

Step by step

1. Step 01

   Kopyahin ang inyong code mula sa Clew

   Mag-sign up o mag-sign in sa Clew at buksan ang Admin → Buod. Ang card na “Walang signal mula sa widget pa.” ay nagpapakita ng line na may totoong site key — i-click para kopyahin. Ihanda ang key para step 3.

   

2. Step 02

   Buksan ang project sa mode na nag-e-edit ng file

   • Claude Code: patakbuhin ang claude sa folder ng project.
   • Cursor: buksan ang chat sa Agent mode.
   • Lovable, Bolt.new, v0: ang chat ng project.
   • Replit: Agent o Assistant.

   

3. Step 03

   I-paste ang prompt na may inyong key

   Kopyahin ang prompt, palitan ang ILAGAY_ANG_SITE_KEY ng inyong key at ipadala. Ang prompt ay nakasulat sa English, na pinakamahusay na naiintindihan ng mga coding assistant, at nagsasabi ng tamang file para bawat stack — kaya hindi ikakalat ng assistant ang tag sa mga component.

   Add the Clew onboarding widget to this app.
   
   Insert this exact tag so it loads once on every page, including after client-side route changes:
   <script src="https://tryclew.io/widget/ILAGAY_ANG_SITE_KEY.js" async></script>
   
   Where to put it (pick what matches this project):
   - Plain HTML, React + Vite, Vue + Vite: index.html, right before </head>
   - Next.js App Router: app/layout.tsx, with next/script: <Script src="(same URL)" strategy="afterInteractive" /> inside <body>
   - Next.js Pages Router: pages/_app.tsx, the same next/script component
   - Nuxt 3: nuxt.config.ts, app.head.script: [{ src: "(same URL)", async: true }]
   - SvelteKit: src/app.html, right before %sveltekit.head%
   - Astro: the <head> of the shared layout
   - Anything else: the root HTML template or root layout rendered on every page
   
   Rules:
   - Use the URL exactly as given. Do not download the script, bundle it or install an npm package.
   - Add it in one place only, never inside a component that re-renders.
   - If the project sets a Content-Security-Policy, allow https://tryclew.io in script-src and connect-src.
   - Change nothing else, then show me the diff.

   Kopyahin

   

4. Step 04

   Tiyakin na isang file ang nabago

   Basahin ang diff bago i-accept. Inaasahan: isang file at isang idinagdag na line (o maliit na <Script> block sa Next.js) na may inyong totoong key. Kung ang assistant ay nag-edit ng component, nag-install ng package o kinopya ang script sa project, hilingin na i-undo at iwan lamang ang tag.

   

5. Step 05

   I-publish o i-deploy

   Gumagana ang tag lamang sa deployed na app. I-click ang Publish o Deploy sa Lovable, Bolt.new, v0 o Replit. Sa Claude Code o Cursor, mag-commit at mag-push gaya ng dati kung ang hosting ay nag-deploy mula sa git.

   

6. Step 06

   Tiyakin na gumagana

   Buksan ang na-publish na app sa karaniwang browser window, at bumalik sa Admin → Buod sa Clew. Sa loob ng isang minuto, luntian ang card: “Live ang widget.”

   

Kung saan inilalagay ang tag sa bawat stack

Mga karaniwang problema at FAQ

Iba pang paraan ng pag-install