dodaj live chat do strony w czystym html

30 września 2026 · pisze kuba · 6 min czytania

Strona w czystym HTML potrzebuje dokładnie jednej linijki, żeby mieć live chat: tagu script przed </body>. Z tego poradnika dowiesz się, gdzie ta linijka idzie na ręcznie pisanych stronach i na stronach z generatora statycznego, jakie opcje możesz ustawić obok niej i jak w przeglądarce sprawdzić, że nic nie ładuje się przed kliknięciem.

ta linijka

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

Klucz strony jest na stronie instalacji w dashboardzie, już wklejony w snippet, z przyciskiem do kopiowania. Zaczyna się od site_live_ i jest publiczny: i tak jest w źródle twojej strony, a działa tylko na domenie, którą zarejestrowałeś.

Plik, który się ładuje, to launcher: przycisk, jego style i wygląd opublikowany w dashboardzie. Ma poniżej 4 kb po gzipie (powyżej build się wywala). Robi 0 requestów do naszego API i nie ustawia cookies. Panel czatu i połączenie z naszym serwerem ładują się dopiero, gdy odwiedzający kliknie.

Dopiero zaczynasz? Główny poradnik tłumaczy, ile widżet czatu kosztuje stronę i na co patrzeć.

gdzie to idzie

Tuż przed zamykającym tagiem </body>:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My site</title>
    <link rel="stylesheet" href="/style.css">
  </head>
  <body>
    <h1>Hello</h1>
    <p>Everything else on your page.</p>

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

Czemu tam i czemu async:

Na końcu body tag niczego nad sobą nie wstrzymuje. Zanim przeglądarka do niego dojdzie, twoja treść już jest.
async mówi przeglądarce, żeby pobrała plik w tle i odpaliła go, kiedy dojdzie, bez zatrzymywania strony. Zostaw go.

na każdej stronie, raz

Czat powinien być na każdej stronie, na której odwiedzający może mieć pytanie, czyli zwykle na wszystkich. Jak go tam dostarczyć, zależy od tego, jak zrobiona jest strona.

Ręcznie pisane strony. Wklej tag do każdego pliku .html. Przeszukaj folder pod kątem </body>, żeby znaleźć wszystkie. Kiedy później dodajesz stronę, kopiuj istniejącą jako punkt wyjścia, a tag przejdzie razem z nią.

Wspólna stopka. Jeśli strony dołączają wspólny plik stopki (server-side include, include w PHP, partial szablonu), wrzuć tag tam, raz.

Generatory stron statycznych. Wrzuć go do bazowego layoutu, szablonu, który rozszerza każda strona:

generator	plik
Jekyll	`_layouts/default.html` albo `_includes/footer.html`
Hugo	`layouts/_default/baseof.html` albo partial stopki
Eleventy	twój bazowy layout w `_includes/`
Astro	bazowy komponent layoutu
Pandoc, własne skrypty	szablon HTML, który przekazujesz

Nie przejmuj się stroną, która skończy z tagiem dwa razy: launcher sprawdza, czy już jest na stronie, a druga kopia nic nie robi. To wciąż zmarnowany request, więc zostaw jeden.

konfiguracja w kodzie

Wygląd wybrany w dashboardzie jedzie w środku launchera, więc ta jedna linijka to cała instalacja. Jeśli wolisz trzymać ustawienia w HTML-u, ustaw window.Spookat w skrypcie nad tagiem:

<script>
  window.Spookat = {
    style: "clean",
    font: "system",
    accent: "#2F6FEB",
    side: "right",
    greeting: "hi. questions about an order? ask here.",
    lang: "en"
  };
</script>
<script src="https://cdn.spookat.com/s/YOUR_SITE_KEY.js" async></script>

Jeśli strona i dashboard się nie zgadzają, wygrywa strona. Co robi każdy klucz:

klucz	co przyjmuje	co robi
`style`	jeden z 8 stylów	wygląd. `brutal`, `clean`, `glass`, `soft`, `terminal`, `paper`, `retro`, `swiss`
`font`	`"system"` albo jeden z 17 fontów hostowanych u nas	font widżetu. `system` nic nie pobiera; hostowane fonty ładują się z naszego CDN po kliknięciu, nigdy z Google
`accent`	`"#RRGGBB"`	kolor twojej marki. Kolor tekstu na nim dobieramy pod kontrast
`side`	`"right"` albo `"left"`	gdzie siedzi launcher
`greeting`	tekst, do 200 znaków	pierwsza wiadomość, którą widzi odwiedzający. Pusty znaczy domyślny dla stylu
`label`	tekst, do 40 znaków	zamienia okrągły przycisk w pigułkę z tym tekstem
`lang`	kod języka, np. `"en"` albo `"pl"`	język widżetu. Domyślnie język przeglądarki odwiedzającego, potem angielski
`user`	`{ id, sig }`, na cool guy i wyżej	kto jest zalogowany, podpisane na twoim serwerze

Dokumentacja ma pełną listę, łącznie z tym, jak podpisać user.

strona wielojęzyczna

Jeśli twoja strona ma folder na język (/en/, /pl/), ustaw lang dla każdego folderu, żeby widżet pasował do strony, a nie do przeglądarki. Widżet mówi w 12 językach. Twój zespół widzi język odwiedzającego przy każdym czacie.

