Clew

Paano gumawa ng product tour sa WordPress nang walang developer

Ni · na-update

Isang guided walkthrough sa WordPress sa loob ng mga dalawampung minuto: i-install ang isang line, lakbayin ang inyong sariling interface sa visual editor, at i-publish ang tour na nagsisimula kung saan kailangan ito ng mga bagong user.

Oras
● 20 minuto
Presyo
Free plan
Sino ang gagawa
Administrator ng WordPress

Halimbawa: product tour sa WordPress

Ang online course site sa WordPress na may LMS plugin ay may mga student na nalilito pagkatapos mag-enroll. Sa /courses ipinapakita ng 3-step na tour ang listahan ng lesson, ang “Mark complete” button at kung saan lumalabas ang certificate.

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.

Paano gumawa ng product tour sa WordPress, 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 (product tour sa WordPress)
    Step 1 · eskematikong ilustrasyon
  2. Step 02

    Mag-install ng header code plugin

    Sa Plugins → Add New i-install at i-activate ang libreng plugin na WPCode (o gamitin ang “header scripts” option ng inyong theme). Huwag i-edit ang header.php: pinapalitan ito ng mga update ng theme.

    Mga path sa head code field sa mga popular na CMS, kasama ang WPCode sa WordPress (product tour sa WordPress)
    Step 2 · eskematikong ilustrasyon
  3. Step 03

    I-paste ang line sa Header box

    Buksan ang Code Snippets → Header & Footer, i-paste ang line ng Clew sa Header at i-click ang Save Changes.

    Header code field na may naka-paste na Clew script tag (product tour sa WordPress)
    Step 3 · eskematikong ilustrasyon
  4. Step 04

    I-purge ang cache

    Kung gumagamit ng WP Rocket, LiteSpeed Cache, W3 Total Cache o CDN, i-purge ang cache. Sa “delay JavaScript” setting, i-exclude ang tryclew.io/widget.

    Toolbar ng caching plugin na may naka-highlight na Clear cache (product tour sa WordPress)
    Step 4 · eskematikong ilustrasyon
  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.

    Tooltip ng product tour na tumuturo sa button sa web app, may step dots at Next button (product tour sa WordPress)
    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
    FormatStep-by-step na tooltip
    Saan ipakita (URL ng page)Seksyon ayon sa prefix /courses
    Kailan ipakitaKaagad kapag nag-load ang page
    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 (product tour sa WordPress)
    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 (product tour sa WordPress)
    Step 7 · eskematikong ilustrasyon

Mga dapat iwasan: product tour sa WordPress

Itinatago ng “Delay JavaScript” ang product tour hanggang interaction

Maaaring ipagpaliban ng WP Rocket, LiteSpeed at Perfmatters ang script hanggang unang scroll o click. Huli nagsisimula ang widget, at ang item na Kaagad kapag nag-load ang page ay mukhang sira. Idagdag ang tryclew.io/widget sa exclusions.

Ang mga page para naka-log-in ay kadalasang naiiba

Ang members area (WooCommerce /my-account, LMS course page) ay may ibang markup kaysa nakikita ng anonymous na bisita. Buuin ang mga step na naka-log-in bilang karaniwang member, hindi administrator na may dagdag na toolbar.

Ikabit ang mga step sa element na nakikita ng lahat

Hindi nakikita ng lahat ang banner, personalized na block at A/B test variant. Gamitin ang navigation, heading at pangunahing button; kung nawawala ang element, lumalabas ang step sa Kalusugan.

Mga tanong at sagot

Gumagana ba sa LearnDash o Tutor LMS?

Gumagana. Hindi nag-integrate ang Clew sa plugin; tumuturo sa element ng course page sa browser.

Gumagana ba sa WordPress.com?

Ang plugin gaya ng WPCode ay nangangailangan ng WordPress.com Business plan o mas mataas. Ang self-hosted WordPress ay gumagana sa anumang hosting.

Makikita ba sa wp-admin?

Ang header plugin ay kadalasang nagdadagdag ng code sa public site lamang. Para guide sa loob ng /wp-admin, idagdag ang line gamit ang admin-side snippet (maaaring target ng WPCode ang admin area).

Libre ba ang product tour?

Libre: ang tour ay nasa Free plan na may hanggang 3 na naka-publish. Kailangan ng Pro lamang para audience rules, A/B test at mas maraming tour.

Kailangan ba ng kaalaman sa CSS selector?

Hindi. Binubuksan ng I-edit sa iyong site ang editor sa inyong page at pinupunan ng Pumili ng element ang selector kapag nag-click ng element.

Iba pang maaaring idagdag sa WordPress

Product tour sa iba pang platform

Paano gumawa ng product tour nang walang developerWebsite builder at CMS: gabay sa pag-installPresyo

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.