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;
}
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;
}
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;
}
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;
}
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;
}
}
#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;
}
}
#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;
}
#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;
}
display: none !important;
}
Usunięcie wybranego działu w oknie callback (lista)
Wartość pola value, to numer działu. Należy tam wstawić id działu, który ma zostać ukryty.
#section-select option[value="3393"] {
display: none !important;
}
display: none !important;
}
Usunięcie wybranego działu w oknie callback (przyciski)
Wartość pola value, to numer działu. Należy tam wstawić id działu, który ma zostać ukryty.
.section-button[id-section="3395"] {
display: none !important;
}
display: none !important;
}
Usunięcie wyświetlania działów offline w widgecie czatu
.sections-offline {
display:none !important;
}
Twój komentarz zostanie dodany po zakceptowaniu przez moderacje.