Estilo at Pagpapasadya ng Widget
Kontrolin ang itsura ng widget sa pamamagitan ng init options o ng Dashboard UI.
Mga Preset ng Sukat#
Pumili sa tatlong nakahandang preset ng sukat gamit ang chatSize at launcherSize:
| chatSize | Bintana ng chat |
|---|---|
| compact | 340 x 460 px |
| default | 380 x 520 px |
| large | 420 x 600 px |
Hiwalay na kinokontrol ng launcherSize ang lumulutang na button, bukod sa chatSize:
| launcherSize | Launcher | Icon |
|---|---|---|
| small | 48 px | 22 px |
| default | 60 px | 28 px |
| large | 68 px | 32 px |
Respondo.init({
agentId: 'YOUR_AGENT_ID',
chatSize: 'large', // mas malapad at mas mataas na chat window
launcherSize: 'small' // mas maliit na lumulutang na button
});Posisyon#
I-fine-tune ang posisyon ng widget gamit ang offsetBottom at offsetSide (sa pixel). Kasama ang position (bottom-right o bottom-left), buo ang kontrol ninyo sa paglalagay nito.
Respondo.init({
agentId: 'YOUR_AGENT_ID',
position: 'bottom-left',
offsetBottom: 40, // 40px mula sa ibaba (default: 20)
offsetSide: 30 // 30px mula sa kaliwang gilid (default: 20)
});Radius ng Sulok at Z-Index#
Kinokontrol ng borderRadius ang pagkabilog ng sulok ng chat window (default: 20px).zIndex ang nagtatakda ng pagkakapatong-patong ng mga elemento (default: 999999).
Respondo.init({
agentId: 'YOUR_AGENT_ID',
borderRadius: 12, // mas matulis na sulok
zIndex: 100000 // mas mababang z-index para maiwasan ang banggaan
});Custom na CSS#
Para sa mas malalim na estilo na wala sa mga nakahandang opsyon, magpasa ng customCSS na string. Ini-inject ito sa Shadow DOM ng widget — kaya nitong i-override ang anumang estilo ng widget pero hindi nito naaapektuhan ang pahina ninyo.
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;
}
/* Estilo ng CTA button sa loob ng announcement card */
.respondoai-announcement-cta-button {
border-radius: 999px;
font-weight: 600;
letter-spacing: 0.2px;
}
/* Ihanay ang mga CTA button ng announcement sa isang hilera sa halip na sa default na salansan */
.respondoai-announcement-ctas {
flex-direction: row;
}
`
});Mga available na CSS class:
| Klase | Elemento |
|---|---|
| .respondoai-widget | Root container (posisyon, z-index) |
| .respondoai-launcher | Lumulutang na button |
| .respondoai-chat | Bintana ng chat |
| .respondoai-header | Header bar ng chat |
| .respondoai-messages | Container ng listahan ng mensahe |
| .respondoai-message.user | Bubble ng mensahe ng user |
| .respondoai-message.assistant | Bubble ng mensahe ng bot |
| .respondoai-input-area | Container ng input bar |
| .respondoai-input | Field ng teksto |
| .respondoai-send | Send button |
| .respondoai-suggestion-btn | Mga button ng mabilisang tanong |
| .respondoai-announcement-cta-button | CTA button sa loob ng announcement card |
| .respondoai-announcement-ctas | Balot sa paligid ng mga CTA button sa announcement card (dito itakda ang layout) |