Paano gumawa ng product tour nang walang developer
Ang product tour ay nagpapakita sa bagong user kung saan ang mga bagay: “dito gumagawa ng project, dito nag-iimbita ng team”. Sa Clew, ini-click ninyo ang mga element sa inyong sariling app, nagsusulat ng isang pangungusap bawat step, at nagpa-publish — walang selector na kailangang pag-aralan, walang code na kailangang i-release.
- Oras
- ● 20 minuto
- Presyo
- Free plan
- Format
- Step-by-step na tooltip
Ano ang product tour ng Clew
Ang product tour (guided tour, walkthrough) ay serye ng tooltip na nakadikit sa mga element ng page. Sa Clew, ito ay ang format na Step-by-step na tooltip: ang bawat step ay tumuturo sa element, may title at text, at pinipindot ng user ang Susunod hanggang Tapos.
Hindi kailangan magsulat ng CSS selector: binubuksan ng I-edit sa iyong site ang editor sa ibabaw ng inyong site, kung saan hinahayaan kayo ng Pumili ng element na i-click ang element mismo. Sinusundan ng tour ang navigation ng single-page app at ipinapakita sa aling step humihinto ang mga user.
Kung saan may pakinabang ang tour
Unang session sa SaaS
Tatlo hanggang limang step sa pangunahing screen, hanggang sa unang aksyong may value. Ang mahahabang tour ay nilalampasan.
Bago o binagong seksyon
Nagbubukas ang mga user ng screen na nagbago: ang maikling tour sa URL na iyon ay nagpapaliwanag ng mga inilipat.
Komplikadong form
Settings, integration, report na may filter: isang tooltip bawat nakalilitong field ay nagbabawas ng support ticket.
Tingnan kung saan humihinto
Ipinapakita ng funnel ilan ang nakakita ng bawat step. Ang step na may malaking drop ay kadalasang tanda ng nakalilitong screen, hindi ng maling tooltip.
Paano gumawa ng product tour sa 5 step
- 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>
Step 1 · eskematikong ilustrasyon - Step 02
Idagdag ang line sa site nang minsan
I-paste ang snippet kung saan pinamamahalaan ninyo ang site. Ang bawat gabay ay 5–10 minuto at hindi kailangang ulitin: ang lahat na iba pa ay ginagawa sa Clew.
Step 2 · eskematikong ilustrasyon - Step 03
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.
Step 3 · eskematikong ilustrasyon - Step 04
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 /app/reportsKailan ipakita Kaagad kapag nag-load ang page Pag-target ng audience Walang rule: lahat na nagbukas sa page Frequency Minsan bawat bisita 
Step 4 · eskematikong ilustrasyon - Step 05
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.
Step 5 · eskematikong ilustrasyon
Step by step: product tour sa inyong platform
Piliin ang platform kung saan ginawa ang inyong site o app. Ang bawat gabay ay may mga step sa pag-install, halimbawang may handang setting, at mga karaniwang problema ng platform na iyon.
Libre ba?
Libre sa Free plan ng Clew, walang card at walang expiry: isang site at hanggang 3 na naka-publish na tour o tooltip. Ang audience rules at A/B test ay nasa Pro.
Mga tanong at sagot
Libre ba ang product tour sa Clew?
Libre. Ang tour at tooltip ay nasa Free plan: isang site, hanggang 3 na naka-publish, walang card at walang expiry. Ang audience rules at A/B test ay nasa Pro.
Kung binago ng mga developer ang page?
Kung nawala ang element, ipinapakita sa tab na Kalusugan ang step na hindi mahanap ito. Hilingin sa mga developer na magdagdag ng data-tour attribute sa mga pangunahing element: ang selector gaya ng [data-tour="create"] ay nabubuhay sa mga redesign.
Ilang step dapat ang tour?
Tatlo hanggang lima. Ipakita ang daan patungo sa unang resulta, hindi ang bawat button. Ang iba ay ilagay sa tooltip sa sariling screen o sa checklist.
Gumagana ba sa React, Vue o Next.js app?
Gumagana. Sinusubaybayan ng widget ang client-side route change, kaya ang tour na naka-bind sa /dashboard ay nagsisimula kapag nag-navigate roon ang user nang walang reload.