8 stylów, 17 fontów, jeden widget
Większość widgetów czatu ma jeden kształt: okrągły dymek w rogu i białą kartę z nagłówkiem w kolorze twojej marki. Spookat ma 8 stylów i 17 fontów hostowanych u nas, a każdy styl ma też własny głos. Oto wszystkie, na telefonie, z tymi samymi trzema wiadomościami.
po co więcej niż jeden wygląd
Czat jest częścią twojej strony. Brutalistyczne portfolio z miękkim pastelowym dymkiem w rogu wygląda jak cudza strona przykręcona na śruby. Widget powinien więc wyglądać, jakby był zaprojektowany dla strony, na której siedzi, a sam color picker tego nie załatwi.
Każdy styl to pełny projekt: layout, typografia, odstępy, launcher i słowa. Powitanie, placeholder i nagłówek zmieniają się razem ze stylem, we wszystkich 12 językach. Jedno się nie zmienia nigdy, obietnica pod spodem: czyta to człowiek, a odpowiedź na odwiedzającego poczeka.
ósemka
brutal
Grube ramki, przesunięte cienie, małe litery, podtytuł monospace. Mówi jak my: „hej, pytaj śmiało. odpowie ci tu prawdziwy człowiek.” Domyślny, kiedy strona nic nie wybrała.
clean
Spokojne szare dymki, jeden kolor akcentu dla wiadomości odwiedzającego, normalna wielkość liter. Styl dla dashboardu SaaS, który nie chce się rzucać w oczy.
glass
Matowy panel nad miękkim gradientem, okrągły avatar, zielona kropka „here now”. Dla stron produktowych, które i tak mają już dużo blura.
soft
Ciepły szeryf, uśmiechnięta buźka w nagłówku, duże zaokrąglenia. „Type something nice…” Dla sklepów, piekarni i wszystkich, którzy sprzedają coś, co da się dać w prezencie.
terminal
Ciemno, monospace, prompt zamiast dymków: ~/acme.dev/support, godziny po lewej, „type and hit enter”. Dla narzędzi dla devów i ludzi, których cała strona to README.
paper
Layout jak z magazynu: kapitaliki przy autorach, wielkie kursywne „Ask us anything.”, placeholder „Dear team…”. Dla studiów, magazynów i kancelarii, którym zależy na kerningu.
retro
Okienko z 1995 z paskiem tytułu, menu Chat, View i Help oraz pikselowym fontem. To żart, który możesz postawić na prawdziwej stronie, i działa tak samo jak reszta.
swiss
Wielkie „Help.” z czerwonym kwadratem, siatka imion i godzin, linie między wiadomościami. Dla agencji designerskich i każdego, kto ma więcej niż jeden plakat z Helvetiką.
ile kosztuje styl
To część, na której zależy nam najbardziej. Launcher, który ładuje każda podstrona, niesie dwa przyciski, domyślny (brutal) i twój, i żadnego innego stylu: około 2,2 do 2,4 kb po gzipie, z wyglądem w środku, zależnie od stylu. CSS stylu dla samego czatu ładuje się dopiero, gdy ktoś wciśnie przycisk, i tylko ten jeden: około 2,3 do 2,5 kb po gzipie dla każdego z ośmiu. Skrypt panelu to około 17,5 kb po gzipie.
Fonty ładują się tak samo. Font stylu rejestrujemy dopiero, gdy panel się otwiera, a przeglądarka pobiera tylko te zakresy znaków, których strona faktycznie używa, więc angielski czat nigdy nie ściąga polskich ogonków. Wybierz „system” jako font i nie pobiera się nic.
Wszystko idzie z naszego własnego CDN. Bez Google Fonts, bez stron trzecich.
żeby był twój
W dashboardzie wybierasz styl, kolor akcentu, font, stronę ekranu, powitanie i, jeśli chcesz, logo. Możesz też zamienić okrągły launcher w pigułkę z własnym tekstem, na przykład „pytania? odpisze człowiek.” Dashboard pokazuje podgląd na żywo, kiedy się klikasz, a opublikowany wygląd dociera do odwiedzających w ciągu minuty.
Jeśli jakaś podstrona potrzebuje czegoś innego, kilka linijek w snippecie nadpisze wygląd tylko na niej:
<script>window.Spookat = { style: "terminal", accent: "#39ff88", side: "left" }</script>Na vc money możesz pójść dalej z własnym CSS dla widgetu.
po co to wszystko
Bo widget czatu to jedyny cudzy skrypt, który gada z twoimi odwiedzającymi w twoim imieniu. Powinien brzmieć jak ty i wyglądać jak ty, i nie powinien przy tym spowalniać strony. Osiem stylów i launcher na około 2 kb to nasz sposób, żeby to pogodzić.
Przetestuj wszystkie 8 na swojej stronie: trial trwa 14 dni, bez karty.