Penataan Gaya & Kustomisasi Widget
Kendalikan tampilan widget melalui opsi init atau antarmuka Dashboard.
Preset Ukuran#
Pilih dari tiga preset ukuran bawaan melalui chatSize dan launcherSize:
| chatSize | Jendela Chat |
|---|---|
| compact | 340 x 460 px |
| default | 380 x 520 px |
| large | 420 x 600 px |
launcherSize mengontrol tombol mengambang secara independen dari chatSize:
| launcherSize | Launcher | Ikon |
|---|---|---|
| small | 48 px | 22 px |
| default | 60 px | 28 px |
| large | 68 px | 32 px |
Respondo.init({
agentId: 'YOUR_AGENT_ID',
chatSize: 'large', // jendela chat lebih lebar & lebih tinggi
launcherSize: 'small' // tombol mengambang lebih kecil
});Pemosisian#
Sesuaikan posisi widget dengan offsetBottom dan offsetSide (dalam piksel). Dikombinasikan dengan position (bottom-right atau bottom-left), ini memberikan kendali penuh atas penempatan.
Respondo.init({
agentId: 'YOUR_AGENT_ID',
position: 'bottom-left',
offsetBottom: 40, // 40px dari bawah (default: 20)
offsetSide: 30 // 30px dari tepi kiri (default: 20)
});Radius Sudut & Z-Index#
borderRadius mengontrol pembulatan sudut jendela chat (default: 20px).zIndex mengatur urutan penumpukan (default: 999999).
Respondo.init({
agentId: 'YOUR_AGENT_ID',
borderRadius: 12, // sudut lebih tajam
zIndex: 100000 // z-index lebih rendah untuk menghindari konflik
});CSS Kustom#
Untuk penataan gaya lanjutan di luar opsi bawaan, kirimkan string customCSS. String ini disuntikkan ke Shadow DOM widget — dapat menimpa gaya widget apa pun tetapi tidak dapat memengaruhi halaman Anda.
Respondo.init({
agentId: 'YOUR_AGENT_ID',
customCSS: `
.respondoai-chat {
border-radius: 24px;
box-shadow: 0 12px 48px rgba(0,0,0,0.2);
}
.respondoai-launcher {
box-shadow: none;
border: 2px solid #e5e7eb;
}
.respondoai-header {
backdrop-filter: blur(10px);
}
.respondoai-message.assistant {
background: #f0f9ff;
}
/* Beri gaya pada tombol CTA di dalam kartu pengumuman */
.respondoai-announcement-cta-button {
border-radius: 999px;
font-weight: 600;
letter-spacing: 0.2px;
}
/* Tata tombol CTA pengumuman dalam satu baris alih-alih tumpukan default */
.respondoai-announcement-ctas {
flex-direction: row;
}
`
});CSS kustom berjalan di dalam Shadow DOM — sepenuhnya terisolasi dari gaya halaman Anda. Anda dapat dengan aman menimpa kelas widget apa pun tanpa efek samping.
Kelas CSS yang tersedia:
| Kelas | Elemen |
|---|---|
| .respondoai-widget | Kontainer utama (position, z-index) |
| .respondoai-launcher | Tombol mengambang |
| .respondoai-chat | Jendela chat |
| .respondoai-header | Bilah header chat |
| .respondoai-messages | Kontainer daftar pesan |
| .respondoai-message.user | Gelembung pesan pengguna |
| .respondoai-message.assistant | Gelembung pesan bot |
| .respondoai-input-area | Kontainer bilah input |
| .respondoai-input | Kolom input teks |
| .respondoai-send | Tombol kirim |
| .respondoai-suggestion-btn | Tombol pertanyaan cepat |
| .respondoai-announcement-cta-button | Tombol CTA di dalam kartu pengumuman |
| .respondoai-announcement-ctas | Pembungkus di sekitar tombol CTA dalam kartu pengumuman (tata letak target) |
Anda juga dapat mengonfigurasi semua opsi penataan gaya dari Dashboard — buka Channels → Widget → Appearance. Perubahan yang dibuat di dashboard disajikan ke widget secara otomatis melalui config API.