Gaya & Penyesuaian Widget
Kawal rupa widget melalui pilihan init atau antara muka Papan Pemuka.
Pratetap Saiz#
Pilih antara tiga pratetap saiz terbina dalam melalui chatSize dan launcherSize:
| chatSize | Tetingkap Sembang |
|---|---|
| compact | 340 x 460 px |
| default | 380 x 520 px |
| large | 420 x 600 px |
launcherSize mengawal butang terapung secara berasingan daripada chatSize:
| launcherSize | Pelancar | Ikon |
|---|---|---|
| small | 48 px | 22 px |
| default | 60 px | 28 px |
| large | 68 px | 32 px |
Respondo.init({
agentId: 'YOUR_AGENT_ID',
chatSize: 'large', // tetingkap sembang lebih lebar & tinggi
launcherSize: 'small' // butang terapung lebih kecil
});Kedudukan#
Perhalusi kedudukan widget dengan offsetBottom dan offsetSide (dalam piksel). Digabungkan dengan position (bottom-right atau bottom-left), ini memberikan kawalan penuh ke atas penempatannya.
Respondo.init({
agentId: 'YOUR_AGENT_ID',
position: 'bottom-left',
offsetBottom: 40, // 40px dari bawah (lalai: 20)
offsetSide: 30 // 30px dari tepi kiri (lalai: 20)
});Jejari Sudut & Z-Index#
borderRadius mengawal kebulatan sudut tetingkap sembang (lalai: 20px).zIndex menetapkan susunan tindanan (lalai: 999999).
Respondo.init({
agentId: 'YOUR_AGENT_ID',
borderRadius: 12, // sudut lebih tajam
zIndex: 100000 // z-index lebih rendah untuk mengelakkan konflik
});CSS Tersuai#
Untuk penggayaan lanjutan di luar pilihan terbina dalam, hantar rentetan customCSS. Ia disuntik ke dalam Shadow DOM widget — ia boleh menimpa sebarang gaya widget tetapi tidak boleh menjejaskan 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;
}
/* Gayakan butang CTA di dalam kad pengumuman */
.respondoai-announcement-cta-button {
border-radius: 999px;
font-weight: 600;
letter-spacing: 0.2px;
}
/* Susun butang CTA pengumuman dalam satu baris, bukan tindanan lalai */
.respondoai-announcement-ctas {
flex-direction: row;
}
`
});Kelas CSS yang tersedia:
| Kelas | Elemen |
|---|---|
| .respondoai-widget | Bekas akar (kedudukan, z-index) |
| .respondoai-launcher | Butang terapung |
| .respondoai-chat | Tetingkap sembang |
| .respondoai-header | Bar pengepala sembang |
| .respondoai-messages | Bekas senarai mesej |
| .respondoai-message.user | Gelembung mesej pengguna |
| .respondoai-message.assistant | Gelembung mesej bot |
| .respondoai-input-area | Bekas bar input |
| .respondoai-input | Medan input teks |
| .respondoai-send | Butang hantar |
| .respondoai-suggestion-btn | Butang soalan pantas |
| .respondoai-announcement-cta-button | Butang CTA di dalam kad pengumuman |
| .respondoai-announcement-ctas | Pembalut butang CTA dalam kad pengumuman (sasaran susun atur) |