Popup, tur produk, dan checklist tanpa developer
Ingin popup sambutan, tur terpandu di aplikasi, atau checklist onboarding, tetapi developer sedang sibuk? Clew hanyalah satu baris di situs yang Anda pasang dengan cara yang sudah biasa Anda pakai: tag manager, asisten AI, atau website builder. Setelah itu, semua format dibuat di editor visual, tanpa rilis.
Apa yang ingin Anda tambahkan?
Pilih hasil yang Anda butuhkan. Setiap halaman menjelaskan kapan format itu membantu, cara mengaturnya di Clew, dan berapa biayanya: harga diambil langsung dari tabel paket.
Cara menambahkan popup ke website tanpa developer
Jendela modal berisi penawaran, pengumuman, atau bantuan, di halaman yang tepat, pada saat yang tepat, sekali per pengunjung.
Uji coba gratis 14 hari, tanpa kartuBuka panduan →Product tourCara membuat product tour tanpa developer
Tooltip langkah demi langkah yang memandu pengguna di satu layar: menunjuk tombol, menjelaskan, lalu lanjut ke langkah berikutnya.
Paket FreeBuka panduan →Checklist onboardingCara menambahkan checklist onboarding ke aplikasi tanpa developer
Daftar dengan progres di pojok aplikasi: tugas pertama pengguna baru, masing-masing dengan tautan ke halaman yang tepat.
Uji coba gratis 14 hari, tanpa kartuBuka panduan →Onboarding penggunaCara menyiapkan onboarding pengguna tanpa developer
Alur sesi pertama: popup sambutan, tur singkat di layar utama, dan checklist untuk kunjungan berikutnya.
Tur gratis · sisanya uji coba 14 hariBuka panduan →TooltipCara menambahkan tooltip dan petunjuk ke website tanpa developer
Satu petunjuk di samping kolom atau tombol, yang muncul saat pengunjung sampai di sana atau saat diklik.
Paket FreeBuka panduan →Panduan interaktifCara membuat panduan produk interaktif tanpa developer
Checklist bantuan yang itemnya meluncurkan tur di halaman yang tepat — panduan “cara melakukan” di dalam produk.
Uji coba gratis 14 hari, tanpa kartuBuka panduan →Paywall upgradeCara menambahkan paywall upgrade tanpa developer
Modal upgrade bertarget untuk pengguna gratis yang mencapai fitur berbayar, dengan tautan ke halaman harga milik Anda.
Uji coba gratis 14 hari, tanpa kartuBuka panduan →Pilih cara Anda
Google Tag Manager
Tag Custom HTML di semua halaman, cek di Preview, lalu publikasikan. Untuk situs yang sudah memakai GTM.
Buka panduan →Vibe codingAsisten coding AI
Satu prompt untuk Claude Code, Cursor, Lovable, Bolt.new, v0, dan Replit yang menaruh baris kode di file root yang tepat.
Buka panduan →Tanpa kodeWebsite builder & CMS
WordPress, Webflow, Shopify, Wix, Squarespace, Framer, Tilda, atau HTML biasa: letak kolom kode head dan tombol yang perlu diklik.
Buka panduan →Sudah terpasang? Sekarang uji mana yang berhasil
Bagi pengunjung ke dua versi tur, tooltip, atau checklist, lalu pertahankan versi yang lebih sering diselesaikan.
Panduan mana yang cocok
- Situs Anda sudah memakai Google Tag Manager dan Anda bisa memublikasikan di sanaGoogle Tag Manager →
- Aplikasi Anda dibuat dengan Lovable, Bolt.new, v0, Replit, Cursor, atau Claude CodeAsisten coding AI →
- Situs berjalan di WordPress, Webflow, Shopify, Wix, Squarespace, Framer, atau TildaWebsite builder & CMS →
Tempat mendapatkan kode Anda
Semua panduan dimulai dari sini. Buat akun gratis, tambahkan situs Anda, dan buka Admin → Ringkasan. Kartu “Belum ada sinyal dari widget.” menampilkan baris milik Anda — klik untuk menyalinnya.
Barisnya seperti ini, hanya saja berisi kunci Anda, bukan placeholder. Kunci ini memang publik: toh kunci itu akan tampil di HTML halaman Anda.
<!-- Clew: ganti TEMPEL_KUNCI_SITUS_ANDA dengan kunci situs dari Admin > Ringkasan --> <script src="https://tryclew.io/widget/TEMPEL_KUNCI_SITUS_ANDA.js" async></script>
Product tour, popup, dan onboarding di era AI → (PDF, 2 halaman · Panduannya dalam bahasa Inggris.)
Masalah umum dan FAQ
Apakah benar-benar tidak perlu developer?
Tidak perlu, selama Anda bisa mengubah pengaturan situs, container GTM, atau proyek yang dibuat dengan AI. Jika produk Anda aplikasi custom dan tidak ada anggota tim yang punya akses, klik Undang developer di Admin → Ringkasan: Clew menyiapkan email berisi baris kode dan instruksinya. Bagi developer, ini pekerjaan lima menit.
Cara mana yang terbaik?
Cara yang sudah Anda pakai. Semua panduan menambahkan baris yang sama, dan setelahnya Clew bekerja sama persis. Pemasangan langsung (website builder atau asisten AI) dimuat sedikit lebih awal dibanding tag manager; bedanya hanya terasa pada tur yang dimulai tepat saat halaman terbuka.
Dipasang di situs marketing atau di aplikasi?
Di tempat pengguna yang ingin Anda pandu berada — biasanya aplikasi web yang memerlukan login. Tur hanya berjalan di halaman yang memuat baris tersebut.
Apakah harus pasang ulang saat tur diubah?
Tidak. Barisnya tidak pernah berubah: tur, tooltip, dan checklist dibuat dan dipublikasikan di editor Clew tanpa menyentuh situs lagi.
Admin masih menampilkan “Belum ada sinyal dari widget.”
Buka salah satu halaman situs yang sudah live di jendela browser biasa, lalu muat ulang admin setelah satu menit. Jika tidak berubah: pastikan perubahan sudah dipublikasikan, bukan hanya disimpan; placeholder sudah diganti dengan kunci asli; lalu di developer tools browser, tab Network, cari widget/…js — statusnya harus 200. Status 404 berarti kuncinya salah.
Situs saya memakai Content Security Policy
Dua direktif, tidak lebih: script-src https://tryclew.io dan connect-src https://tryclew.io. Widget tidak memakai eval, URL blob:, maupun worker, dan memasang stylesheet-nya lewat CSSOM alih-alih sebagai markup, jadi style-src 'unsafe-inline' tidak diperlukan di Chrome, Edge, Firefox 101+, atau Safari 16.4+. Browser lama memakai elemen <style> sebagai cadangan: kalau Anda masih mendukungnya dan style-src Anda tanpa 'unsafe-inline', di sana tur tampil tanpa gaya. Siap salin: Content-Security-Policy: script-src 'self' https://tryclew.io; connect-src 'self' https://tryclew.io;
Bisakah saya mengunci versi widget dan memakai <code>integrity=</code>?
Bisa. Baris di panduan — /widget/TEMPEL_KUNCI_SITUS_ANDA.js — bersifat bergulir: selalu menyajikan widget terkini, sehingga tidak bisa membawa hash Subresource Integrity (byte-nya berubah). Di sampingnya, setiap versi juga disajikan di alamat permanen dengan hash konten. Panggil https://tryclew.io/api/v1/widget-version?site=KUNCI_ANDA dan Anda mendapat version, path serta integrity; pasang keduanya di tag: <script src="https://tryclew.io/widget/v/<versi>/KUNCI_ANDA.js" integrity="sha384-…" crossorigin="anonymous" async></script>. URL yang dikunci tidak pernah berubah, jadi browser menolak berkas itu bila satu byte pun berbeda. Versinya Anda perbarui kapan Anda mau — panggil endpoint yang sama dari skrip deploy. Selain itu tidak ada yang berubah: tur tetap dipublikasikan dari editor Clew tanpa menyentuh situs.
Apakah pemblokir iklan menelan widget-nya?
Tidak. Domain kami tidak ada di daftar besar mana pun — EasyList, EasyPrivacy, AdGuard, uBlock Origin — jadi tur, tooltip, dan checklist tetap muncul untuk pengunjung yang memakai pemblokir. Yang peka adalah statistik: EasyPrivacy memblokir semua permintaan ping pihak ketiga, karena itu widget mengirim event-nya sebagai permintaan biasa, yang dilewatkan daftar-daftar tersebut. Agar benar-benar lepas dari daftar khusus buatan siapa pun, sajikan widget dari domain Anda sendiri: arahkan https://situs-anda/clew/* ke https://tryclew.io/* di CDN atau nginx, lalu ganti barisnya menjadi <script src="/clew/widget/KUNCI_ANDA.js" async></script>. Widget kemudian memanggil API dengan prefiks yang sama dan semuanya menjadi first-party.
Apakah berfungsi di single-page app (React, Vue, Next.js)?
Ya. Muat baris ini sekali saja, di HTML root atau layout root. Widget mengikuti sendiri perpindahan rute di sisi klien (History API dan perubahan hash), jadi jangan menambahkannya per rute atau memicunya dengan trigger “History Change” — salinan kedua akan diabaikan, tetapi tetap membuang sumber daya.
Bagaimana dengan banner persetujuan cookie?
Clew menyimpan cookie pihak pertama dan data di localStorage untuk mengingat tur mana yang sudah diselesaikan pengunjung dan menghitung penyelesaiannya. Tidak ada data yang dikirim ke jaringan iklan. Boleh tidaknya widget berjalan sebelum persetujuan ditentukan oleh kebijakan privasi Anda; jika alat persetujuan memblokirnya sampai pengunjung setuju, tur akan mulai setelah persetujuan diberikan.
Saya memakai plugin cache atau optimasi
Bersihkan cache setelah memasang; jika tidak, pengunjung tetap mendapat halaman lama tanpa baris tersebut. Jika plugin menunda, menggabungkan, atau mengakhirkan JavaScript (WP Rocket, LiteSpeed Cache, Autoptimize, Cloudflare Rocket Loader), kecualikan tryclew.io/widget dari optimasi tersebut.
Apakah situs jadi lebih lambat?
Tidak. Baris ini memakai async: browser mengunduh widget secara paralel dan menjalankannya tanpa memblokir halaman. Widget tidak memiliki dependensi.
Bisakah aplikasi saya memberi tahu Clew bahwa satu langkah onboarding selesai?
Bisa, dan cukup satu baris. Item checklist dapat memiliki aturan yang mencentangnya tanpa pengunjung mengeklik apa pun: halaman yang ia buka, klik pada elemen yang Anda tentukan dengan selektor CSS, atau event yang dipicu kode Anda sendiri — Clew.complete('invited'), dengan invited sebagai kunci yang Anda tulis di sebelah item itu di editor. Panggil saat tugasnya benar-benar selesai, misalnya setelah API Anda mengonfirmasi undangan. Aman dipanggil kapan saja dan mengembalikan false bila tidak ada checklist dengan kunci itu di halaman. Nama lama TutorKit tetap berfungsi.