Własny CSS

Gdy motywy i kolory nie wystarczają, możesz napisać do widgetu własny CSS. Pole Własny CSS znajdziesz w zakładce Ustawienia widgetu, w sekcji Styl. Jest dostępne na poziomie personalizacji Zaawansowana, który obejmuje plan Professional. Co zawiera każdy plan, opisujemy w artykule Personalizacja widgetu.

Jak stosowany jest Twój CSS

Widget działa w odizolowanej części strony. Twój CSS jest stosowany wyłącznie wewnątrz widgetu, więc nie zmieni niczego w pozostałej części Twojej witryny. Działa to też w drugą stronę: style Twojej strony nie wpływają na widget.

Style nakładają się w tej kolejności, a każdy kolejny krok nadpisuje poprzedni:

1. motyw,
2. kolor główny i kolor tekstu na tle głównym,
3. kolory zaawansowane ustawione dla poszczególnych elementów,
4. Twój własny CSS.

Twój CSS jest dodawany na końcu, a motyw i kolory zaawansowane są zapisane tak, by nigdy nie miały przed nim pierwszeństwa. Każda Twoja reguła z co najmniej jednym selektorem klasy, np. .fibly-header albo .fibly-root, wygrywa z motywem i z kolorami zaawansowanymi. Nie potrzebujesz dłuższych selektorów, żeby nadpisać motyw.

Podgląd na żywo na stronie ustawień stosuje Twój CSS na bieżąco, więc efekt sprawdzisz przed zapisaniem.

Ograniczenia

• CSS może mieć najwyżej 20 KB.
• @import jest niedozwolony. Aby zmienić krój pisma, użyj ustawienia Czcionka.
• CSS nie może zawierać zamykającego znacznika </style>.

Jeśli CSS narusza któreś z tych ograniczeń, panel wyświetli błąd i go nie zapisze.

Nazwy klas

Każdy główny element widgetu ma klasę zaczynającą się od fibly-. Używaj tych klas w selektorach zamiast innych nazw klas widocznych w źródle strony, które mogą się zmienić w dowolnej chwili.

Niektóre elementy mają więcej niż jedną klasę:

• Wskaźnik pisania jest wyświetlany jako wiadomość bota, więc oprócz .fibly-typing ma też klasę .fibly-message--bot. Reguła dla .fibly-message--bot zmieni więc także wskaźnik pisania. Aby go pominąć, użyj .fibly-message--bot:not(.fibly-typing).
• Komunikat powitalny jest jednocześnie komunikatem, więc ma klasy .fibly-welcome-notice i .fibly-alert. Pozostałe komunikaty mają tylko klasę .fibly-alert, nawet jeśli pojawiają się przed pierwszą wiadomością odwiedzającego. W rozmowach rozpoczętych przed wprowadzeniem tej klasy komunikat powitalny ma tylko .fibly-alert.

Zmienne

Kolory, zaokrąglenia i cienie są zdefiniowane jako zmienne CSS. Zmiana zmiennej jest często prostsza niż nadpisywanie pojedynczych reguł, bo zmienia od razu wszystkie elementy, które z niej korzystają. Poniższe wartości domyślne pochodzą z motywu Domyślny; inne motywy zmieniają część z nich.

Ustawiaj zmienne na .fibly-root, aby zmienić je w całym widgecie. Wartość ustawiona w tym miejscu wygrywa z motywem i z kolorami zaawansowanymi. Aby zmienić zmienną tylko w jednym miejscu, ustaw ją na konkretnym elemencie, np. na .fibly-panel dla okna czatu albo na .fibly-launcher dla przycisku czatu.

Przykłady

Większy tytuł w nagłówku

.fibly-header-title {
  font-size: 18px;
  font-weight: 600;
}

Kwadratowe dymki wiadomości

.fibly-root {
  --fibly-bubble-radius: 0;
}

Ta reguła zmienia jednocześnie dymki bota, odwiedzającego i Twojego zespołu. Aby wyprostować rogi tylko w wiadomościach odwiedzającego, wskaż je bezpośrednio:

.fibly-message--customer .fibly-bubble {
  border-radius: 0;
}

Własny kolor linków

.fibly-root {
  --fibly-link: #0b7a53;
}

Jeśli chcesz zmienić tylko kolor linków, pole Linki w sekcji Kolory zaawansowane zrobi to samo bez pisania CSS.

Stałe nazwy klas i zmiennych

Klasy i zmienne wymienione na tej stronie są stałą częścią widgetu i dbamy o to, by działały także po jego aktualizacjach. Jeśli kiedyś będziemy musieli zmienić nazwę którejś z nich lub ją usunąć, uprzedzimy o tym z wyprzedzeniem, abyś miał czas dostosować swój CSS. Inne nazwy klas widoczne w źródle strony są wewnętrzne i mogą się zmienić bez zapowiedzi, więc nie opieraj na nich swoich stylów.

Po zmianie planu

Jeśli przejdziesz na plan bez poziomu Zaawansowana, Twój CSS zostanie zapisany, ale nie będzie stosowany na stronie. Wróci, gdy tylko przejdziesz z powrotem na plan, który go obejmuje.