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

Prompt do wklejenia w Lovable, Bolt albo v0, gdzie powinien trafić snippet czatu w wygenerowanym kodzie i jak sprawdzić efekt na opublikowanej stronie.

2026-10-28 · Kuba

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](/pl/blog/live-chat-plain-html-site/)).
- **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`:

```text
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ę:

```text
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](/pl/docs/) 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:

```html
    <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}`:

```tsx
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:

1. **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`.
2. **Application**, cookies i local storage: nic od Spookat.
3. **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](/pl/blog/add-live-chat-to-your-website/) 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](/pl/blog/answer-website-chat-from-slack/) i [poradniku o Discordzie](/pl/blog/answer-website-chat-from-discord/).

## 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](/pl/blog/claude-code-live-chat/) 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.

---
source: https://spookat.com/pl/blog/live-chat-lovable-bolt-v0/