Popup dan tur di WordPress, Webflow, Shopify, dan builder lain
Butuh popup di toko, tooltip di halaman harga, atau tur untuk member? Setiap builder populer punya kolom kode head untuk seluruh situs: tempel baris Clew di sana sekali, lalu buat setiap format di editor Clew.
- Waktu
- ● 5 menit
- Siapa yang mengerjakan
- Admin situs
- Langkah
- 6
Langkah demi langkah
- Langkah 01
Salin kode Anda dari Clew
Daftar atau masuk ke Clew, lalu buka Admin → Ringkasan. Kartu “Belum ada sinyal dari widget.” menampilkan baris dengan kunci situs asli — klik untuk menyalin.
<!-- 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>
Langkah 1 · ilustrasi skematis - Langkah 02
Temukan kolom kode head untuk seluruh situs
Cari pengaturan bernama Custom code, Code injection, atau Header yang berlaku untuk seluruh situs, bukan satu halaman. Jalur persis untuk tiap platform ada di tabel di bawah.
Langkah 2 · ilustrasi skematis - Langkah 03
Tempel baris ke head
Tempel baris Anda ke kolom head — bukan body, dan bukan di satu halaman saja. Jika sudah ada skrip lain seperti analitik, tambahkan Clew di baris baru; urutannya tidak berpengaruh.
Langkah 3 · ilustrasi skematis - Langkah 04
Simpan dan publikasikan
Simpan pengaturan. Di Webflow, Framer, dan Tilda, kode baru sampai ke situs live setelah situs dipublikasikan ulang; di WordPress, Shopify, Wix, dan Squarespace cukup disimpan.
Langkah 4 · ilustrasi skematis - Langkah 05
Bersihkan cache
Jika situs memakai plugin cache atau CDN (WP Rocket, LiteSpeed Cache, W3 Total Cache, Cloudflare), bersihkan cache agar pengunjung mendapat halaman dengan baris baru. Plugin yang menunda atau menggabungkan JavaScript harus mengecualikan
tryclew.io/widget.
Langkah 5 · ilustrasi skematis - Langkah 06
Pastikan sudah berfungsi
Buka halaman mana saja di situs live dengan jendela browser biasa, lalu kembali ke Admin → Ringkasan di Clew. Dalam satu menit kartunya berubah hijau: “Widget sudah aktif.”
Langkah 6 · ilustrasi skematis
Jalur persis per platform
Nama menu ditulis dalam bahasa Inggris, sama seperti ilustrasinya; jika platform Anda berbahasa Indonesia, jalurnya tetap sama.
| Platform | Tempat menempel | Catatan |
|---|---|---|
| WordPress | Pasang plugin gratis WPCode → Code Snippets → Header & Footer → Header → Save Changes | Atau opsi “header scripts” bawaan tema Anda. Jangan mengedit file tema: pembaruan akan menimpanya. Di WordPress.com, plugin membutuhkan paket Business atau lebih tinggi. |
| Webflow | Site settings → Custom code → Head code → Save, lalu Publish | Kode kustom membutuhkan Site plan berbayar. |
| Shopify | Online Store → Themes → … → Edit code → layout/theme.liquid, tepat sebelum </head> → Save | Berlaku untuk storefront. Ulangi jika berganti tema. |
| Wix | Settings → Custom code → + Add Custom Code → All pages, Load code once, Head → Apply | Membutuhkan paket Premium dan domain yang terhubung. |
| Squarespace | Settings → Developer tools → Code injection (di situs lama: Advanced) → Header → Save | Code injection tidak tersedia di paket termurah. |
| Framer | Site settings → Custom code → End of <head> tag → Save, lalu Publish | Kode kustom membutuhkan paket berbayar. |
| Tilda | Site Settings → More → HTML code for the HEAD section → Edit code → Save, lalu Publish all pages | Membutuhkan paket Personal atau Business. |
| HTML biasa | Sebelum </head> di setiap halaman, atau sekali di file header bersama | Unggah file yang diubah ke hosting. |
Situs marketing atau produk?
Tur paling membantu di dalam produk yang memerlukan login. Jika situs marketing Anda di Webflow tetapi aplikasinya dibangun sendiri, pasang Clew di aplikasi: lihat panduan asisten AI atau Google Tag Manager.
Masalah umum dan FAQ
Bisakah dipasang di beberapa halaman saja?
Pasang di seluruh situs. Halaman mana yang menampilkan tur, dan untuk siapa, diatur di Clew, jadi Anda tidak perlu kembali ke pengaturan situs.
Paket saya tidak punya kolom kode kustom
Webflow, Framer, Wix, dan Squarespace hanya mengizinkan skrip pihak ketiga di paket berbayar, dan tidak ada cara lain yang didukung. Tingkatkan paket situs, atau pasang Clew langsung di produk Anda.
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.
Cara lain untuk memasang
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 →