jak dodać live chat do strony i jej nie spowolnić

27 września 2026 · pisze kuba · 7 min czytania

Live chat powinien kosztować twoją stronę prawie nic, dopóki ktoś naprawdę nie chce pogadać. Z tego poradnika dowiesz się, co widżet czatu ładuje przed pierwszym kliknięciem, co sprawdzić, zanim jakiś wybierzesz, jak wpiąć Spookat w kilka minut i jak udowodnić w DevTools, że strona dalej jest szybka.

ile widżet czatu kosztuje, zanim ktoś kliknie

Większość odwiedzających nigdy nie otwiera czatu. Czytają, scrollują, czasem kupują i wychodzą. Za wszystko, co widżet ładuje przy starcie strony, płaci każdy z nich, także ten na tanim telefonie ze słabym zasięgiem.

Ten koszt ma cztery części:

Bajty. JavaScript, CSS, fonty, obrazki i często iframe z osobnym dokumentem. JavaScript jest najdroższy: przeglądarka musi go pobrać, sparsować i wykonać na głównym wątku, tym samym, który obsługuje scroll i tapnięcia.
Requesty. Każdy request to podróż w obie strony, a requesty do nowych domen płacą jeszcze za DNS i handshake TLS. Widżet, który przy starcie woła swoje API, dokłada to do każdego wyświetlenia strony.
Storage. Cookies, localStorage i IndexedDB zapisane przed jakąkolwiek interakcją. W UE to może zdecydować, czy potrzebujesz zgody, zanim widżet w ogóle się załaduje.
Czas głównego wątku. Kod odpalany na starcie konkuruje z twoim kodem. Lighthouse raportuje to jako Total Blocking Time i widać to w wyniku.

Cztery widżety z naszych stron porównawczych ładowały od 220 do 509 kb (gzip), zanim ktokolwiek kliknął. Zmierzyliśmy to 2026-09-26: każdy widżet na pustej stronie testowej, zsumowane przesłane bajty. Liczby i źródła są na /vs. Dla skali: tekst całego tego artykułu ma mniej niż 20 kb.

Nic z tego nie jest potrzebne, żeby pokazać przycisk. Przycisk to kilkaset bajtów HTML-a i CSS-a. Cała reszta (panel czatu, połączenie z serwerem, historia) jest potrzebna dopiero po kliknięciu.

co sprawdzić, zanim wybierzesz widżet

Każdy widżet czatu ocenisz przeglądarką w dziesięć minut. Oto na co patrzeć, w kolejności od tego, co najbardziej odczują twoi userzy.

waga przed kliknięciem

Otwórz demo dostawcy albo swój staging, odpal DevTools i przeładuj z wyłączonym cache. Przefiltruj zakładkę Network po domenach dostawcy i zsumuj przesłany rozmiar. Wszystko powyżej kilku kilobajtów przed kliknięciem to kod, który twoi userzy pobierają dla panelu, którego większość z nich nigdy nie otworzy.

requesty przed kliknięciem i dokąd lecą

Policz requesty i zapisz domeny. Widżet, który gada ze swoim API przy starcie strony, wysyła coś o każdym odwiedzającym: co najmniej to, że istnieje i na jakiej jest stronie. Niektóre ładują jeszcze analitykę albo error tracking od zewnętrznych firm.

cookies i storage przed kliknięciem

Zajrzyj do zakładki Application po świeżym załadowaniu, bez dotykania widżetu. Cookies z domen widżetu albo zapisane przez niego klucze to te, które może musieć objąć baner zgody. Nie jesteśmy twoim prawnikiem, a przepisy różnią się między krajami, więc zapytaj swojego, co dotyczy twojej strony. Najprostszy do wytłumaczenia jest widżet, który nie zapisuje nic, dopóki odwiedzający nie zacznie rozmowy.

gdzie odpisuje twój zespół

Czat jest tak dobry jak odpowiedź. Jeśli odpisanie wymaga otwarcia kolejnego dashboardu, ktoś musi trzymać tę kartę otwartą cały dzień. Jeśli czaty lądują tam, gdzie zespół już gada (Slack, Discord), odpowiedź to jedna wiadomość w wątku.

ile to kosztuje, kiedy zespół rośnie

Cennik za stanowisko liczy każdą osobę, która może odpisać. Cennik za rozwiązanie liczy każdą odpowiedź. Cennik za stronę liczy stronę, niezależnie od tego, kto i jak często odpisuje.

telefon