launcher, który coś mówi

Prosta strona często ma jedno oczywiste pytanie, które zadają odwiedzający: „wysyłacie do…”, „mogę zarezerwować…”. label w stylu "pytania? odpisuje człowiek" zamienia ikonę w małą pigułkę, która to mówi. Trzymaj go krótkim; na telefonach też siedzi w rogu.

co dostaje odwiedzający

Przycisk w rogu, w twoich kolorach. Kliknięcie otwiera panel z twoim powitaniem i informacją, że odpisuje człowiek. Pisze; wiadomość ląduje w twoim wątku na Slacku albo Discordzie albo w naszym inboxie i apce na telefon; twoja odpowiedź wraca do widżetu. Jeśli wyjdzie, zanim odpiszesz, i zostawił maila, na cool guy i wyżej dostanie odpowiedź mailem. Czat zostaje na jego urządzeniu między stronami i przy kolejnych wizytach, dopóki historia nie wygaśnie (30 dni na broke af).

sprawdź to

Otwórz stronę w oknie prywatnym, żeby nie mieszał się stary cache ani storage. Potem odpal DevTools (F12 albo prawy klik i Zbadaj).

Network. Zaznacz „Disable cache”, przeładuj i wpisz spookat w filtr. Jeden request: launcher z cdn.spookat.com, około 2 kb przesłane. Dwa, oba z cdn.spookat.com, jeśli twój kod ustawia w window.Spookat inny styl niż opublikowany. Nic do api.spookat.com.
Application (Storage w Firefoksie). Cookies: nic od Spookat. Local storage: jeszcze nic. Jeden klucz pojawia się dopiero po wysłaniu pierwszej wiadomości; trzyma twój czat na tym urządzeniu.
Kliknij launcher. Teraz z CDN ładuje się skrypt panelu i arkusz stylów twojego stylu, potem czat się łączy. Wyślij testową wiadomość i zobacz, jak dociera na Slacka albo Discorda.

Jeśli launcher się nie pokazuje:

W Network pusto. Tagu nie ma na tej stronie, siedzi w komentarzu HTML albo twój build go wyciął. Otwórz źródło strony i wyszukaj spookat.
Request się wywala. Klucz o złej długości dostaje od CDN 404. Porównaj klucz w adresie z tym w dashboardzie.
Launcher jest w domyślnym wyglądzie i nigdy się nie łączy. Jeden zły znak w kluczu i launcher i tak się ładuje. Porównaj klucz z tym w dashboardzie.
Launcher jest, ale czat się nie łączy. Jesteś na innej domenie niż zarejestrowana: lokalny plik, localhost albo host stagingowy. Czat łączy się tylko na twojej domenie i jej subdomenach.
Blokuje go Content Security Policy. Konsola poda dyrektywę. Wpuść https://cdn.spookat.com dla skryptów, stylów i fontów, wss://api.spookat.com dla połączenia oraz data: dla obrazków, bo logo i zdjęcia członków zespołu to obrazki data:. Launcher wstrzykuje też jeden mały blok <style> do własnego shadow roota, więc style-src musi dla niego wpuszczać inline style. Jeśli ustawiasz window.Spookat w skrypcie inline, daj mu nonce albo hash z twojej polityki.

czego nie dokładać

Proste strony są szybkie, bo nic im nie przeszkadza. Niech tak zostanie:

Żadnego tag managera tylko dla czatu. To skrypt, który ładuje skrypty, i waży więcej niż launcher.
Żadnego preload ani prefetch dla panelu. Przesunąłby pobieranie panelu przed kliknięcie, dla każdego odwiedzającego.
Żadnego żonglowania defer i async. Dla tego tagu samo async jest właściwe.
Żadnego wrappera, który otwiera czat po kilku sekundach. Ładuje cały panel każdemu i zasłania stronę na telefonach. Powitanie robi to samo, kiedy ktoś naprawdę otworzy czat.

hosting nie ma znaczenia

GitHub Pages, Netlify, Cloudflare Pages, folder na FTP na współdzielonym hostingu, serwer w szafie: tag to zwykły HTML, więc działa wszędzie, skąd serwowane są twoje pliki. Bez builda, bez paczki, bez kodu na serwerze.

podepnij odpowiedzi

Ostatni krok: podłącz Slacka albo Discorda w dashboardzie i wybierz kanał albo to pomiń i odpowiadaj w naszym inboxie i apce na telefon. Każdy odwiedzający dostaje własny wątek, odpisać może każdy na kanale i nie ma stanowisk. Kosztuje 19 zł miesięcznie za stronę na broke af.

checklista

Jeden tag, z async, przed </body>, na każdej stronie (albo raz we wspólnym layoucie).
Opcjonalnie window.Spookat nad nim, jeśli trzymasz ustawienia w kodzie.
Sprawdzone w oknie prywatnym: jeden request przed kliknięciem (dwa, oba z cdn.spookat.com, jeśli twój kod ustawia nieopublikowany styl), zero cookies.
Testowa wiadomość z widżetu dotarła na Slacka albo Discorda.

Trial trwa 14 dni i nie wymaga karty. Wklej linijkę, a twoja statyczna strona zacznie odpowiadać na pytania.