Zaawansowane zmiany wyglądu - przykłady kodu CSS
- 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?
Jak dopasować wygląd do własnych potrzeb?
Czater umożliwia personalizację widgetów w dowolny sposób za pomocą kodu CSS. Instrukcja dodania arkusza styli znajduje się tutaj. Poniżej zamieszczamy przykłady kodu wraz z opisem zastosowania.Zmiana ikony przełączania rozmowy bota do konsultanta
W miejsce kropek należy wstawić link do swojej ikony lub zdjęcia.
#e3D18r_czater .e3D18r-icon-bot-to-consultant {
background-image: url(https://..........) !important;
}
Zmiana treści podziękowania po zamówionej rozmowie telefonicznej
W miejsce "nowa treść" należy wpisać swój własny tekst.
#thanks-title {
font-size:0;
}
#thanks-title:after {
content: "Nowa treść";
font-size: 24px !important;
}
Zmiana koloru zaproszeń do rozmowy
Fragment kodu w postaci numerycznej np. #33cc33 to kolor. W miejscu wartości należy podać własny nie usuwając fragmentu !important.
#e3D18r_czater #czater-contener div#teaser #teaser_caption { background-color: #33cc33!important; } #e3D18r_czater #czater-contener.attachment-bottom-right div#teaser:after, #e3D18r_czater #czater-contener.attachment-left-edge div#teaser:after { border-right: 12px solid transparent!important; border: 12px solid #33cc33; } #e3D18r_czater div#czatercall-teaser #czatercall-teaser_caption { background-color:#33cc33!important; } #e3D18r_czater div#czatercall-teaser.czatercall-left:after { border: 12px solid transparent !important; border: 12px solid #33cc33 !important; border-top: 12px solid transparent!important; border-bottom: 12px solid transparent!important; }
Zmiana treści tekstu na przykładzie "Prosimy o podanie danych" w formularzu offline
Właściwość content powinna zawierać nową dowolną wartość ujętą w cudzysłów pojedynczy apostrofowy.
.form-data h3 {
text-indent:-9999px;
}
.form-data h3:before {
text-indent:0;
content:'Nowa treść';
float:left;
}
Przesunięcie czatu na urządzeniach mobilnych
Oprócz właściwości bottom można zastosować inne parametry.
@media (max-width: 769px) {
#e3D18r_czater #czater-contener[data-display=off].attachment-mobile-bottom-right {
bottom: 90px;
}
}
Przesunięcie telefonu na urządzeniach mobilnych
Oprócz właściwości bottom można zastosować inne parametry.
@media (max-width: 769px) {
#e3D18r_czater #cc-button-iframe.attachment-mobile-bottom-left {
bottom: 53px !important;
}
}
Przeniesienie ikony słuchawki na lewą stronę nad czat
Zmieniając wartości właściwości left, right, bottom można przemieszczać widget.
#e3D18r_czater #cc-button-iframe.attachment-bottom-left,
#e3D18r_czater #cc-button-iframe.attachment-mobile-bottom-left {
right: 7px !important;
bottom: 83px !important;
left: auto;
}
#e3D18r_czater #czatercall-teaser {
bottom: 106px !important;
}
#e3D18r_czater #czatercall-teaser.czatercall-left {
right: 139px !important;
left: auto;
}
#e3D18r_czater #czatercall-teaser.position-on-side.czatercall-left:after {
left: auto !important;
right: -18px !important;
border-left: 12px solid #2f2f2f!important;
border: 12px solid #2f2f2f00;
}
Usunięcie wyświetlania działu w czacie
W miejsce xxx należy wpisać id działu, który jest pobierany z adresu url po przejściu do edycji działu, np. https://www.czater.pl/userPanel/sectionOperations/edit/3219
Tutaj numerem id jest 3219.
.czater-sections li[data-id="xxx"] {
display: none !important;
}
Twój komentarz zostanie dodany po zakceptowaniu przez moderacje.