Wygląd widgetu

Widget WebSpeaker można w pełni dostosować wizualnie, aby harmonijnie wpasował się w wygląd Twojej strony internetowej. Portal zarządzania oferuje edytor motywów, który pozwala zmieniać kolory, gradienty i styl widgetu bez konieczności pisania kodu CSS.

Edytor motywów

Edytor motywów dostępny jest w sekcji Widget Settings -> Colors. Kolory i pozycja bąbelka znajdują się teraz na dwóch osobnych stronach — Colors dla motywu i Position dla launchera. Interfejs edytora jest intuicyjny i pozwala na interaktywną modyfikację wszystkich aspektów wizualnych widgetu. Zmiany są natychmiast widoczne w podglądzie na żywo, co ułatwia eksperymentowanie z różnymi kombinacjami kolorystycznymi. Edytor jest podzielony na sekcje odpowiadające poszczególnym elementom widgetu, takim jak nagłówek, przycisk, tło konwersacji i pola tekstowe.

Kolory i gradienty

Głównym elementem personalizacji widgetu jest schemat kolorów. Możesz ustawić kolor główny (primary color), który determinuje wygląd nagłówka, przycisków i innych akcentów wizualnych. Oprócz kolorów jednolitych, edytor obsługuje również gradienty, pozwalając na definiowanie przejść między dwoma lub więcej kolorami. Gradienty mogą nadać widgetowi bardziej nowoczesny i profesjonalny wygląd. Każdy kolor można zdefiniować za pomocą kodu HEX, wartości RGB lub wybierając go z palety kolorów.

Sugerowane motywy

Jeśli nie chcesz tworzyć własnego motywu od podstaw, WebSpeaker oferuje zestaw sugerowanych motywów. Palety kolorów są generowane na podstawie aktualnej kolorystyki Twojej strony internetowej, dzięki czemu naturalnie komponują się z istniejącym designem. Wystarczy kliknąć na wybrany motyw, aby natychmiast zastosować go do widgetu. Sugerowane motywy mogą również służyć jako punkt wyjścia do dalszej personalizacji, ponieważ po ich zastosowaniu możesz swobodnie modyfikować poszczególne kolory.

Pozycja bąbelka

Pozycję pływającego bąbelka czatu można konfigurować niezależnie od pozostałych ustawień wyglądu widgetu. W portalu zarządzania otwórz Widget Settings -> Position, aby określić, gdzie bąbelek ma być wyświetlany na stronie.

Możesz wybrać róg ekranu, w którym ma pojawiać się bąbelek, oraz ustawić osobne offsety dla desktopu i urządzeń mobilnych. Dzięki temu łatwiej uniknąć kolizji z przyklejoną nawigacją, banerami cookie, przyciskami kontaktowymi lub innymi stałymi elementami strony.

Ustawienie z-index pozwala określić, jak wysoko ponad innymi elementami strony ma być wyświetlany bąbelek. Wyższą wartość warto ustawić wtedy, gdy launcher chowa się za banerami, nagłówkami albo innymi widżetami. Niższe wartości mogą być przydatne, jeśli Twoja strona ma już własne overlaye lub pływające kontrolki, które powinny pozostać na wierzchu.

Ustawienia pozycji mają znaczenie tylko wtedy, gdy włączona jest funkcja Pływający bąbelek czatu (FAB). Jeśli bąbelek jest wyłączony, pola pozycji pozostają niedostępne do czasu ponownego włączenia launchera.

Podgląd na żywo

Edytor motywów zawiera wbudowany podgląd widgetu, który aktualizuje się w czasie rzeczywistym podczas edycji. Podgląd pokazuje, jak widget będzie wyglądał na stronie, wraz z wszystkimi elementami interfejsu, takimi jak przycisk otwierania, nagłówek czatu, pole wpisywania wiadomości i bąbelki konwersacji. Dzięki podglądowi na żywo możesz precyzyjnie dostroić wygląd widgetu bez konieczności przełączania się między portalem a stroną docelową.

Niezależność od stylów Twojej strony

Style widgetu są odizolowane od CSS Twojej strony, dzięki czemu arkusze stylów strony nigdy nie zmieniają wyglądu widgetu, a widget nigdy nie wpływa na wygląd reszty strony. To, co ustawisz w edytorze motywów, jest dokładnie tym, co widzą odwiedzający, niezależnie od tego, jak z czasem zmieni się wygląd samej strony. Więcej o przeciąganiu i zmianie rozmiaru otwartego okna czatu znajdziesz w sekcji Przesuwanie i zmiana rozmiaru okna czatu.

Resetowanie motywu

W dowolnym momencie możesz przywrócić domyślny motyw widgetu, klikając przycisk resetowania. Spowoduje to przywrócenie wszystkich kolorów i ustawień do wartości fabrycznych. Resetowanie jest przydatne, gdy eksperymentujesz z różnymi kombinacjami i chcesz zacząć od czystego stanu. Po resecie możesz ponownie zastosować sugerowany motyw lub rozpocząć tworzenie własnego schematu kolorów od domyślnych wartości.