Popup at tour sa WordPress, Webflow, Shopify at iba pang builder
Nais ba ninyo ng popup sa store, tooltip sa pricing page o tour para sa mga member? Ang bawat popular na builder ay may head code field para sa buong site: i-paste roon ang line ng Clew nang minsan, at gawin ang bawat format sa editor ng Clew.
- Oras
- ● 5 minuto
- Sino ang gagawa
- Admin ng site
- Mga step
- 6
Step by step
- 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.
<!-- 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
Hanapin ang head code field para sa buong site
Maghanap ng setting na tinatawag na Custom code, Code injection o Header para sa buong site, hindi para isang page. Ang eksaktong path para bawat platform ay nasa talahanayan sa ibaba.
Step 2 · eskematikong ilustrasyon - Step 03
I-paste ang line sa head
I-paste ang inyong line sa field para head — hindi sa body, at hindi sa isang page lamang. Kung may ibang script na nakalagay, gaya ng analytics, idagdag ang Clew sa bagong line; hindi mahalaga ang order.
Step 3 · eskematikong ilustrasyon - Step 04
I-save at i-publish
I-save ang setting. Sa Webflow, Framer at Tilda, ang code ay nakakarating sa live na site lamang pagkatapos ng muling pag-publish; sa WordPress, Shopify, Wix at Squarespace, sapat ang pag-save.
Step 4 · eskematikong ilustrasyon - Step 05
I-clear ang cache
Kung gumagamit ang site ng caching plugin o CDN (WP Rocket, LiteSpeed Cache, W3 Total Cache, Cloudflare), i-clear ang cache para makatanggap ang mga bisita ng page na may bagong line. Ang mga plugin na nag-delay o nag-combine ng JavaScript ay dapat i-exclude ang
tryclew.io/widget.
Step 5 · eskematikong ilustrasyon - Step 06
Tiyakin na gumagana
Buksan ang anumang page ng live na site sa karaniwang browser window, at bumalik sa Admin → Buod sa Clew. Sa loob ng isang minuto, luntian ang card: “Live ang widget.”
Step 6 · eskematikong ilustrasyon
Eksaktong path ayon sa platform
| Platform | Kung saan i-paste | Tala |
|---|---|---|
| WordPress | I-install ang libreng plugin na WPCode → Code Snippets → Header & Footer → Header → Save Changes | O ang “header scripts” option ng inyong theme. Huwag i-edit ang mga file ng theme: pinapalitan ito ng mga update. Sa WordPress.com, ang mga plugin ay nangangailangan ng Business plan o mas mataas. |
| Webflow | Site settings → Custom code → Head code → Save, pagkatapos Publish | Ang custom code ay nangangailangan ng paid Site plan. |
| Shopify | Online Store → Themes → … → Edit code → layout/theme.liquid, bago ang </head> → Save | Para sa storefront. Ulitin kapag nagpalit ng theme. |
| Wix | Settings → Custom code → + Add Custom Code → All pages, Load code once, Head → Apply | Nangangailangan ng Premium plan at konektadong domain. |
| Squarespace | Settings → Developer tools → Code injection (sa lumang site: Advanced) → Header → Save | Ang code injection ay hindi available sa pinakamurang plan. |
| Framer | Site settings → Custom code → End of <head> tag → Save, pagkatapos Publish | Ang custom code ay nangangailangan ng paid plan. |
| Tilda | Site Settings → More → HTML code for the HEAD section → Edit code → Save, pagkatapos Publish all pages | Nangangailangan ng Personal o Business plan. |
| Plain HTML | Bago ang </head> sa bawat page, o minsan sa shared header include | I-upload ang binagong mga file sa hosting. |
Marketing site o produkto?
Ang mga tour ay pinakamatulong sa loob ng produkto kung saan naka-login ang mga user. Kung ang marketing site ay nasa Webflow pero custom-built ang app, i-install ang Clew sa app: tingnan ang gabay para AI assistant o ang Google Tag Manager.
Mga karaniwang problema at FAQ
Maaari bang idagdag sa ilang page lamang?
Idagdag sa buong site. Kung aling page, at para kanino, ipinapakita ang tour ay itinatakda sa Clew, kaya hindi kailangang bumalik sa site settings.
Walang custom code field sa aming plan
Ang Webflow, Framer, Wix at Squarespace ay nagpapahintulot ng third-party script lamang sa paid plan, at walang suportadong alternatibo. I-upgrade ang plan, o i-install ang Clew direkta sa produkto.
Ang admin ay nagpapakita pa ng “Walang signal mula sa widget pa.”
Buksan ang isang page ng live na site sa karaniwang browser window at i-reload ang admin pagkalipas ng isang minuto. Kung walang pagbabago: tiyakin na na-publish ang pagbabago, hindi lamang na-save; na pinalitan ang placeholder ng inyong totoong key; at sa developer tools ng browser, tab na Network, hanapin ang widget/…js — dapat 200 ang status. Ang 404 ay nangangahulugang maling key.
Ang aming site ay may Content Security Policy
Dalawang direktiba lang: script-src https://tryclew.io at connect-src https://tryclew.io. Hindi gumagamit ang widget ng eval, blob: URL o worker, at inilalagay nito ang stylesheet sa pamamagitan ng CSSOM sa halip na bilang markup, kaya hindi na kailangan ang style-src 'unsafe-inline' sa Chrome, Edge, Firefox 101+ o Safari 16.4+. Sa mas lumang browser, babalik ito sa <style> element: kung sinusuportahan mo pa ang mga iyon at walang 'unsafe-inline' ang style-src mo, doon lalabas ang mga tour nang walang estilo. Kopyahin ito: Content-Security-Policy: script-src 'self' https://tryclew.io; connect-src 'self' https://tryclew.io;
Puwede bang i-pin ang bersyon ng widget at gumamit ng <code>integrity=</code>?
Oo. Ang linya sa mga gabay — /widget/ILAGAY_ANG_SITE_KEY.js — ay ang rolling na URL: palaging kasalukuyang widget ang ibinibigay nito, kaya hindi ito puwedeng bigyan ng Subresource Integrity hash (nagbabago ang mga byte). Kasama nito, bawat bersyon ay ibinibigay din sa isang hindi nagbabagong address na may hash ng nilalaman. Tanungin ang https://tryclew.io/api/v1/widget-version?site=IYONG_KEY at makukuha mo ang version, path at integrity; ilagay ang dalawa sa tag: <script src="https://tryclew.io/widget/v/<version>/IYONG_KEY.js" integrity="sha384-…" crossorigin="anonymous" async></script>. Hindi nagbabago ang naka-pin na URL, kaya tatanggihan ng browser ang file kung may isang byte na naiba. Ikaw ang magpapasya kung kailan mag-update ng bersyon — tanungin ang parehong endpoint sa deploy script mo. Wala nang ibang nagbabago: ang mga tour ay nananatiling inilalabas sa editor ng Clew nang hindi ginagalaw ang site.
Kinakain ba ng ad blocker ang widget?
Hindi. Wala ang domain namin sa alinman sa malalaking listahan — EasyList, EasyPrivacy, AdGuard, uBlock Origin — kaya lumalabas pa rin ang mga tour, tooltip at checklist sa mga bisitang may blocker. Mas maselan ang estadistika: hinaharangan ng EasyPrivacy ang lahat ng third-party na ping na request, kaya ipinapadala ng widget ang mga event nito bilang karaniwang request, na pinapayagan ng mga listahang iyon. Para lubusang makalayo sa kahit anong pasadyang blocklist, ihain ang widget mula sa sarili mong domain: ituro ang https://iyong-site/clew/* sa https://tryclew.io/* sa CDN o nginx mo at palitan ang linya ng <script src="/clew/widget/IYONG_KEY.js" async></script>. Hihingi na ang widget sa API sa ilalim ng parehong prefix at magiging first-party ang lahat.
Gumagana ba sa single-page app (React, Vue, Next.js)?
Gumagana. I-load ang line nang minsan, sa root HTML o root layout. Sinusundan ng widget ang mga pagbabago ng route sa client (History API at pagbabago ng hash), kaya huwag idagdag ito sa bawat route o i-fire gamit ang “History Change” trigger — ang ikalawang kopya ay binabalewala, pero sayang na trabaho.
Kumusta ang cookie consent banner?
Nagtatago ang Clew ng first-party cookie at mga entry sa localStorage para tandaan kung aling mga tour ang kinumpleto ng bisita at bilangin ang mga pagkumpleto. Walang data na ipinapadala sa mga ad network. Ang inyong privacy policy ang nagpapasya kung maaaring tumakbo ito bago ang consent (halimbawa, ayon sa Data Privacy Act); kung hinaharangan ito ng consent tool hanggang pumayag ang bisita, ang mga tour ay magsisimula pagkatapos ng pagpayag.
Gumagamit kami ng caching o optimization plugin
I-clear ang cache pagkatapos ng pag-install; kung hindi, patuloy na makatatanggap ang mga bisita ng lumang page na walang line. Kung ang plugin ay nag-delay, nag-combine o nag-defer ng JavaScript (WP Rocket, LiteSpeed Cache, Autoptimize, Cloudflare Rocket Loader), i-exclude ang tryclew.io/widget sa mga optimization na iyon.
Mabagal ba ang site dahil dito?
Hindi. Ang line ay may async: dina-download ng browser ang widget nang parallel at pinapatakbo nang hindi hinaharangan ang page. Walang dependency ang widget.
Puwede bang sabihin ng app ko sa Clew na tapos na ang isang hakbang ng onboarding?
Oo, at isang linya lang. Ang item ng checklist ay puwedeng may rule na nagte-tsek nito nang hindi nagki-click ang bisita: isang page na narating niya, isang click sa element na itinuturo mo sa pamamagitan ng CSS selector, o isang event na pinapaputok ng sarili mong code — Clew.complete('invited'), kung saan ang invited ay ang key na isinulat mo katabi ng item sa editor. Tawagin ito sa sandaling talagang tapos na ang bagay, halimbawa pagkatapos kumpirmahin ng API mo ang imbitasyon. Ligtas itong tawagin anumang oras at nagbabalik ng false kapag walang checklist na may ganoong key sa page. Gumagana pa rin ang lumang pangalang TutorKit.
Iba pang paraan ng pag-install
Google Tag Manager
Custom HTML tag sa All Pages, check sa Preview, i-publish. Para sa mga site na gumagamit na ng GTM.
Buksan ang gabay →Vibe codingAI coding assistant
Isang prompt para Claude Code, Cursor, Lovable, Bolt.new, v0 at Replit na naglalagay ng line sa tamang root file.
Buksan ang gabay →