# bąbel czatu z 2014

Napociłeś się nad fontami i kolorami strony, a potem wkleiłeś w róg generyczny bąbel czatu. Rant o designie i o tym, jak wygląda czat, który pasuje do strony.

2026-10-22 · Seba

Spędziłeś weekend nad typografią swojej strony. A potem wkleiłeś w róg okrągły bąbel, który wygląda, jakby przyjechał z cudzej strony z 2014. Ten rant jest o najbardziej olewanym elemencie designu na twojej stronie, o tym, czemu tak wychodzi, i o tym, jak wygląda czat, który naprawdę pasuje.

## wiesz, o który chodzi

Okrągły. W jakimś odcieniu domyślnego niebieskiego. Ikonka dymka. Mała czerwona plakietka z „1”, za wiadomość, której nikt ci nie wysłał. Pięć sekund po załadowaniu strony wysuwa się powitanie z machającą ręką i pyta, w czym może pomóc, kiedy ty jeszcze próbujesz przeczytać nagłówek.

Otwierasz panel i to już inna strona. Inny font, inne rogi, inne cienie, nagłówek z czyimś wyobrażeniem o byciu miłym. Siedzi w rogu twojej starannej, wyrazistej strony jak naklejka na obrazie.

## czemu tak jest

Większość widgetów czatu jest projektowana tak, żeby wyglądała jak dostawca czatu. Z ich perspektywy to ma sens. Bąbel to ich marka i pojawia się za darmo na tysiącach stron.

Dla ciebie znaczy to, że cała personalizacja to color picker i może przełącznik pozycji. Wybierasz kolor marki, bąbel zmienia kolor i dalej jest tym samym bąblem. Tyle że teraz w twoim kolorze.

## vibe koderzy, widzimy was

Twoja strona ma swój styl. Nawet jeśli myślisz, że nie ma.

Może to domyślny shadcn z gray-200 na wszystkim. Może fioletowy gradient i nagłówek, który obiecuje zmienić całą branżę. Ciemna strona dev-toola, która chwali się szybkością fontem 72 punkty. Kremowe tło, zaokrąglone rogi i maskotka w kształcie glutka. Szeryfowa kursywa i „starannie dopracowane”. Helvetica i jedna czerwona kropka.

Nie oceniamy. Nasza strona to brutal: grube czarne ramki, kwasowa zieleń, wszystko małymi literami. Pastelowego bąbla na niej nienawidzilibyśmy tak samo. Tyle że każdy z tych stylów ma swoje zasady, a bąbel z 2014 łamie je wszystkie naraz.

## co naprawdę znaczy „pasuje”

Kolor nie sprawi, że widget pasuje. Te rzeczy tak.

**Font.** Czat powinien używać twojego fontu albo chociaż bliskiego krewnego. Spookat ma 17 fontów hostowanych u nas plus systemowy font odwiedzającego i żaden nie przychodzi z zewnętrznego serwera fontów.

**Kształt.** Rogi, ramki, cienie i odstępy należą do stylu. Spookat ma ich 8: clean, glass, soft, terminal, paper, retro, swiss i brutal. Każdy udaje jakiś rodzaj stron, które ludzie naprawdę robią, w tym te wymienione wyżej.

**Głos.** Strona w stylu paper nie wita ludzi „hejką” z dwoma wykrzyknikami. Każdy styl Spookata ma własne powitanie i własny placeholder. Paper mówi „Drogi zespole…”. Terminal mówi „pisz i wciśnij enter”. Swiss mówi „Twoje pytanie”. Ten sam widget, inne maniery.

**Kolor.** Dowolny akcent. Tekst na nim sam wybiera czarny albo biały, zależnie od tego, co daje większy kontrast, więc twój neonowo limonkowy przycisk da się przeczytać.

**Launcher.** Ikonka, jeśli lubisz minimalizm, albo pigułka z twoim własnym tekstem. Lewo albo prawo, żebyś mógł trzymać go z dala od własnych przycisków.

**Twoje logo.** Siedzi w nagłówku panelu, wbudowane w sam widget, więc odwiedzający nie płaci za nie żadnym dodatkowym requestem.

## telefony istnieją

Połowa zbrodni designerskich dzieje się na telefonie. Bąbel zasłania „dodaj do koszyka”. Panel otwiera się w małym pływającym okienku, w którym nie da się pisać, kiedy wyjedzie klawiatura.

Na małym ekranie panel Spookata idzie na pełny ekran i szanuje notcha oraz pasek home. Na telefonie w poziomie też idzie na pełny ekran, bo inaczej nikt by nic nie napisał. Na desktopie panel wyrasta z launchera. Na telefonie wjeżdża od dołu jak arkusz. Jeśli odwiedzający poprosił system o ograniczenie animacji, panel po prostu się pojawia z lekkim fade'em.

## i nic nie waży

Standardowa wymówka dla brzydkiego widgetu to „to tylko narzędzie do supportu”. Spoko, ale w takim razie nie powinno też być ciężkie. Nasz ma poniżej 4 kb przed kliknięciem, robi 0 requestów do naszego API, dopóki ktoś go nie otworzy, a CSS każdego stylu ładuje się dopiero z panelem.

## nie musisz nawet klikać

Styl, font, akcent, strona i powitanie mieszczą się w jednej linijce `window.Spookat` w twoim kodzie, więc agent edytuje je jak wszystko inne. Albo powiedz agentowi, żeby dopasował czat do twojej strony. Ma narzędzia do ustawienia stylu, fontu i akcentu i do publikacji, a człowiek może ją cofnąć w logu aktywności w dashboardzie.

Chcesz najpierw zobaczyć wszystkie 8 obok siebie? Są w [przeglądzie stylów](/pl/blog/8-styles-one-widget/).

## test

Zrób screena swojej strony z otwartym czatem. Zasłoń kciukiem logo. Czy czat wygląda, jakby był częścią designu od początku?

Jeśli wygląda jak reklama czyjegoś produktu, to jest bąbel z 2014. Twoja strona zasługuje na więcej.

[Zobacz, jak działają style](/pl/how/).

---
source: https://spookat.com/pl/blog/chat-bubble-from-2014/