live chat op een site gebouwd met lovable, bolt of v0

28 oktober 2026 · door kuba · 7 min lezen

Je hebt de site gebouwd door hem te beschrijven, dus voeg de chat op dezelfde manier toe. Deze gids geeft je een prompt voor Lovable, Bolt of v0, laat zien waar de snippet moet belanden in de code die ze genereren, en hoe je op de gepubliceerde site controleert dat er voor een klik niets laadt.

wat deze builders genereren

Vanuit het chatvenster lijken de drie tools op elkaar, maar ze schrijven verschillende soorten projecten, en dat bepaalt waar één script-tag komt:

Lovable genereert een Vite- en React-app. In de root van het project staat een index.html; dat is de pagina waarin elke route rendert.
Bolt genereert wat je vroeg. De meeste projecten zijn Vite-apps met een index.html; sommige zijn Next.js, Astro of pure HTML (de gids voor pure HTML behandelt dat laatste).
v0 genereert Next.js met de app router. De gedeelde pagina is app/layout.tsx.

De chat heeft één tag op elke pagina nodig. In een single-page app betekent dat index.html. In Next.js de root-layout. Nergens anders.

voordat je begint: het domein

Spookat koppelt een site aan zijn domein. De chat maakt alleen verbinding vanaf dat domein en de subdomeinen ervan, en dat is een van de redenen waarom niemand je snippet op zijn eigen site kan kopiëren.

Bij builders is dat belangrijk, omdat je project op meerdere adressen leeft:

de preview in de builder, op het eigen domein van de builder
het gepubliceerde adres dat de builder je geeft, meestal een subdomein van hem
je eigen domein, als je er een hebt gekoppeld

Registreer de site onder het adres dat bezoekers gaan gebruiken. Is dat een eigen domein, gebruik dat dan; www en andere subdomeinen zijn inbegrepen. Publiceer je op het subdomein van de builder, registreer dan dat volledige subdomein, niet het hoofddomein van de builder. In de preview van de builder verschijnt de launcher wel, maar maakt de chat geen verbinding. Test op de gepubliceerde site.

de prompt

Eerst heb je je sitekey nodig. Voeg in het Spookat-dashboard de site toe met het juiste domein; de installatiepagina toont de snippet. Plak dan dit in de chat van de builder, met je key in plaats van 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>

De prompt is met opzet zo specifiek. Builders helpen graag, en “voeg een chatwidget toe” kan uitdraaien op een nieuw React-component, een eigen zwevende knop of de tag in vijf pagina’s geplakt. Eén tag op één plek is alles wat Spookat nodig heeft: de launcher tekent zijn eigen knop.

de look, in dezelfde prompt

De look van de widget stel je in het Spookat-dashboard in en die zit in de launcher, dus de builder hoeft er niets van te weten. Hou je hem liever in de code, voeg dan een tweede regel toe aan de prompt:

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

Er zijn 8 styles. accent is je merkkleur als hexwaarde; de tekstkleur daarop wordt gekozen op contrast. De docs noemen elke key.

waar hij moet belanden

Open de codeweergave en controleer het. In een Vite-app (Lovable, de meeste Bolt-projecten) hoort index.html zo te eindigen:

    <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>

In Next.js (v0, sommige Bolt-projecten) krijgt app/layout.tsx de tag binnen <body>, na {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>
  );
}

Heeft de builder in plaats daarvan next/script gebruikt, dan is dat ook goed, met strategy="afterInteractive" of "lazyOnload". Wat je niet wilt zien:

de tag in een paginacomponent, zoals Home.tsx of app/page.tsx: de chat zou dan alleen op die pagina bestaan
een useEffect die het script-element aanmaakt: het werkt, maar het is meer code voor dezelfde tag
een chatknop of -paneel dat de builder zelf tekende: verwijder het, Spookat neemt zijn eigen mee

Ging het mis, zeg dat dan in één zin: “Remove the chat code you added and put only the script tag in index.html.” Builders lossen dit soort dingen goed op als de instructie concreet is.

publiceer, controleer dan

Publiceer de site en open het gepubliceerde adres in een privévenster. Open DevTools:

Network, vink “Disable cache” aan, herlaad en typ spookat in het filter. Je zou één request moeten zien: de launcher van cdn.spookat.com, ongeveer 2 kb. Twee, allebei van cdn.spookat.com, als je code in window.Spookat een andere style zet dan de style die je hebt gepubliceerd. Niets naar api.spookat.com.
Application, cookies en local storage: niets van Spookat.
Klik op de launcher. Het paneel laadt van het CDN. Schrijf een testbericht. Met Slack of Discord gekoppeld verschijnt het daar; antwoord en kijk hoe het in de widget aankomt.

