dodaj live chat do strony zrobionej w lovable, bolt albo v0

28 października 2026 · pisze kuba · 6 min czytania

Zbudowałeś stronę, opisując ją, więc czat dodaj tak samo. W tym poradniku dostajesz prompt do Lovable, Bolt albo v0, widzisz, gdzie snippet powinien wylądować w wygenerowanym kodzie, i jak na opublikowanej stronie sprawdzić, że nic nie ładuje się przed kliknięciem.

co generują te buildery

Z poziomu okienka czatu te trzy narzędzia wyglądają podobnie, ale piszą różne projekty, a to decyduje, gdzie idzie jeden tag script:

Lovable generuje appkę Vite + React. W katalogu głównym projektu jest index.html; do niej renderuje się każda podstrona.
Bolt generuje to, o co poprosisz. Większość projektów to appki Vite z index.html; niektóre to Next.js, Astro albo czysty HTML (ten ostatni opisuje poradnik o czystym HTML).
v0 generuje Next.js z app routerem. Wspólna strona to app/layout.tsx.

Czat potrzebuje jednego tagu na każdej stronie. W single-page appce to znaczy index.html. W Next.js to znaczy główny layout. Nigdzie indziej.

zanim zaczniesz: domena

Spookat wiąże stronę z jej domeną. Czat łączy się tylko z tej domeny i jej subdomen, i to jeden z powodów, dla których nikt nie skopiuje twojego snippetu na swoją stronę.

Przy builderach to ma znaczenie, bo twój projekt żyje pod kilkoma adresami:

podgląd w builderze, na domenie buildera
opublikowany adres, który daje builder, zwykle subdomena na ich domenie
twoja własna domena, jeśli ją podpiąłeś

Zarejestruj stronę pod adresem, którego będą używać odwiedzający. Jeśli to własna domena, użyj jej; www i inne subdomeny wchodzą w pakiecie. Jeśli publikujesz na subdomenie buildera, zarejestruj pełną subdomenę, nie główną domenę buildera. W podglądzie buildera launcher się pokaże, ale czat się nie połączy. Testuj na opublikowanej stronie.

prompt

Najpierw potrzebujesz klucza strony. W dashboardzie Spookat dodaj stronę z właściwą domeną; strona instalacji pokaże snippet. Potem wklej to do czatu buildera, z twoim kluczem zamiast YOUR_SITE_KEY:

Add this live chat script to every page of the site. It must be exactly one tag, loaded once, right before the closing </body> tag of the shared HTML (index.html in a Vite app, the root layout in Next.js). Keep the async attribute. Do not wrap it in a React component, do not add it to individual pages, do not preload anything.

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

Prompt jest tak konkretny celowo. Buildery lubią pomagać, a „dodaj widżet czatu” potrafi skończyć się nowym komponentem Reacta, własnym pływającym przyciskiem albo tagiem wklejonym na pięć stron. Spookat potrzebuje jednego tagu w jednym miejscu: launcher sam rysuje swój przycisk.

wygląd w tym samym prompcie

Wygląd widżetu ustawiasz w dashboardzie Spookat i jedzie on w środku launchera, więc builder nie musi nic o nim wiedzieć. Jeśli wolisz trzymać go w kodzie, dopisz do promptu drugą linijkę:

Above that script, add: <script>window.Spookat = { style: "clean", accent: "#2F6FEB", side: "right" };</script>

Stylów jest 8. accent to kolor twojej marki w hex; kolor tekstu na nim dobieramy pod kontrast. Dokumentacja wymienia wszystkie klucze.

gdzie to powinno wylądować

Otwórz widok kodu i sprawdź. W appce Vite (Lovable, większość projektów w Bolcie) index.html powinien kończyć się tak:

    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
    <script src="https://cdn.spookat.com/s/YOUR_SITE_KEY.js" async></script>
  </body>
</html>

W Next.js (v0, część projektów w Bolcie) app/layout.tsx dostaje tag wewnątrz <body>, po {children}:

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <script src="https://cdn.spookat.com/s/YOUR_SITE_KEY.js" async></script>
      </body>
    </html>
  );
}

Jeśli builder użył zamiast tego next/script, też jest okej, ze strategy="afterInteractive" albo "lazyOnload". Czego nie chcesz zobaczyć:

tagu w komponencie konkretnej strony, jak Home.tsx albo app/page.tsx: czat istniałby tylko na tej stronie
useEffect, który tworzy element script: działa, ale to więcej kodu na ten sam tag
przycisku albo panelu czatu, który builder narysował sam: wywal go, Spookat przynosi własny

Jeśli coś poszło nie tak, powiedz to jednym zdaniem: „Remove the chat code you added and put only the script tag in index.html.” Buildery dobrze naprawiają takie rzeczy, kiedy polecenie jest konkretne.

opublikuj, potem sprawdź

Opublikuj stronę i otwórz opublikowany adres w oknie prywatnym. Odpal DevTools:

Network, zaznacz „Disable cache”, przeładuj i wpisz spookat w filtr. Powinieneś zobaczyć jeden request: launcher z cdn.spookat.com, około 2 kb. 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, cookies i local storage: nic od Spookat.
Kliknij launcher. Panel ładuje się z CDN. Napisz testową wiadomość. Z podłączonym Slackiem albo Discordem pojawi się tam; odpisz i zobacz, jak dociera do widżetu.

