Okno czatu: styl, rozmiar, panel boczny i widok mobilny

Kolory nadają charakter, a forma robi resztę. Pod /app/projects/{id} w zakładce Wygląd, sekcja Marka, znajdziesz dwie grupy przełączników: Styl (forma zamiast koloru) i Okno (jak wygląda otwarte okno). Bez wyboru wszystko zostaje przy wartościach domyślnych. Zapisujesz przyciskiem Zapisz, a podgląd w sekcji Ekran startowy widgetu pokazuje prawdziwy widget.

Szablony asystenta projektowania od razu ustawiają też te przełączniki.

Styl

• Nagłówek – gradient (domyślnie), płaski albo szkło. Dotyczy nagłówka strony startowej i paska tytułu.
• Gęstość – normalna (domyślnie), zwarta albo przestronna. Odstępy na stronie startowej i w historii rozmowy.
• Dymki – miękki (domyślnie, zgodny z twoim promieniem rogów), okrągły (18 px) albo kanciasty (4 px).
• Cień – miękki (domyślnie), twardy albo brak. Dotyczy okna, a nie przycisku czatu.
• Awatar – okrągły (domyślnie) albo kanciasty.
• Pole wpisywania – płaski (domyślnie) albo pigułka (mocno zaokrąglone, z okrągłymi przyciskami).
• Karty – z ramką (domyślnie) albo płaski. Dotyczy kafelków strony startowej, wierszy pomocy i kart w rozmowie.

Okno

• Rozmiar okna – normalne (domyślnie, 380 px szerokości), szerokie (440 px), wąskie (340 px) albo wysokie (prawie cała wysokość ekranu, najwyżej 960 px). Normalna wysokość to 620 px, na małych ekranach mniej.
• Układ – pływające okno (domyślnie) albo panel boczny. Panel boczny zajmuje całą wysokość przy krawędzi, po stronie przycisku czatu, i stamtąd się wsuwa. Przycisk czatu chowa się, dopóki panel jest otwarty. Zamyka się go przyciskiem w nagłówku.
• Tło – tło obszaru wiadomości: gładkie (domyślnie), kropki, kratka albo gradient (odrobina koloru twojej marki).
• Czcionka – normalna (domyślnie, 14 px), duża (15,5 px) albo mała (13 px). Dotyczy dymków i pola wpisywania, a nie przycisku czatu.
• Animacja otwierania – wsuwanie (domyślnie), przybliżenie, przenikanie albo brak. Jeśli odwiedzający ustawił w systemie „Ogranicz ruch”, animacji i tak nie ma.
• Dymek odwiedzającego – kolor dymków twoich odwiedzających: kolor główny (domyślnie, jasna mieszanka koloru twojej marki), kolor akcentu albo neutralny (szary). Również tutaj widget przelicza tekst tak, żeby był czytelny.

Rozmiar okna i układ działają dopiero od 481 px szerokości ekranu. Poniżej czat zawsze otwiera się na pełnym ekranie (zob. niżej).

W kodzie

Wszystkie przełączniki są w marce pod stil. Wartości to nazwy wewnętrzne:

• kopf: verlauf, flach, glas
• dichte: normal, kompakt, luftig
• blase: weich, rund, eckig
• schatten: weich, hart, keiner
• avatar: rund, eckig
• eingabe: flach, pille
• karten: rahmen, flach
• fenster: normal, breit, schmal, hoch
• ansicht: schwebend, seite
• hintergrund: schlicht, punkte, raster, verlauf
• schrift: normal, gross, klein
• animation: gleiten, zoom, blenden, keine
• besucher: marke, akzent, neutral

Nieznana wartość wraca do wartości domyślnej.

ReactiveChat('setBrand', { stil: { ansicht: 'seite', hintergrund: 'punkte', schrift: 'gross' } });

We fragmencie osadzenia jako data-rc-brand='{"stil":{"ansicht":"seite"}}' marka liczy się jako własna marka tej strony i wygrywa z kontem, zob. Kolory, czcionka i motyw.

Ruch

Atrybutem data-rc-motion we fragmencie osadzenia sterujesz animacjami: auto (domyślnie, zgodnie z ustawieniem systemowym odwiedzającego), reduced (bez ruchu) albo full.

data-rc-motion="reduced"

Nagłówek

W nagłówku widać, kto odpowiada:

• Gdy pisze ktoś z twojego zespołu, widać jego nazwę wyświetlaną. Każdy członek zespołu ustawia ją w swoich ustawieniach osobistych, zob. Zespół, konsola i powiadomienia.
• Gdy odpowiada asystent AI, widać jego imię z sekcji AI i wiedza → Asystent (domyślnie „Ada”), zob. Asystent AI.
• W pozostałych przypadkach tytuł „Czat”. Ten tytuł i drugą linię („Jesteśmy dostępni”, „Asystent AI”) zmienisz w Teksty i języki pod kluczami header.title, header.subtitle_online i header.subtitle_bot.

Awatary pokazują pierwszą literę imienia, a przy asystencie znak ✦. Własnych zdjęć członków zespołu nie można na razie dodać.

W nagłówku jest też ikona koperty, przez którą odwiedzający mogą zamówić historię rozmowy e-mailem. Wyłączysz ją w sekcji Reguły i obsługa → Historia rozmowy e-mailem, zob. Dostępność, formularze i obsługa.

Informacja „Powered by reactive.chat”

W darmowym planie na dole okna widnieje informacja „Powered by reactive.chat”. W planie płatnym sam decydujesz o tym w sekcji Wygląd → reactive.chat w czacie przełącznikiem Ukryj „Powered by reactive.chat”. Domyślnie jest wtedy ukryta. Treści tej informacji nie można zmienić.

Na telefonie

Do 480 px szerokości, a na urządzeniach trzymanych poziomo do 480 px wysokości, czat otwiera się na pełnym ekranie: bez zaokrąglonych rogów, na całą widoczną wysokość, także gdy otworzy się klawiatura ekranowa. Pole wpisywania ma czcionkę 16 px, żeby telefon go nie powiększał, a przyciski mają co najmniej 44 px. Przycisk czatu chowa się, dopóki czat jest otwarty.

Rozmiar okna i panel boczny nie działają na telefonie. Pozostałe przełączniki stylu, kolory i rozmiar czcionki – tak. Rozmiar przycisku czatu na telefonie ustawisz w Przycisk czatu.