Verschijnt de launcher helemaal niet, dan heeft de tag de gepubliceerde build niet gehaald. Kijk nog eens in de codeweergave. Verschijnt de launcher wel maar maakt de chat geen verbinding, dan klopt het domein in het dashboard niet met het adres waar je bent.

De basisgids legt elk van deze checks uitgebreider uit.

koppel de antwoorden

De chat hoort je te bereiken waar je al bent. Koppel Slack of Discord in het dashboard, kies een kanaal, en elke bezoeker krijgt een eigen thread. De Slack-gids en de Discord-gids behandelen de details.

waarom de builder geen chat laten maken

Je zou het kunnen vragen. De builder maakt in een paar minuten een mooi paneel met een tekstveld. Dan beginnen de vragen: waar gaan de berichten heen, wie krijgt een melding, hoe bereikt het antwoord een bezoeker die het tabblad sloot, wat gebeurt er met spam, wie houdt het draaiende. Dat is een server, een database, een Slack-integratie en een e-mailpipeline, en niets daarvan is het product dat je aan het bouwen was.

Spookat is één tag, kost € 4,99 per maand per site op starter, en de proefperiode is 14 dagen zonder kaart.

als je claude code of cursor gebruikt

Exporteer het project naar een repo en laat een coding agent het doen met de MCP-server van Spookat. Hij kan de widget ook afstemmen op de kleuren van je site en alles instellen zonder dat jij keys kopieert. De Claude Code-gids loopt het met je door.

stem de look af op een gegenereerde site

Builders maken meestal een herkenbare stijl: een strakke sans-serif, zachte schaduwen, afgeronde kaarten, één accentkleur. De widget moet eruitzien alsof hij erbij hoort, niet als een sticker van een andere site.

Style. Voor de typische gegenereerde look begin je met clean of soft. Is je site donkerder en technischer, probeer dan terminal. Gaf je hem een uitgesproken, platte look, dan brutal of swiss. Je kunt in het dashboard wisselen en elke style in een live preview zien voordat je publiceert.
Accent. Gebruik dezelfde hexwaarde als je knoppen. De builder heeft die meestal in zijn Tailwind-config of een CSS-variabele; vraag hem “what is the primary color’s hex?”
Font. system downloadt niets en lijkt genoeg op de meeste gegenereerde sites. Gebruikt je site een specifiek font en hosten wij dat, kies het dan; het laadt pas na de klik.
Kant. Heeft de builder rechtsonder een eigen zwevende knop gezet (een pijl naar boven, een icoon voor cookie-instellingen), zet de launcher dan links.

wat je bezoekers zien

Een kleine knop in de hoek, in jouw kleuren. Verder gebeurt er niets tot ze klikken. Dan opent het paneel met je begroeting en een regel dat er een mens antwoordt. Ze typen, en het bericht komt in je Slack- of Discord-thread, of in onze inbox en de telefoonapp. Gaan ze weg voordat je antwoordt, dan kunnen ze een e-mailadres achterlaten; op pro volgt het antwoord hen daarheen. De widget spreekt de taal van hun browser, een van 12, tenzij je er een vastzet.

nadat de builder opnieuw genereert

Builders herschrijven bestanden. Een grote wijziging aan de layout (“maak er een dashboard van”, “schakel over op dark mode”) kan de tag ongemerkt uit index.html of de root-layout halen. Open na een grote regeneratie de gepubliceerde site en check of de launcher er nog is. Is hij weg, dan zet dezelfde prompt hem terug.

meer dan één project

Met builders is een tweede en derde site zo gestart. In Spookat is elk daarvan een eigen site, met een eigen key, domein, look en kanaal, dus een chat landt nooit in de thread van het verkeerde project. De eerste site in een account betaalt de volle prijs; elke volgende site in hetzelfde account die je via Spookat betaalt is 30% goedkoper, op elk plan. Meerdere sites kunnen één Slack- of Discord-kanaal delen als dezelfde mensen ze allemaal beantwoorden, maar de kaart laat alleen het paginapad zien, niet van welke site een chat komt. Geef elke site een eigen kanaal als je ze uit elkaar moet houden.

checklist

De site is geregistreerd onder het adres dat bezoekers gebruiken.
Eén tag, async, in index.html of de root-layout.
Geen chatknop of -component die de builder zelf maakte.
Getest op de gepubliceerde site, niet in de preview.
Eén request voor een klik (twee, allebei van cdn.spookat.com, als je code een style zet die je niet hebt gepubliceerd), geen cookies.
Slack of Discord gekoppeld.

Beschrijf het, publiceer het, controleer het. Beantwoord dan de eerste vraag vanuit een thread.