Jeśli launcher w ogóle się nie pojawia, tag nie trafił do opublikowanego builda. Zajrzyj jeszcze raz do widoku kodu. Jeśli launcher jest, ale czat nie może się połączyć, domena w dashboardzie nie zgadza się z adresem, na którym jesteś.

Główny poradnik opisuje każdy z tych testów dokładniej.

podepnij odpowiedzi

Czat powinien docierać do ciebie tam, gdzie już jesteś. Podłącz Slacka albo Discorda w dashboardzie, wybierz kanał, a każdy odwiedzający dostanie własny wątek. Szczegóły są w poradniku o Slacku i poradniku o Discordzie.

czemu nie kazać builderowi zrobić czatu

Możesz poprosić. Builder w kilka minut zrobi ładny panel z polem tekstowym. Potem zaczynają się pytania: gdzie idą wiadomości, kto dostaje powiadomienie, jak odpowiedź dotrze do kogoś, kto zamknął kartę, co ze spamem, kto to utrzymuje. To serwer, baza, integracja ze Slackiem i wysyłka maili, i nic z tego nie jest produktem, który budowałeś.

Spookat to jeden tag, kosztuje 19 zł miesięcznie za stronę na starter, a trial trwa 14 dni bez karty.

jeśli zamiast tego używasz claude code albo cursora

Wyeksportuj projekt do repo i daj to zrobić agentowi od kodu z serwerem MCP Spookat. Dopasuje też widżet do kolorów strony i ustawi wszystko bez kopiowania kluczy. Poradnik o Claude Code pokazuje, jak.

dopasuj wygląd do wygenerowanej strony

Buildery mają rozpoznawalny styl: czysty bezszeryfowy font, miękkie cienie, zaokrąglone karty, jeden kolor akcentu. Widżet powinien wyglądać, jakby tam pasował, a nie jak naklejka z innej strony.

Styl. Do typowego wygenerowanego wyglądu zacznij od clean albo soft. Jeśli strona jest ciemniejsza i bardziej techniczna, spróbuj terminal. Jeśli dałeś jej odważny, płaski wygląd, brutal albo swiss. W dashboardzie przełączysz je i zobaczysz każdy w podglądzie na żywo, zanim opublikujesz.
Akcent. Użyj tego samego hexa co przyciski. Builder zwykle ma go w configu Tailwinda albo zmiennej CSS; zapytaj go „what is the primary color’s hex?”.
Font. system nic nie pobiera i pasuje do większości wygenerowanych stron wystarczająco dobrze. Jeśli strona używa konkretnego fontu, a my go hostujemy, wybierz go; ładuje się dopiero po kliknięciu.
Strona. Jeśli builder wstawił w prawy dolny róg własny pływający przycisk (strzałkę do góry, ikonę ustawień cookies), przenieś launcher na lewo.

co widzą twoi odwiedzający

Mały przycisk w rogu, w twoich kolorach. Nic więcej się nie dzieje, dopóki go nie klikną. Wtedy otwiera się panel z twoim powitaniem i informacją, że odpisuje człowiek. Piszą, a wiadomość ląduje w twoim wątku na Slacku albo Discordzie albo w naszym inboxie i apce na telefon. Jeśli wyjdą, zanim odpiszesz, mogą zostawić maila; na pro odpowiedź trafi tam za nimi. Widżet mówi w języku ich przeglądarki, jednym z 12, chyba że ustawisz inny.

po tym, jak builder coś przegeneruje

Buildery nadpisują pliki. Duża zmiana layoutu („zrób z tego dashboard”, „przejdź na dark mode”) potrafi po cichu wyrzucić tag z index.html albo głównego layoutu. Po dużej regeneracji otwórz opublikowaną stronę i sprawdź, czy launcher dalej jest. Jeśli zniknął, ten sam prompt go przywróci.

więcej niż jeden projekt

Buildery sprawiają, że druga i trzecia strona to chwila. W Spookat każda z nich to osobna strona, z własnym kluczem, domeną, wyglądem i kanałem, więc czat nigdy nie ląduje w wątku innego projektu. Pierwsza strona na koncie płaci pełną cenę; każda kolejna na tym samym koncie, opłacana przez Spookat, ma 30% zniżki, na każdym planie. Kilka stron może dzielić jeden kanał na Slacku albo Discordzie, jeśli odpisują na nie te same osoby, ale karta pokazuje tylko ścieżkę podstrony, nie to, z której strony przyszedł czat. Jeśli musisz je rozróżniać, daj każdej stronie osobny kanał.

checklista

Strona jest zarejestrowana pod adresem, którego używają odwiedzający.
Jeden tag, async, w index.html albo głównym layoucie.
Żadnego przycisku ani komponentu czatu, który builder zrobił sam.
Przetestowane na opublikowanej stronie, nie w podglądzie.
Jeden request przed kliknięciem (dwa, oba z cdn.spookat.com, jeśli twój kod ustawia nieopublikowany styl), zero cookies.
Slack albo Discord podłączony.

Opisz, opublikuj, sprawdź. A potem odpisz na pierwsze pytanie z wątku.