Tur dan onboarding di aplikasi buatan AI

Oleh Andrey Davydov · diperbarui 29 September 2026

Membangun aplikasi dengan Lovable, Bolt.new, v0, Replit, Cursor, atau Claude Code dan kini pengguna baru kebingungan? Tempel satu prompt, pastikan hanya satu file yang berubah, lalu publikasikan. Tur, checklist, dan ajakan upgrade dibuat di Clew, bukan dengan prompt tambahan.

Waktu: ● 5 menit
Siapa yang mengerjakan: Anda dan asisten AI Anda
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. Siapkan kunci ini untuk langkah 3.
Langkah 1 · ilustrasi skematis
Langkah 02
Buka proyek dalam mode yang bisa mengedit file
- Claude Code: jalankan claude di folder proyek.
- Cursor: buka chat dalam mode Agent.
- Lovable, Bolt.new, v0: chat proyek.
- Replit: Agent atau Assistant.
Langkah 2 · ilustrasi skematis

Langkah 03

Tempel prompt beserta kunci Anda

Salin prompt, ganti TEMPEL_KUNCI_SITUS_ANDA dengan kunci Anda, lalu kirim. Prompt ini menyebutkan file yang tepat untuk setiap stack, jadi asisten tidak menyebar tag ke berbagai komponen.

Tambahkan widget onboarding Clew ke aplikasi ini.

Sisipkan tag ini persis apa adanya, supaya dimuat sekali di setiap halaman, termasuk setelah perpindahan rute di sisi klien:
<script src="https://tryclew.io/widget/TEMPEL_KUNCI_SITUS_ANDA.js" async></script>

Letaknya (pilih yang sesuai dengan proyek ini):
- HTML biasa, React + Vite, Vue + Vite: index.html, tepat sebelum </head>
- Next.js App Router: app/layout.tsx, dengan next/script: <Script src="(URL yang sama)" strategy="afterInteractive" /> di dalam <body>
- Next.js Pages Router: pages/_app.tsx, dengan komponen next/script yang sama
- Nuxt 3: nuxt.config.ts, app.head.script: [{ src: "(URL yang sama)", async: true }]
- SvelteKit: src/app.html, tepat sebelum %sveltekit.head%
- Astro: <head> di layout bersama
- Lainnya: template HTML root atau layout root yang dirender di semua halaman

Aturan:
- Pakai URL persis seperti di atas. Jangan mengunduh skripnya, jangan memasukkannya ke bundle, dan jangan memasang paket npm.
- Tambahkan di satu tempat saja, jangan di dalam komponen yang dirender ulang.
- Jika proyek memakai Content-Security-Policy, izinkan https://tryclew.io di script-src dan connect-src.
- Jangan ubah apa pun selain itu, lalu tunjukkan diff-nya.

Chat asisten AI berisi prompt pemasangan Clew — Langkah 3 · ilustrasi skematis

Langkah 04
Pastikan hanya satu file yang berubah
Baca diff sebelum menerimanya. Yang diharapkan: satu file dan satu baris tambahan (atau blok kecil <Script> di Next.js) dengan kunci asli Anda. Jika asisten juga mengubah komponen, memasang paket, atau menyalin skrip ke proyek, minta ia membatalkannya dan hanya menyisakan tag.
Langkah 4 · ilustrasi skematis
Langkah 05
Publikasikan atau deploy
Tag hanya berfungsi di aplikasi yang sudah di-deploy. Klik Publish atau Deploy di Lovable, Bolt.new, v0, atau Replit. Di Claude Code atau Cursor, lakukan commit dan push seperti biasa jika hosting Anda melakukan deploy dari git.
Langkah 5 · ilustrasi skematis
Langkah 06
Pastikan sudah berfungsi
Buka aplikasi yang sudah dipublikasikan di jendela browser biasa, lalu kembali ke Admin → Ringkasan di Clew. Dalam satu menit kartunya berubah hijau: “Widget sudah aktif.”
Langkah 6 · ilustrasi skematis

Letak tag di setiap stack

Gunakan tabel ini untuk memeriksa hasil kerja asisten. Ganti placeholder dengan kunci Anda.

Stack	File	Yang ditambahkan
HTML biasa	`index.html` (setiap halaman)	Baris kode sebelum `</head>`
React + Vite, Vue + Vite	`index.html` di root proyek	Baris kode sebelum `</head>`
Next.js App Router	`app/layout.tsx`	`<Script src="https://tryclew.io/widget/TEMPEL_KUNCI_SITUS_ANDA.js" strategy="afterInteractive" />` di dalam `<body>`
Next.js Pages Router	`pages/_app.tsx`	Komponen `<Script>` yang sama
Nuxt 3	`nuxt.config.ts`	Entri `app.head.script` dengan `src` dan `async: true`
SvelteKit	`src/app.html`	Baris kode sebelum `%sveltekit.head%`
Astro	layout bersama	Baris kode di dalam `<head>`

Apa yang biasanya dibuat tiap alat

Proyek Lovable dan Bolt.new umumnya React + Vite, jadi tag masuk ke index.html. v0 membuat Next.js dengan App Router: app/layout.tsx. Di Replit, tergantung template. Dengan Claude Code dan Cursor, asisten membaca repositori Anda dan memilih file dari daftar di prompt.

Masalah umum dan FAQ

Amankah menempelkan kunci situs ke chat AI?

Aman. Kunci situs bukan kata sandi: kunci ini memang publik dan tampil di HTML halaman Anda. Kunci tersebut tidak bisa dipakai untuk mengedit tur atau membaca data Anda.

Asisten memasang paket npm atau menyalin skripnya

Minta asisten membatalkannya. Clew dimuat dari URL-nya sendiri supaya perbaikan dan fitur baru sampai ke aplikasi Anda tanpa build ulang.

Apakah tag tetap ada setelah AI mengedit lagi?

Biasanya ya, karena tag ada di file root. Jika setelah regenerasi besar Admin → Ringkasan tidak lagi menampilkan “Widget sudah aktif”, kirim ulang prompt-nya.

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

Tag manager

Google Tag Manager

Tag Custom HTML di semua halaman, cek di Preview, lalu publikasikan. Untuk situs yang sudah memakai GTM.

Waktu: 10 menit · tanpa developerBuka panduan →Tanpa kode

Website builder & CMS

WordPress, Webflow, Shopify, Wix, Squarespace, Framer, Tilda, atau HTML biasa: letak kolom kode head dan tombol yang perlu diklik.

Waktu: 5 menit · tanpa developerBuka panduan →