Stylizacja i personalizacja widgetu
Kontroluj wygląd widgetu za pomocą opcji init lub interfejsu panelu.
Predefiniowane rozmiary#
Wybierz jeden z trzech wbudowanych predefiniowanych rozmiarów za pomocą chatSize i launcherSize:
| chatSize | Okno czatu |
|---|---|
| compact | 340 x 460 px |
| default | 380 x 520 px |
| large | 420 x 600 px |
launcherSize steruje pływającym przyciskiem niezależnie od chatSize:
| launcherSize | Launcher | Ikona |
|---|---|---|
| small | 48 px | 22 px |
| default | 60 px | 28 px |
| large | 68 px | 32 px |
Respondo.init({
agentId: 'YOUR_AGENT_ID',
chatSize: 'large', // szersze i wyższe okno czatu
launcherSize: 'small' // mniejszy pływający przycisk
});Pozycjonowanie#
Dostosuj pozycję widgetu za pomocą offsetBottom i offsetSide (w pikselach). W połączeniu z position (bottom-right lub bottom-left) daje to pełną kontrolę nad umiejscowieniem.
Respondo.init({
agentId: 'YOUR_AGENT_ID',
position: 'bottom-left',
offsetBottom: 40, // 40px od dołu (domyślnie: 20)
offsetSide: 30 // 30px od lewej krawędzi (domyślnie: 20)
});Zaokrąglenie narożników i Z-Index#
borderRadius steruje zaokrągleniem narożników okna czatu (domyślnie: 20px).zIndex ustawia kolejność nakładania (domyślnie: 999999).
Respondo.init({
agentId: 'YOUR_AGENT_ID',
borderRadius: 12, // ostrzejsze narożniki
zIndex: 100000 // niższy z-index, aby uniknąć konfliktów
});Niestandardowy CSS#
Aby uzyskać zaawansowaną stylizację wykraczającą poza wbudowane opcje, przekaż ciąg customCSS. Jest on wstrzykiwany do Shadow DOM widgetu — może nadpisać dowolny styl widgetu, ale nie może wpłynąć na Twoją stronę.
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;
}
/* Stylizacja przycisku CTA wewnątrz kart ogłoszeń */
.respondoai-announcement-cta-button {
border-radius: 999px;
font-weight: 600;
letter-spacing: 0.2px;
}
/* Ułożenie przycisków CTA ogłoszenia w rzędzie zamiast domyślnego stosu */
.respondoai-announcement-ctas {
flex-direction: row;
}
`
});Dostępne klasy CSS:
| Klasa | Element |
|---|---|
| .respondoai-widget | Kontener główny (pozycja, z-index) |
| .respondoai-launcher | Pływający przycisk |
| .respondoai-chat | Okno czatu |
| .respondoai-header | Pasek nagłówka czatu |
| .respondoai-messages | Kontener listy wiadomości |
| .respondoai-message.user | Dymek wiadomości użytkownika |
| .respondoai-message.assistant | Dymek wiadomości bota |
| .respondoai-input-area | Kontener paska wprowadzania |
| .respondoai-input | Pole wprowadzania tekstu |
| .respondoai-send | Przycisk wysyłania |
| .respondoai-suggestion-btn | Przyciski szybkich pytań |
| .respondoai-announcement-cta-button | Przycisk CTA wewnątrz karty ogłoszenia |
| .respondoai-announcement-ctas | Kontener wokół przycisków CTA w karcie ogłoszenia (docelowy układ) |