Czat na wielu stronach o różnych kolorach

Przydatne porady

Integracja Live chat ze Slack Powiadomienia dźwiękowe w czacie Konfiguracja pobieranych danych Własne treści w wielu językach (zmienne językowe) Jak zintegrować bota z czatem? Jak opóźnić pojawienie się czatu o żądany czas? Zaawansowane zmiany wyglądu - przykłady kodu CSS Jak działa tryb "Zawsze online"? Co to są działy? Modyfikacja wyglądu przez własny CSS Czat na wielu stronach o różnych kolorach Ukrycie czatu w trybie offline Dwa sposoby łączenia rozmów w Callback Avatar w widgecie czatu Role w czacie Livechat zgodny z RODO Ustawienie stałego języka czatu. Jak zmienić szerokość okna czatu? Brak kontynuacji rozmowy na kolejnych domenach Ukrycie liczby zamówionych połączeń w widgecie. Zmiana koloru zaproszenia do rozmowy. Integracja Fanpage Facebook z Czaterem W jaki sposób założyć blokadę domenową dla własnego czatu? Jak umieść na jednej stronie czat, a na drugiej telefon? Jak uzyskać certyfikat jakości obsługi klienta? Jak przyjmować płatności przez czat?

Czy ten sam czat można zamieścić na wielu stronach?

Ten sam czat można umieścić na wielu stronach internetowych. Dzięki temu, klientami z różnych stron naszej firmy mogą opiekować się Ci sami konsultanci. Często jednak strony różnią się od siebie wizualnie i ten sam wygląd czatu nie będzie spójny z wyglądem poszczególnych stron. Wtedy możemy wykorzystać indywidualne style CSS.

Własne CSS

Jak dopasować wygląd czatu do stylistyki strony?

W ustawieniach indywidualnego wyglądu możemy dodać kilka róznych CSS.

Domyślnie style, które dodamy zostaną uwzględnione we wszystkich naszych czatach (na każdej stronie gdzie umieściliśmy czat). Zatem jeśli dany styl chcemy zastosować do jednego z czatów (jednej ze stron) wyłączamy opcję "Dołącz automatycznie do wszystkich czatów".

Wtedy wyświetli nam się informacja o konieczności dodania do kodu czatu, fragmentu, który będzie odpowiadał za wyświetlanie stylu, który dodaliśmy.

Indywidualny wygląd

Domyślny kod czatu bez modyfikacji CSS wygląda tak:

Dodaliśmy w ustawieniach style CSS zmieniające kolorystykę czatu. Do kodu na stronie dodaliśmy wygenerowany fragment. Kod po zmianach wygląda tak:

zmodyfikowany kod czatu

CSS czatu związane z kolorystyką:

Nagłówek
.czater-header { background-color: red !important; }
Klawisz czatu
.czater-button { background-color: red; color: white; }
Zaproszenie do rozmowy
#e3D18r_czater #czater-contener #teaser { background: red !important; color: white; }
#teaser::after { border-color: transparent red; }
Stopka
.czater-submit { background: red; }
Słuchawka
#czatercall-button-body #czatercall-button { background: red!important; } #czatercall-button-body #czatercall-button:before { background: red!important; }
Tło wiadomości konsultanta
#chatInsideBody .czater-leftMessage { background-color: red !important; } #chatInsideBody .czater-leftMessage:before { border-color: transparent red!important; }

W zaprezentowanym wyżej przykładzie użyliśmy koloru czerwonego (red) dla każdego z elementów. Oczywiście można użyć dowolnych kolorów.