Tạo kiểu & tùy biến Widget
Kiểm soát giao diện widget qua các tùy chọn init hoặc giao diện Dashboard.
Các cỡ dựng sẵn#
Chọn một trong ba cỡ dựng sẵn qua chatSize và launcherSize:
| chatSize | Cửa sổ chat |
|---|---|
| compact | 340 x 460 px |
| default | 380 x 520 px |
| large | 420 x 600 px |
launcherSize kiểm soát nút nổi một cách độc lập với chatSize:
| launcherSize | Nút khởi chạy | Biểu tượng |
|---|---|---|
| small | 48 px | 22 px |
| default | 60 px | 28 px |
| large | 68 px | 32 px |
Respondo.init({
agentId: 'YOUR_AGENT_ID',
chatSize: 'large', // cửa sổ chat rộng và cao hơn
launcherSize: 'small' // nút nổi nhỏ hơn
});Định vị#
Tinh chỉnh vị trí widget bằng offsetBottom và offsetSide (tính bằng pixel). Kết hợp với position (bottom-right hoặc bottom-left), điều này cho phép kiểm soát hoàn toàn vị trí đặt.
Respondo.init({
agentId: 'YOUR_AGENT_ID',
position: 'bottom-left',
offsetBottom: 40, // 40px tính từ dưới (mặc định: 20)
offsetSide: 30 // 30px tính từ cạnh trái (mặc định: 20)
});Bo góc & Z-Index#
borderRadius kiểm soát độ bo góc của cửa sổ chat (mặc định: 20px).zIndex đặt thứ tự xếp chồng (mặc định: 999999).
Respondo.init({
agentId: 'YOUR_AGENT_ID',
borderRadius: 12, // góc vuông vắn hơn
zIndex: 100000 // z-index thấp hơn để tránh xung đột
});CSS tùy chỉnh#
Để tạo kiểu nâng cao vượt ra ngoài các tùy chọn dựng sẵn, hãy truyền một chuỗi customCSS. Nó được tiêm vào Shadow DOM của widget — nó có thể ghi đè bất kỳ kiểu nào của widget nhưng không thể ảnh hưởng đến trang của bạn.
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;
}
/* Tạo kiểu nút CTA bên trong thẻ thông báo */
.respondoai-announcement-cta-button {
border-radius: 999px;
font-weight: 600;
letter-spacing: 0.2px;
}
/* Bố trí các nút CTA thông báo thành một hàng thay vì xếp chồng mặc định */
.respondoai-announcement-ctas {
flex-direction: row;
}
`
});CSS tùy chỉnh chạy bên trong Shadow DOM — nó hoàn toàn tách biệt khỏi các kiểu của trang bạn. Bạn có thể an toàn ghi đè bất kỳ lớp widget nào mà không gây tác dụng phụ.
Các lớp CSS khả dụng:
| Lớp | Phần tử |
|---|---|
| .respondoai-widget | Vùng chứa gốc (vị trí, z-index) |
| .respondoai-launcher | Nút nổi |
| .respondoai-chat | Cửa sổ chat |
| .respondoai-header | Thanh tiêu đề chat |
| .respondoai-messages | Vùng chứa danh sách tin nhắn |
| .respondoai-message.user | Bong bóng tin nhắn người dùng |
| .respondoai-message.assistant | Bong bóng tin nhắn bot |
| .respondoai-input-area | Vùng chứa thanh nhập liệu |
| .respondoai-input | Trường nhập văn bản |
| .respondoai-send | Nút gửi |
| .respondoai-suggestion-btn | Nút câu hỏi nhanh |
| .respondoai-announcement-cta-button | Nút CTA bên trong thẻ thông báo |
| .respondoai-announcement-ctas | Bao quanh các nút CTA trong thẻ thông báo (bố cục mục tiêu) |
Bạn cũng có thể cấu hình mọi tùy chọn tạo kiểu từ Dashboard — vào Kênh → Widget → Giao diện. Các thay đổi trong bảng điều khiển được cung cấp cho widget tự động qua config API.