Personalizacja widgetu

Sekcja Styl w zakładce Ustawienia widgetu decyduje o tym, jak widget czatu wygląda na Twojej stronie: o motywie, czcionce, stopce „Powered by Fibly AI”, kolorach poszczególnych elementów, a na najwyższym poziomie także o własnym CSS. Zakres dostępnych zmian zależy od poziomu personalizacji w Twoim planie.

Podstawowe ustawienia opisane w artykule Wygląd widgetu działają w każdym planie: kolor główny, kolor tekstu na tle głównym, teksty przycisku i okna, ikona lub obrazek przycisku oraz jego położenie.

Poziomy personalizacji

Każdy plan ma przypisany jeden poziom:

• plan Free: poziom Darmowa,
• plan Starter: poziom Podstawowa, na stronie cennika opisany jako podstawowa personalizacja,
• plan Professional: poziom Zaawansowana, na stronie cennika opisany jako pełna personalizacja,
• plan Enterprise: poziom ustalamy w umowie, zwykle jest to Zaawansowana.

Opcje, których Twój plan nie obejmuje, są w panelu zablokowane i opisane poziomem, który je odblokowuje, np. „Dostępne w planach z personalizacją na poziomie »Zaawansowana«”.

Motywy

Motyw zmienia charakter całego widgetu: zaokrąglenie rogów, cienie, obramowania i tła. Działa razem z kolorem głównym, więc niezależnie od wybranego motywu widget zostaje w kolorach Twojej marki.

• Domyślny: standardowy wygląd widgetu z lekko zaokrąglonymi rogami i delikatnymi cieniami.
• Płaski: bez cieni, z niewielkim zaokrągleniem rogów, cienkimi obramowaniami wiadomości bota i białym tłem czatu.
• Brutalistyczny: grube czarne obramowania, kwadratowe rogi, twarde czarne cienie przesunięte w bok oraz pogrubiony nagłówek pisany wielkimi literami.
• Miękki: mocno zaokrąglone rogi, rozmyte cienie w odcieniu koloru głównego i tło czatu lekko zabarwione tym samym kolorem.
• Minimalistyczny: bez cieni, biały nagłówek z ciemnym tekstem oddzielony cienką linią, a odpowiedzi bota wyświetlane jako zwykły tekst, bez dymka.
• Szkło: półprzezroczyste okno czatu, które rozmywa stronę pod spodem, z zaokrąglonymi rogami i subtelnymi obramowaniami.
• Zabawny: bardzo zaokrąglone rogi, pole wpisywania i przyciski w kształcie pigułki, dymki bota w odcieniu koloru głównego oraz przycisk czatu, który lekko się przechyla po najechaniu kursorem.

Czcionka

Pole Czcionka ustawia krój pisma dla wszystkich tekstów w widgecie. W każdym planie możesz wybrać jedną z pięciu czcionek: Inter, Roboto, Lato, Open Sans lub Montserrat. Opcja Systemowa używa czcionki systemu operacyjnego odwiedzającego i jest ustawieniem początkowym.

Na poziomie Zaawansowana możesz też przeszukać cały katalog Google Fonts. Lista zawiera tylko rodziny obsługujące polskie i niemieckie znaki, więc litery takie jak „ą”, „ł” czy „ß” nigdy nie wyświetlą się inną czcionką.

Jeśli Twoja strona korzysta z restrykcyjnej polityki Content Security Policy, zezwól na fonts.googleapis.com dla stylów i fonts.gstatic.com dla czcionek. W przeciwnym razie przeglądarka zablokuje czcionkę, a widget użyje czcionki systemowej.

Stopka „Powered by Fibly AI”

Pod polem wiadomości widget wyświetla krótką linię „Powered by Fibly AI” w języku odwiedzającego (po polsku: „Napędzane przez Fibly AI”). Na poziomach Podstawowa i Zaawansowana możesz ją ukryć, odznaczając opcję Pokazuj „Powered by Fibly AI” w polu Oznaczenie Fibly.

Kolory zaawansowane

Na poziomie Zaawansowana możesz ustawić kolor dziesięciu osobnych elementów: tła i tekstu nagłówka, tła czatu, tła i tekstu wiadomości bota, tła i tekstu wiadomości klienta, tła i tekstu pola wpisywania oraz linków.

Zostaw pole puste, aby użyć koloru z motywu. Przycisk Przywróć ustawienia motywu usuwa Twoją wartość. Kolory ustawione tutaj mają pierwszeństwo zarówno przed motywem, jak i przed kolorem głównym.

Zaokrąglenie rogów

Na poziomie Zaawansowana możesz też ustawić, jak bardzo zaokrąglone są rogi czterech elementów, w pikselach od 0 do 40: okna czatu, dymków wiadomości, pola wiadomości razem z przyciskiem wysyłania oraz przycisku czatu. Wartość 0 daje ostre rogi.

Każdy motyw ma własne zaokrąglenia i puste pole je zachowuje. Przycisk Przywróć ustawienia motywu usuwa Twoją wartość. Przycisk czatu z tekstem ma lekko zaokrąglone rogi, a z samą ikoną jest okrągły; ustawiona wartość działa w obu przypadkach.

Podgląd na żywo

Podgląd obok ustawień pokazuje widget z przykładową rozmową i aktualizuje się, gdy zmieniasz motyw, czcionkę, kolory, zaokrąglenie rogów lub własny CSS. Każdą opcję możesz tam sprawdzić przed zapisaniem.

Zmiana planu

Gdy przejdziesz na plan z niższym poziomem, Fibly zachowa wszystkie zapisane ustawienia, ale przestanie wyświetlać te, których nowy plan nie obejmuje. Na Twojej stronie zablokowany motyw zostanie zastąpiony Domyślnym, zablokowana czcionka Google czcionką systemową, a kolory zaawansowane i zaokrąglenie rogów wartościami z motywu. Ukryta stopka pojawi się z powrotem, a własny CSS nie będzie stosowany. W panelu takie ustawienia są oznaczone jako „Niewidoczne w Twoim obecnym planie”.

Gdy wrócisz na wyższy plan, zapisane ustawienia od razu wrócą na stronę i nie trzeba ich konfigurować ponownie. Zmianę planu opisujemy w artykule Zmiana planu.

Co dalej

Na poziomie Zaawansowana możesz pójść dalej z własnymi stylami. Artykuł Własny CSS zawiera listę nazw klas i zmiennych, z których możesz korzystać, wraz z przykładami.