Clew

Paano i-set up ang user onboarding gamit ang Qwen Code nang walang developer

Kumpletong flow ng unang session gamit ang Qwen Code — pagbati, ginabayang unang aksyon, getting-started list — mula sa tatlong item ng Clew na sumusunod sa user sa app, sa halip ng isang mahabang tour sa page load.

Oras
● 40 minuto
Presyo
Libre ang tour · ang iba ay 14-araw na trial
Sino ang gagawa
Kayo at ang Qwen Code

Halimbawa: user onboarding gamit ang Qwen Code

Back office na pinapanatili gamit ang Qwen Code. Ang mga bagong manager (role = manager) ay nakakakita ng pagbati sa /admin, tour sa /admin/orders, at checklist ng daily routine sa ikalawang pagbisita.

Libre ang product tour sa Free plan (hanggang 3 na naka-publish). Ang Modal, Checklist at ang audience rules ay bahagi ng Pro: bawat bagong account ay may 14-araw na trial na kasama ang lahat, walang card. Kapag nagtapos ang trial, walang nabubura at patuloy na ipinapakita ang mga naka-publish.

Paano i-set up ang user onboarding gamit ang Qwen Code, 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>
    Buod sa Clew admin na may embed line at nakatagong site key (user onboarding gamit ang Qwen Code)
    Step 1 · eskematikong ilustrasyon
  2. Step 02

    Patakbuhin ang Qwen Code sa project folder

    I-install ang open-source na Qwen Code CLI at patakbuhin ang qwen sa project folder. Binabasa nito ang repository at ine-edit ang mga file pagkatapos ng inyong kumpirmasyon. Ang Qwen Chat sa web ay nagmumungkahi ng code na kayo mismo i-paste.

    Terminal AI assistant session na bukas sa project (user onboarding gamit ang Qwen Code)
    Step 2 · eskematikong ilustrasyon
  3. Step 03

    Ipadala ang prompt gamit ang inyong key

    Palitan ang ILAGAY_ANG_SITE_KEY ng inyong key at ipadala ang 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, base template para server-rendered app) 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.
    AI assistant input na may Clew prompt (user onboarding gamit ang Qwen Code)
    Step 3 · eskematikong ilustrasyon
  4. Step 04

    Kumpirmahin ang mga edit at i-deploy

    Kumpirmahin ang mga edit pagkatapos suriin ang diff, commit, at deploy gaya karaniwan.

    Diff na may isang script line na idinagdag sa root file (user onboarding gamit ang Qwen Code)
    Step 4 · eskematikong ilustrasyon
  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.

    Welcome popup, tooltip ng tour at checklist panel bilang tatlong yugto ng onboarding (user onboarding gamit ang Qwen Code)
    Step 5 · eskematikong ilustrasyon
  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:

    SettingValue
    Welcome popup
    FormatModal window
    Saan ipakita (URL ng page)Exact na path /admin
    Kailan ipakitaKaagad kapag nag-load ang page
    Pag-target ng audienceProperty role ay equal sa manager
    FrequencyMinsan bawat bisita
    Product tour
    FormatStep-by-step na tooltip
    Saan ipakita (URL ng page)Seksyon ayon sa prefix /admin/orders
    Kailan ipakitaKaagad kapag nag-load ang page
    Pag-target ng audienceWalang rule: lahat na nagbukas sa page
    FrequencyMinsan bawat bisita
    Checklist
    FormatOnboarding checklist
    Saan ipakita (URL ng page)Seksyon ayon sa prefix /admin
    Kailan ipakitaSa ika-N na pagbisita: 2
    Pag-target ng audienceWalang rule: lahat na nagbukas sa page
    FrequencyMinsan bawat bisita
    Tour editor ng Clew na may format, URL rule, trigger at audience rule (user onboarding gamit ang Qwen Code)
    Step 6 · eskematikong ilustrasyon
  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.

    Buod sa Clew admin na may berdeng card ng live na widget (user onboarding gamit ang Qwen Code)
    Step 7 · eskematikong ilustrasyon

Mga dapat iwasan: user onboarding gamit ang Qwen Code

Kumpirmahin ang mga edit nang isa-isa

Panatilihin ang default na approval mode para makita ang bawat pagbabago. Kailangan ng user onboarding ang tag, ilang attribute at, kung kailangan, isang identify call — walang iba.

Admin panel sa likod ng login

Gumagana ang URL rule sa anumang path, kasama ang /admin. Buuin ang user onboarding na naka-sign in bilang karaniwang staff, para pinipili ang mga element na nakikita nila.

Hindi dapat lumabas ang pagbati sa mga dating user

Ang “minsan bawat bisita” ay bawat browser: ang dating customer sa bagong laptop ay bagong bisita. Kung kilala ng app ang user, magdagdag ng rule sa property gaya ng onboarded para lampasan ng mga dating user ang pagbati.

Huwag simulan ang lahat sa isang page

Kung ang popup, tour at checklist ay tumutugma sa parehong URL, isa lamang magsisimula at ang iba ay naghihintay. Bigyan ang bawat item ng sariling page o trigger, gaya ng table sa itaas.

Mga tanong at sagot

Angkop ba para staff tool?

Angkop. Gumagana sa likod ng login sa anumang path na may line.

Aling Qwen model ang kailangan?

Sapat ang default na coding model sa Qwen Code; ito ay maliit at malinaw na edit.

Aling bahagi ay libre?

Libre ang tour sa Free plan. Ang welcome popup, checklist at audience rules ay nasa Pro; kasama ang lahat sa 14-araw na trial, walang card.

Gaano katagal?

Mga apatnapung minuto para sa unang bersyon: sampu para popup, dalawampu para tour, sampu para checklist. Pagkatapos, pagbutihin ayon sa funnel.

Isang line sa inyong site — pagkatapos, mga tour, tooltip at checklist nang walang release.

Kunin ang site key nang librePaano gumagana ang ClewLibreng plan habambuhay, walang credit card

Product tours, popups at onboarding sa panahon ng AI

7 pattern na may bilang ng hakbang, tuntunin sa copy at dapat sukatin, ang binabago ng AI, at checklist bago mag-publish. PDF, 2 pahina. Ano ang laman →

Nasa English ang gabay.