Widget Stili ve Özelleştirme
Widget görünümünü init seçenekleri veya Dashboard arayüzü aracılığıyla kontrol edin.
Boyut Ön Ayarları#
chatSize ve launcherSize aracılığıyla üç yerleşik boyut ön ayarından birini seçin:
| chatSize | Sohbet Penceresi |
|---|---|
| compact | 340 x 460 px |
| default | 380 x 520 px |
| large | 420 x 600 px |
launcherSize, yüzen düğmeyi chatSize’dan bağımsız olarak kontrol eder:
| launcherSize | Başlatıcı | Simge |
|---|---|---|
| small | 48 px | 22 px |
| default | 60 px | 28 px |
| large | 68 px | 32 px |
Respondo.init({
agentId: 'YOUR_AGENT_ID',
chatSize: 'large', // daha geniş ve daha uzun sohbet penceresi
launcherSize: 'small' // daha küçük yüzen düğme
});Konumlandırma#
Widget konumunu offsetBottom ve offsetSide (piksel cinsinden) ile ince ayarlayın. position (bottom-right veya bottom-left) ile birleştirildiğinde, bu yerleşim üzerinde tam kontrol sağlar.
Respondo.init({
agentId: 'YOUR_AGENT_ID',
position: 'bottom-left',
offsetBottom: 40, // alttan 40px (varsayılan: 20)
offsetSide: 30 // sol kenardan 30px (varsayılan: 20)
});Köşe Yarıçapı ve Z-Index#
borderRadius sohbet penceresinin köşe yuvarlamasını kontrol eder (varsayılan: 20px).zIndex yığın sırasını ayarlar (varsayılan: 999999).
Respondo.init({
agentId: 'YOUR_AGENT_ID',
borderRadius: 12, // daha keskin köşeler
zIndex: 100000 // çakışmaları önlemek için daha düşük z-index
});Özel CSS#
Yerleşik seçeneklerin ötesinde gelişmiş stil için bir customCSS dizesi geçirin. Widget’ın Shadow DOM’una enjekte edilir — herhangi bir widget stilini geçersiz kılabilir ancak sayfanızı etkileyemez.
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;
}
/* Duyuru kartlarındaki CTA düğmesini biçimlendir */
.respondoai-announcement-cta-button {
border-radius: 999px;
font-weight: 600;
letter-spacing: 0.2px;
}
/* Duyuru CTA düğmelerini varsayılan yığın yerine bir satırda yerleştir */
.respondoai-announcement-ctas {
flex-direction: row;
}
`
});Kullanılabilir CSS sınıfları:
| Sınıf | Öğe |
|---|---|
| .respondoai-widget | Kök kapsayıcı (konum, z-index) |
| .respondoai-launcher | Yüzen düğme |
| .respondoai-chat | Sohbet penceresi |
| .respondoai-header | Sohbet başlık çubuğu |
| .respondoai-messages | Mesaj listesi kapsayıcısı |
| .respondoai-message.user | Kullanıcı mesajı balonu |
| .respondoai-message.assistant | Bot mesajı balonu |
| .respondoai-input-area | Giriş çubuğu kapsayıcısı |
| .respondoai-input | Metin giriş alanı |
| .respondoai-send | Gönder düğmesi |
| .respondoai-suggestion-btn | Hızlı soru düğmeleri |
| .respondoai-announcement-cta-button | Duyuru kartındaki CTA düğmesi |
| .respondoai-announcement-ctas | Duyuru kartındaki CTA düğmelerini saran kapsayıcı (hedef yerleşim) |