Dostosowywanie widgetu
Dopasuj widget czatu do swojej marki i spraw, by zachowywał się dokładnie tak, jak chcesz. Wszystkie zmiany wykonuje się w panelu — modyfikacje stosowane są automatycznie na Twojej stronie, bez konieczności edycji kodu embed.
Ustawienia znajdziesz w Dashboard → Chatbots → wybierz swojego chatbota:
- Zakładka Widget kontroluje wygląd (pozycja, kolory, rozmiar, teksty)
- Zakładka Behavior kontroluje sposób, w jaki widget wchodzi w interakcję z odwiedzającymi
Kliknij Save Changes u góry strony, aby zastosować edycje.
Zakładka Widget: Wygląd
Pozycja
Wybierz, gdzie widget ma się pojawiać na Twojej stronie:
| Pozycja | Opis |
|---|---|
| Bottom Right | Pływająca bańka czatu w prawym dolnym rogu (domyślnie) |
| Bottom Left | Pływająca bańka czatu w lewym dolnym rogu |
| Inline (Embedded) | Widget osadzony bezpośrednio na stronie zamiast pływać |
Przy pozycji Inline czat jest osadzony w miejscu, gdzie umieszczony jest skrypt embed i jest zawsze otwarty — bez bańki i bez przycisku zamykania. Idealne do stron dedykowanych czatowi lub wsparciu. Zobacz Widget Embedding po szczegóły.
Motyw kolorystyczny
Wybierz jeden z trzech presetów kolorów:
| Preset | Opis |
|---|---|
| Default | Standardowy schemat kolorów ChatReact |
| Brand | Kolory Twojej firmy z Company Settings |
| Custom | Wybierz własne kolory |
Preset Brand jest dostępny tylko po ustawieniu kolorów marki. Przejdź do Company Settings, aby wyciągnąć kolory ze swojej strony.
Po wybraniu Custom możesz ustawić cztery kolory bazowe:
- Primary — bańka, gradient nagłówka, przyciski i wiadomości odwiedzających
- Secondary — drugi kolor gradientu nagłówka
- Background — tło okna czatu
- Text — kolor tekstu wiadomości
Zaawansowane ustawienia kolorów
Potrzebujesz większej kontroli? Po wybraniu presetu Custom rozwiń Advanced Color Settings, aby nadpisać automatycznie obliczane kolory:
- Visitor Messages — tło i kolor tekstu bąbelków wiadomości odwiedzających
- Bot Messages — tło i kolor tekstu bąbelków wiadomości bota
- Header Text Color — kolor tytułu i podtytułu w nagłówku widgetu
Wszystko, co pozostawisz niezmienione, jest obliczane automatycznie w celu uzyskania dobrego kontrastu. Każde nadpisanie zawiera przycisk Reset to automatic, aby powrócić do koloru obliczanego automatycznie.
Rozmiar i styl
| Ustawienie | Zakres | Domyślnie |
|---|---|---|
| Border Radius | 0–32 px | 24 px |
| Width | 300–500 px | 380 px |
| Height | 400–700 px | 600 px |
Na małych ekranach mobilnych widget automatycznie przełącza się na układ pełnej szerokości, niezależnie od tych wymiarów.
Logo
Włącz Use company logo in widget header, aby wyświetlić logo firmy w nagłówku czatu. Samo logo przesyłane jest w Company Settings — zalecane: kwadratowe, co najmniej 200×200 px (JPG, PNG, GIF, WebP lub SVG, max. 5 MB).
Opcja ta jest dostępna w planie Professional i wyższych oraz we wszystkich planach Agency.
Tytuł nagłówka, podtytuł i tekst bańki
| Pole | Opis | Domyślnie |
|---|---|---|
| Header Title | Tytuł wyświetlany w nagłówku okna czatu | "Chat with us" |
| Header Subtitle | Mniejsza linia poniżej tytułu | "We typically reply within minutes" |
| Bubble Text | Tekst wyświetlany obok bańki czatu, gdy widget jest zamknięty | Brak |
Jeśli nigdy nie ustawisz tytułu ani podtytułu, widget pokaże tekst domyślny — automatycznie zlokalizowany do języka odwiedzającego.
Jak działa podtytuł nagłówka: Dopóki nie skonfigurowano podtytułu, widget wyświetla zlokalizowany tekst domyślny, a formularz ustawień wstępnie wypełnia ten domyślny tekst, abyś mógł zobaczyć i edytować to, co zobaczą odwiedzający. Aby całkowicie ukryć podtytuł, wyczyść pole i zapisz — celowo opróżniony podtytuł pozostanie ukryty.
Tekst bańki pojawia się jako mała etykieta obok zamkniętej bańki czatu (np. "Got questions?"). Pozostaw puste, aby wyświetlana była tylko okrągła bańka.
Tłumaczenia widgetu
Jeśli Twój chatbot obsługuje wiele języków, poniżej ustawień wyglądu pojawi się karta Widget Translations. Tam możesz przetłumaczyć wiadomość powitalną, wiadomość fallback, tytuł nagłówka, podtytuł nagłówka i tekst bańki dla każdego włączonego języka.
Same wiadomości powitalne i fallback konfigurujesz na karcie Persona w ustawieniach chatbota.
Podgląd na żywo
Prawa kolumna zakładki Widget pokazuje Live Preview Twojego widgetu, który aktualizuje się w miarę zmiany ustawień. Jest interaktywny: zamknij okno czatu za pomocą X, aby zobaczyć zamkniętą bańkę (łącznie z tekstem bańki), i kliknij bańkę, aby ponownie je otworzyć.
Zakładka Behavior: Interakcja
Ustawienia zachowania
| Ustawienie | Opis | Domyślnie |
|---|---|---|
| Proactive Greeting | Bot wita odwiedzających automatycznie po opóźnieniu (1–10 sekund) | On, 3 s |
| Auto-Open | Widget otwiera się automatycznie dla odwiedzających po opóźnieniu (1–15 sekund) | Off, 5 s |
| Sound Enabled | Odtwarzaj dźwięki powiadomień | On |
| Typing Indicator | Pokaż animację podczas pisania bota | On |
| Pre-Chat Form | Zbieraj dane odwiedzającego przed rozpoczęciem czatu | Off |
| Show on Mobile | Wyświetlaj widget na urządzeniach mobilnych | On |
Maksymalna długość wiadomości
Ogranicz, ile znaków odwiedzający mogą wpisać w jednej wiadomości (100–10 000 znaków, domyślnie 2 000). To pomaga zapobiegać nadmiernemu użyciu spowodowanemu bardzo długimi wejściami. Wyczyść pole lub kliknij Remove limit, aby pozwolić na wiadomości o dowolnej długości.
Formularz przedczatowy (Pre-Chat Form)
Gdy formularz przedczatowy jest włączony, odwiedzający wypełniają krótki formularz przed rozpoczęciem rozmowy. Sam definiujesz pola:
- Typy pól: Text, Email, Phone, Textarea
- Każde pole ma label, opcjonalny placeholder oraz przełącznik required
- Zmieniaj kolejność pól za pomocą przycisków przenieś w górę/w dół lub usuń je
Jeśli Twój chatbot obsługuje wiele języków, poniżej edytora pól pojawi się sekcja tłumaczeń. Wprowadź tłumaczenia dla każdego języka ręcznie lub kliknij Translate with AI, aby automatycznie przetłumaczyć wszystkie etykiety i placeholdery.
Live Chat
Zakładka Behavior zawiera także kartę Live Chat Settings. Włącz live chat, aby pozwolić odwiedzającym rozmawiać z Twoimi agentami, i wybierz tryb:
| Tryb | Opis |
|---|---|
| Handoff Only | Live chat tylko wtedy, gdy bot nie może pomóc |
| Standalone | Odwiedzający mogą rozmawiać bezpośrednio z agentami |
| Both | Dostępne zarówno przekazanie (handoff), jak i bezpośredni live chat |
Live Chat jest dostępny w planie Professional i wyższych oraz we wszystkich planach Agency. Zobacz Live Chat jak zarządzać przychodzącymi rozmowami.
Branding
W planach, które obejmują white-label, na dole zakładki Behavior pojawia się karta Branding. Branding ChatReact jest domyślnie ukryty w tych planach — włącz Show "Powered by ChatReact", jeśli chcesz, aby był wyświetlany w stopce widgetu.
Faza uczenia
Gdy nowy chatbot znajduje się w fazie uczenia, możesz kontrolować, jak ostrożnie odpowiada — Cautious, Balanced (zalecane) lub Confident — w zakładce Confidence tej samej strony ustawień. Ta zakładka pojawia się w planach, które obejmują Improvement Agent. Zobacz przewodnik Improvement Agent po szczegóły.