Sprawdź przycisk czatu na ekranie szerokim na 375 px. Nie powinien zasłaniać twoich przycisków i powinien mieć co najmniej 44 px, żeby trafić w niego kciukiem. Otwórz panel i zacznij pisać: klawiatura nie powinna zasłaniać pola tekstowego.

krok po kroku: live chat ze spookat

Spookat jest zbudowany pod te właśnie testy. Snippet ładuje jeden mały launcher z naszego CDN, z wyglądem twojej strony już w środku. Przed kliknięciem robi 0 requestów do naszego API i nie ustawia żadnych cookies. Twój zespół odpisuje w wątku na Slacku albo w poście na forum Discorda. Kosztuje 19 zł miesięcznie za stronę na broke af, bez limitu osób w zespole, a trial to 14 dni bez karty.

1. weź swój snippet

Zaloguj się do dashboardu i dodaj stronę. Strona instalacji pokazuje snippet z twoim kluczem strony już w środku i przycisk do kopiowania. Możesz ją otworzyć od razu, z domeną w adresie:

https://app.spookat.com/install?domain=your-domain.com

2. wklej go przed zamykającym tagiem body

Jeden tag, gdziekolwiek na stronie, najlepiej tuż przed </body>:

<script src="https://cdn.spookat.com/s/YOUR_SITE_KEY.js" async></script>

async znaczy, że przeglądarka dalej renderuje stronę, a plik odpala, kiedy dojdzie. Ten plik to launcher: przycisk, jego style i wygląd opublikowany w dashboardzie. Build się wywala, jeśli launcher przekroczy 4 kb po gzipie. 2026-09-27 ważył 2,0 kb.

Jeśli masz single-page appkę, wrzuć tag do głównego szablonu HTML, nie do komponentu, który się przerenderowuje. Launcher sprawdza, czy już istnieje, więc druga kopia nic nie zrobi, ale jeden tag w jednym miejscu łatwiej ogarnąć.

3. wybierz wygląd

Masz 8 stylów i 12 fontów hostowanych u nas, plus systemowy font odwiedzającego. Wybierz je w dashboardzie i opublikuj; launcher łapie nowy wygląd w ciągu minuty. Albo ustaw go na stronie, nad snippetem, i wtedy wygrywa z dashboardem:

<script>
  window.Spookat = { style: "clean", font: "system", accent: "#2F6FEB", side: "right" };
</script>
<script src="https://cdn.spookat.com/s/YOUR_SITE_KEY.js" async></script>

font: "system" nie pobiera żadnego fontu. Każdy inny font leci z naszego CDN, dopiero po kliknięciu, nigdy z Google. accent przyjmuje kolor hex, a kolor tekstu na nim dobieramy pod kontrast. Pełna lista kluczy jest w dokumentacji.

4. podłącz slacka albo discorda

W dashboardzie podłącz kanał. Połączenie zatwierdzasz w samym Slacku albo Discordzie, a potem wybierasz kanał z listy. Nie jesteś adminem workspace’u? Dashboard da ci jednorazowy link dla tego, kto nim jest, ważny 7 dni, bez zakładania konta w Spookat.

Od tej chwili każda rozmowa to wątek na Slacku albo post na forum Discorda.

5. odpisuj z wątku

Odpisz w wątku, a odwiedzający zobaczy to w widżecie. Wiadomość zaczynająca się od // zostaje wewnętrzna, więc możesz dopytać kogoś z zespołu tak, żeby odwiedzający tego nie czytał. Odwiedzający widzą twoje imię ze Slacka albo nick z Discorda; /spookat me pokazuje je albo zmienia, osobno dla każdej strony.

Jeśli odwiedzający wyszedł, zanim odpisałeś, i zostawił maila, na cool guy i wyżej dostanie odpowiedź mailem, w języku widżetu. Na broke af odpowiedź czeka w widżecie na jego następną wizytę.

albo: niech zrobi to twój agent

Jeśli budujesz z Claude Code, Cursorem albo innym agentem, wklej to i daj mu przeczytać manual:

Add Spookat chat to my site. Read https://spookat.com/llms.txt first, then match the chat style to my site.

Agent znajdzie główny szablon, doda snippet i dobierze styl pod twoją stronę. Podłączenie Slacka albo Discorda i płatność zostają po twojej stronie: oba zatwierdza człowiek.

sprawdź to w devtools

Nie wierz dostawcy na słowo, nam też nie. Tak sprawdzisz własną stronę w Chrome. Firefox i Safari mają te same panele, trochę inaczej nazwane.

zakładka network, przed kliknięciem

