Samakan tampilan widget dengan situsmu
Warna, tema, font, dan sudut widget bisa disamakan dengan desain situsmu lewat AI agent atau pindai situs tanpa kode.
Diperbarui
Bagaimana cara menyamakan tampilan widget dengan desain situsku?
Ada dua cara, dua-duanya di Pilih situs → Pengaturan: lewat AI agent (MCP) kalau kamu punya kode situsnya, atau lewat "Pindai situs" kalau situsmu dibuat dengan Wix, Shopify, WordPress, atau builder lain tanpa kode.
Yang disamakan adalah warna, tema, font, dan sudut widget. Domain yang diizinkan, WhatsApp, dan teks bot tidak ikut berubah. Fitur ini ada di semua paket, termasuk Gratis. Pintasannya juga ada di Pilih situs → Widget → Editor, tautan "Samakan otomatis dengan desain situsmu".
Bagaimana cara menghubungkan AI agent seperti Claude Code atau Cursor?
Buka Pilih situs → Pengaturan, kartu "Hubungkan AI agent (MCP)", lalu ikuti tiga langkahnya. Pertama, klik "Buat token" (nama token boleh dikosongkan). Kedua, pasang di agent: untuk Claude Code jalankan perintah ini di folder proyek situsmu, dengan TOKEN_KAMU diganti token dari langkah pertama.
claude mcp add --transport http inwebchatbot https://chatbot.inwebsite.online/api/mcp --header "Authorization: Bearer TOKEN_KAMU"Cursor, Windsurf, dan klien lain memakai config JSON yang disediakan kartu yang sama, tinggal ditambahkan ke config MCP. Ketiga, salin prompt di langkah "Minta agent menyamakan widget" dan tempel ke agent.
Prompt apa yang saya kirim ke AI agent supaya widget disamakan?
Salin prompt dari langkah 3 kartu "Hubungkan AI agent (MCP)" di Pilih situs → Pengaturan, karena prompt itu sudah berisi site ID dan alamat situsmu. Bentuknya seperti ini:
Samakan tampilan widget InWebChatBot situs SITE_ID (https://situsmu.com) dengan desain web di repo ini. Pakai MCP inwebchatbot: baca DESIGN.md atau CSS/Tailwind proyek ini, cek dulu dengan preview_widget_theme, tunjukkan perubahannya, lalu terapkan dengan apply_widget_theme.Di Claude Code ada juga prompt bawaan bernama samakan-widget, dipanggil dengan /mcp__inwebchatbot__samakan-widget. Agent membaca desain dari repomu, menunjukkan perubahan sebelum dan sesudah, baru menerapkannya.
Bagaimana cara membuat atau mencabut token MCP?
Buat token lewat tombol "Buat token" di kartu "Hubungkan AI agent (MCP)", Pilih situs → Pengaturan. Token hanya tampil sekali, jadi salin langsung dengan tombol "Salin token".
- Satu token berlaku untuk semua situs di akunmu, dan hanya bisa mengubah tampilan widget.
- Emailmu harus sudah terverifikasi. Satu akun bisa punya maksimal 10 token aktif.
- Token yang aktif tampil di daftar "Token aktif di akunmu", lengkap dengan waktu dibuat dan terakhir dipakai.
- Untuk mencabut, klik "Cabut" lalu klik lagi saat tombolnya berubah jadi "Klik lagi untuk mencabut". Agent yang memakai token itu langsung tidak bisa mengakses.
Bagaimana cara menyamakan widget tanpa kode dan tanpa AI agent?
Buka Pilih situs → Pengaturan, kartu "Samakan dengan situs (tanpa kode)", lalu klik "Pindai situs". Server membaca halaman depan dan file CSS dari alamat situsmu. Prosesnya beberapa detik, paling lama sekitar 20 detik.
Hasilnya tabel dengan kolom Bagian, Sekarang, dan Jadi untuk Warna, Tema, Font, dan Sudut. Di bawahnya ada asal tiap nilai (ikon info) dan peringatan kalau ada. Kalau hasilnya cocok, klik "Terapkan ke widget". Kalau tidak, klik "Batal". Perubahan yang diterapkan sampai ke situsmu dalam sekitar 1 menit.
Kalau tabelnya kosong dan tertulis "Widget sudah sesuai dengan tampilan situsmu", tidak ada yang perlu diterapkan. Pindai dibatasi 10 kali per jam per akun.
Bagaimana cara membatalkan tampilan widget yang sudah disamakan?
Setelah klik "Terapkan ke widget", tombol "Batalkan perubahan" muncul di kartu "Samakan dengan situs (tanpa kode)" di Pilih situs → Pengaturan. Satu klik mengembalikan tampilan widget seperti sebelum diterapkan.
Kalau penerapannya lewat AI agent, minta agent memanggil revert_widget_theme. Kamu juga bisa mengubah manual warna, tema, font, dan sudut di Pilih situs → Widget → Editor. Kalau Editor sedang terbuka di tab lain, ia membaca ulang tampilan terbaru saat tab itu aktif kembali.
Kenapa hasil pindai situs warnanya meleset?
Pindai situs menebak warna merek dari CSS situsmu, dan tebakannya bisa meleset. Urutannya: variabel warna seperti --primary atau --brand, warna latar tombol, meta theme-color, lalu warna berwarna yang paling sering dipakai. Warna abu-abu tidak pernah dipilih.
Hasil paling sering meleset untuk toko dengan warna netral (hitam atau putih) dan situs yang warnanya dipasang lewat JavaScript. Karena itu hasil selalu ditunjukkan dulu sebelum diterapkan. Teks putih widget harus cukup kontras di atas warna utama, jadi warna yang terlalu terang otomatis digelapkan dan diberi peringatan. Font hanya berlaku kalau situsmu memang memuat font itu.