Popup, product tour at checklist nang walang developer
Nais ba ninyo ng welcome popup, guided tour sa app o onboarding checklist, pero abala ang mga developer? Ang Clew ay isang line sa site na idinadagdag sa paraang ginagamit na ninyo: tag manager, AI coding assistant o website builder. Pagkatapos, ang lahat na format ay ginagawa sa visual editor, walang release.
Ano ang nais ninyong idagdag?
Piliin ang resultang kailangan. Ang bawat page ay nagpapaliwanag kailan tumutulong ang format, paano i-set up ito sa Clew at magkano: direktang kinuha ang presyo mula sa talaan ng mga plan.
Paano magdagdag ng popup sa website nang walang developer
Isang modal window na may inyong alok, anunsyo o tulong — sa tamang page, sa tamang sandali, minsan bawat bisita.
14-araw na free trial, walang cardBuksan ang gabay →Product tourPaano gumawa ng product tour nang walang developer
Mga step-by-step na tooltip na gumagabay sa user sa isang screen: itinuturo ang button, ipinapaliwanag, at tumutuloy sa susunod na step.
Free planBuksan ang gabay →Onboarding checklistPaano magdagdag ng onboarding checklist sa app nang walang developer
Listang may progress sa sulok ng app: mga unang gawain ng bagong user, bawat isa may link sa tamang page.
14-araw na free trial, walang cardBuksan ang gabay →User onboardingPaano i-set up ang user onboarding nang walang developer
Flow ng unang session: welcome popup, maikling tour sa pangunahing screen, at checklist para sa susunod na pagbisita.
Libre ang tour · ang iba ay 14-araw na trialBuksan ang gabay →TooltipPaano magdagdag ng tooltip at hint sa website nang walang developer
Isang hint sa tabi ng field o button — lumalabas kapag nakarating roon ang bisita o kapag i-click.
Free planBuksan ang gabay →Interactive guidePaano gumawa ng interactive product guide nang walang developer
Help checklist na ang mga item ay naglulunsad ng tour sa tamang page — how-to guide sa loob ng produkto.
14-araw na free trial, walang cardBuksan ang gabay →Paywall promptPaano magdagdag ng paywall upgrade prompt nang walang developer
Naka-target na upgrade modal para sa mga free user na nakarating sa paid feature, may link sa inyong sariling pricing page.
14-araw na free trial, walang cardBuksan ang gabay →Piliin ang inyong paraan
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 →No-codeWebsite builder at CMS
WordPress, Webflow, Shopify, Wix, Squarespace, Framer, Tilda o plain HTML: kung saan ang head code field at ang dapat i-click.
Buksan ang gabay →Naka-install na? Subukan kung ano ang tumatalab
Hatiin ang mga bisita sa dalawang bersyon ng tour, tooltip o checklist, at panatilihin ang bersyong mas madalas na tinatapos.
Aling gabay ang para sa inyo
- Ang inyong site ay may Google Tag Manager at kayo ay maaaring mag-publish ditoGoogle Tag Manager →
- Ang app ay ginawa gamit ang Lovable, Bolt.new, v0, Replit, Cursor o Claude CodeAI coding assistant →
- Ang site ay nasa WordPress, Webflow, Shopify, Wix, Squarespace, Framer o TildaWebsite builder at CMS →
Kung saan kukunin ang inyong code
Dito nagsisimula ang bawat gabay. Gumawa ng libreng account, idagdag ang inyong site at buksan ang Admin → Buod. Ang card na “Walang signal mula sa widget pa.” ay nagpapakita ng inyong line — i-click ito para kopyahin.
Ang line ay mukhang tulad nito, pero may inyong key sa halip ng placeholder. Ang key ay public: makikita ito sa HTML ng inyong page anyway.
<!-- 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>
Product tours, popups at onboarding sa panahon ng AI → (PDF, 2 pahina · Nasa English ang gabay.)
Mga karaniwang problema at FAQ
Talaga bang hindi kailangan ng developer?
Hindi kailangan, kung kayo ay may access sa settings ng site, sa GTM container o sa project na ginawa gamit ang AI. Kung custom app ang produkto at walang access ang sinuman sa team, i-click ang Mag-imbita ng developer sa Admin → Buod: naghahanda ito ng email na may eksaktong line at mga instruksyon. Para sa developer, limang minutong trabaho.
Aling paraan ang pinakamainam?
Ang paraan na ginagamit na ninyo. Ang lahat na gabay ay nagdadagdag ng parehong line, at pareho ang takbo ng Clew pagkatapos. Ang direktang pag-install (website builder o AI assistant) ay naglo-load nang kaunting mas maaga kaysa tag manager; nararamdaman lamang ito sa tour na nagsisimula sa sandaling nagbubukas ang page.
Sa marketing site o sa app?
Kung saan naroroon ang mga user na nais ninyong gabayan — karaniwan ang web app na may login. Tumatakbo ang mga tour lamang sa mga page kung saan naka-install ang line.
Kailangan ba ng muling pag-install kapag binago ang mga tour?
Hindi. Hindi nagbabago ang line: ang mga tour, tooltip at checklist ay ginagawa at pina-publish sa editor ng Clew, nang hindi hinahawakan muli ang site.
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.