Sesuaikan penampilan, perilaku, dan fungsionalitas widget Anda melalui sistem konfigurasi.
Semua pengaturan widget dikelola melalui konfigurasi widget di dasbor Anda. Konfigurasi mencakup pengaturan penampilan, opsi perilaku, dan kustomisasi konten.
Anggaplah konfigurasi sebagai DNA widget Anda—ini mendefinisikan segalanya mulai dari warna dan font hingga alur percakapan dan pesan awal. Bagian terbaik? Perubahan pada konfigurasi Anda berlaku segera tanpa memerlukan perubahan kode di situs web Anda.
🎨 Kustomisasi Langsung
Gunakan editor konfigurasi visual kami di dasbor untuk melihat perubahan Anda secara real-time. Tidak perlu menebak bagaimana warna akan terlihat atau bagaimana tombol akan berperilaku—pratinjau semuanya sebelum menerbitkan.
Penampilan visual sangat penting untuk membuat widget terasa seperti bagian alami dari situs web Anda. Pengaturan penampilan kami memberi Anda kontrol penuh atas setiap aspek visual.
Pilih warna yang cocok dengan identitas merek Anda. Semua nilai warna harus dalam format hex (misalnya, #FF5733).
Tip pro: Gunakan alat pemeriksa kontras warna untuk memastikan teks Anda tetap terbaca di latar belakang yang Anda pilih. Ini sangat penting untuk kepatuhan aksesibilitas.
Di bawah Penampilan Anda dapat mengatur palet warna Terang dan Gelap yang terpisah — setiap mode memiliki preset dan warna masing-masing. Yang mana yang dilihat pengunjung dipilih pada sematan dengan data-theme="light|dark|system" (sistem mengikuti perangkat pengunjung), atau pada waktu berjalan dengan CompaninWidget.setTheme(). Biarkan palet Gelap kosong untuk secara otomatis menurunkannya dari warna Terang Anda.
Ukuran widget Anda dengan tepat untuk kasus penggunaan dan audiens Anda. Dimensi yang lebih besar memberikan lebih banyak konteks percakapan, sementara dimensi yang lebih kecil terasa kurang mengganggu.
Pertimbangan Seluler: Widget secara otomatis menyesuaikan di perangkat seluler, tetapi uji konfigurasi Anda di berbagai ukuran layar untuk memastikan pengalaman yang baik bagi semua pengguna.
Pengaturan perilaku mengontrol bagaimana widget berinteraksi dengan pengguna dan merespons konteks yang berbeda.
⚠️ Rekomendasi
Sebagian besar situs harus memulai dengan widget tertutup (<code>start_open: false</code>) untuk menghindari gangguan. Pengguna yang membutuhkan bantuan akan secara alami mengklik tombol. Untuk halaman bantuan/dukungan khusus, memulai terbuka bisa bermanfaat.
Pesan sambutan adalah hal pertama yang dilihat pengguna saat mereka membuka widget. Buatlah ramah, jelas, dan dapat ditindaklanjuti. Anda dapat menyertakan tombol interaktif untuk membimbing pengguna ke tugas umum.
Pesan sambutan yang baik harus:
Contoh: "Hai! 👋 Saya di sini untuk membantu dengan pertanyaan tentang produk, harga, atau akun kami. Bagaimana saya bisa membantu Anda hari ini?"
<script src="https://widget.companin.tech/widget.js" data-widget-key="YOUR_WIDGET_KEY"></script>Alur percakapan adalah jalur yang telah ditentukan sebelumnya yang membimbing pengguna melalui skenario umum. Mereka sempurna untuk FAQ, pemecahan masalah, atau proses multi-langkah seperti pengembalian atau pemesanan.
Alur dipicu oleh kata kunci tertentu atau klik tombol. Ketika dipicu, mereka menampilkan serangkaian respons dengan tombol tindakan opsional, menciptakan pengalaman percakapan yang terarah tanpa memerlukan pemrosesan AI.
Praktik terbaik untuk alur:
{ "flows": [ { "trigger": "/support", "responses": [ { "text": { "en": "How can we help?" }, "buttons": [ { "label": { "en": "Technical Support" }, "action": "/tech-support" } ] } ] } ]}Konfigurasi teks untuk beberapa bahasa:
Tambahkan CSS kustom untuk gaya lanjutan:
/* Custom widget styles */.companin-widget-container .custom-button { background: linear-gradient(45deg, #ff6b6b, #4ecdc4);}.companin-widget-container .message-bubble { border: 2px solid #ff6b6b;}Konfigurasi endpoint API eksternal untuk fungsionalitas yang ditingkatkan: