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;
}

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;
}

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;
}

Usunięcie wyświetlania działów offline w widgecie czatu

.sections-offline { display:none !important; }