Otwórz stronę w oknie prywatnym, żeby nie mieszał się stary storage ani cache.
Odpal DevTools, wejdź w Network, zaznacz „Disable cache” i przeładuj.
Wpisz spookat w pole filtra.

Powinieneś zobaczyć jeden request: launcher z cdn.spookat.com, około 2 kb przesłane. Nic nie idzie do api.spookat.com. Jeśli widzisz więcej, załadowało to coś innego na stronie (na przykład drugi snippet w tag managerze).

zakładka application, przed kliknięciem

Otwórz Application, potem Cookies i Local storage dla swojej domeny. Spookat nic tu nie zapisuje przy ładowaniu strony. Nie ustawia żadnych cookies, nigdy. Jedyny klucz w storage, spookat: plus klucz twojej strony, pojawia się dopiero po pierwszej wiadomości odwiedzającego: trzyma jego rozmowę na tym urządzeniu.

po kliknięciu

Wyczyść log w Network i kliknij launcher. Teraz z CDN ładuje się panel: jego skrypt (16,6 kb po gzipie 2026-09-27) i arkusz stylów twojego stylu (około 2 kb). Jeśli wybrałeś font, dochodzi też font. Potem panel otwiera połączenie z naszym API i odwiedzający może pisać.

Cały trik polega na tym, że droga część przesuwa się za kliknięcie i pobierają ją tylko ci, którzy chcą pogadać.

lighthouse

Odpal Lighthouse w trybie mobile na stronie bez snippetu i ze snippetem, po kilka razy, i porównaj mediany. Pojedyncze przebiegi na tej samej stronie różnią się o kilka punktów, więc jeden przebieg nic nie udowadnia. Przy 2 kb launchera i zerowej pracy przed kliknięciem różnica powinna zmieścić się w tym szumie.

cztery sposoby, żeby lekki widżet znowu przytył

Mały launcher zostaje mały tylko wtedy, gdy strona wokół mu na to pozwala. Te błędy widzimy najczęściej i każdy po cichu kasuje całą robotę z góry.

Czat, który otwiera się sam. Panel wyskakujący po dziesięciu sekundach ładuje cały czat każdemu odwiedzającemu, także temu, który właśnie miał kupić. Na telefonie zasłania jeszcze stronę. Jeśli chcesz zagadać pierwszy, napisz powitanie; pokaże się, kiedy ktoś otworzy czat.

Preload panelu, „żeby było szybciej”. <link rel="preload"> albo prefetch dla skryptu panelu przesuwa jego pobieranie z powrotem przed kliknięcie, dla wszystkich. Po kliknięciu to dwa krótkie requesty do CDN blisko odwiedzającego. Niech czekają na kliknięcie.

Tag manager dookoła. Tag manager to skrypt, który ładuje inne skrypty. Jeśli siedzi na stronie tylko po to, żeby trzymać snippet czatu, kosztuje więcej niż sam czat. Wrzuć tag prosto do szablonu.

Dwa snippety. Motyw dodaje jeden, plugin drugi, ktoś wkleja trzeci do stopki. Launcher ignoruje własne duplikaty, ale inne widżety często nie, i kończysz z dwoma czatami, które biją się o ten sam róg. Przeszukaj szablony pod kątem cdn.spookat.com (albo domeny starego dostawcy) i zostaw jeden.

co się dzieje z danymi

Kiedy odwiedzający wysyła wiadomość, najpierw ją zapisujemy, potem wrzucamy do wątku na Slacku albo posta na Discordzie. Nigdy nie zapisujemy adresu IP. Kraj odwiedzającego sprawdzamy w offline’owej bazie w momencie wysłania wiadomości, a adresu nie trzymamy. Historia czatów zostaje 30 dni na broke af, 90 na cool guy i 365 na vc money, potem ją kasujemy. Szczegóły, łącznie z podwykonawcami, są na stronie o prywatności.

checklista na później

Dla każdego widżetu czatu, nie tylko naszego:

Snippet ładuje się z async albo defer i nie blokuje renderowania.
Przed kliknięciem: kilka kilobajtów, jeden request, zero requestów do API dostawcy.
Zero cookies i zero storage, zanim odwiedzający zacznie rozmowę.
Launcher nie zasłania twoich przycisków na ekranie 375 px.
Panel i jego fonty ładują się dopiero po kliknięciu.
Zespół odpisuje tam, gdzie już pracuje, bez kolejnej karty do niańczenia.
Cennik nie karze cię za dodanie osoby do zespołu.
Zmierzyłeś to sam, z wyłączonym cache, w oknie prywatnym.

Sprawdź to na swojej stronie: trial trwa 14 dni i nie wymaga karty.