coloque chat ao vivo num site feito com lovable, bolt ou v0

Você fez o site descrevendo como ele deveria ser, então adicione o chat do mesmo jeito. Este guia te dá um prompt para o Lovable, o Bolt ou o v0, mostra onde o snippet deve ficar no código que eles geram e como conferir no site publicado que nada carrega antes de um clique.

o que essas ferramentas geram

Pela caixa de chat as três parecem iguais, mas elas escrevem tipos diferentes de projeto, e é isso que decide onde uma tag script vai:

• Lovable gera um app Vite com React. Tem um index.html na raiz do projeto; é a página em que toda rota é renderizada.
• Bolt gera o que você pediu. A maioria dos projetos são apps Vite com um index.html; alguns são Next.js, Astro ou HTML puro (o guia de HTML puro cobre esse último caso).
• v0 gera Next.js com o app router. A página compartilhada é app/layout.tsx.

O chat precisa de uma tag em cada página. Num single-page app, isso quer dizer index.html. No Next.js, o layout raiz. Em nenhum outro lugar.

antes de começar: o domínio

O Spookat liga um site ao domínio dele. O chat só conecta a partir desse domínio e dos subdomínios dele, e esse é um dos motivos pelos quais ninguém consegue copiar seu snippet para o próprio site.

Com essas ferramentas isso importa, porque seu projeto vive em vários endereços:

• a pré-visualização dentro da ferramenta, no domínio da própria ferramenta
• o endereço publicado que a ferramenta te dá, geralmente um subdomínio dela
• seu domínio próprio, se você conectou um

Registre o site no endereço que os visitantes vão usar. Se for um domínio próprio, use ele; o www e os outros subdomínios estão incluídos. Se você publica no subdomínio da ferramenta, registre esse subdomínio completo, não o domínio principal da ferramenta. Na pré-visualização da ferramenta o botão aparece, mas o chat não conecta. Teste no site publicado.

o prompt

Primeiro você precisa da chave do site. No painel do Spookat, adicione o site com o domínio certo; a página de instalação mostra o snippet. Depois cole isto no chat da ferramenta, com a sua chave no lugar de 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>

O prompt é específico assim de propósito. Essas ferramentas adoram ajudar, e “adicione um widget de chat” pode virar um componente React novo, um botão flutuante próprio ou a tag colada em cinco páginas. Uma tag num lugar só é tudo o que o Spookat precisa: o botão do chat é desenhado por ele mesmo.

a aparência, no mesmo prompt

A aparência do widget é definida no painel do Spookat e vai dentro do botão, então a ferramenta não precisa saber dela. Se você prefere manter no código, adicione uma segunda linha ao prompt:

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

São 8 estilos. accent é a cor da sua marca em hexadecimal; a cor do texto por cima é escolhida pelo contraste. A documentação lista todas as chaves.

onde ela deve ficar

Abra a visualização do código e confira. Num app Vite (Lovable, a maioria dos projetos do Bolt), o index.html deve terminar assim:

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

No Next.js (v0, alguns projetos do Bolt), o app/layout.tsx recebe a tag dentro de <body>, depois de {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>
  );
}

Se a ferramenta usou next/script, também está ok, com strategy="afterInteractive" ou "lazyOnload". O que você não quer ver:

• a tag dentro de um componente de página, como Home.tsx ou app/page.tsx: o chat só existiria naquela página
• um useEffect que cria o elemento script: funciona, mas é mais código para a mesma tag
• um botão ou painel de chat que a própria ferramenta desenhou: apague, o Spookat traz o dele

Se deu errado, diga numa frase: “Remove the chat code you added and put only the script tag in index.html.” Essas ferramentas consertam bem esse tipo de coisa quando a instrução é concreta.

publique e depois confira

Publique o site e abra o endereço publicado numa janela anônima. Abra o DevTools:

1. Network, marque “Disable cache”, recarregue e digite spookat no filtro. Você deve ver uma requisição: o botão vindo de cdn.spookat.com, cerca de 2 kb. Duas, ambas de cdn.spookat.com, se o seu código define em window.Spookat um estilo diferente do que você publicou. Nada para api.spookat.com.
2. Application, cookies e local storage: nada do Spookat.
3. Clique no botão do chat. O painel carrega da CDN. Escreva uma mensagem de teste. Com o Slack ou o Discord conectado, ela aparece lá; responda e veja chegar no widget.

Se o botão não aparecer de jeito nenhum, a tag não entrou no build publicado. Confira a visualização do código de novo. Se o botão aparecer mas o chat não conectar, o domínio no painel não bate com o endereço em que você está.

O guia principal explica cada uma dessas checagens com mais detalhe.

conecte as respostas

O chat deve chegar até você onde você já está. Conecte o Slack ou o Discord no painel, escolha um canal, e cada visitante ganha sua própria thread. O guia do Slack e o guia do Discord explicam os detalhes.

por que não deixar a ferramenta criar um chat

Você poderia pedir. A ferramenta faz um painel bonito com uma caixa de texto em minutos. Aí começam as perguntas: para onde vão as mensagens, quem é avisado, como a resposta chega a um visitante que fechou a aba, o que fazer com spam, quem mantém isso rodando. Isso é um servidor, um banco de dados, uma integração com o Slack e um sistema de e-mails, e nada disso é o produto que você estava construindo.

O Spookat é uma tag, custa $4.99 por mês por site no starter, e o teste dura 14 dias sem cartão.

se você usa claude code ou cursor

Exporte o projeto para um repositório e deixe um agente de código fazer isso com o servidor MCP do Spookat. Ele também consegue ajustar o widget às cores do seu site e configurar tudo sem você copiar chaves. O guia do Claude Code mostra o caminho.

combine a aparência com um site gerado

Essas ferramentas costumam produzir um estilo reconhecível: uma sans-serif limpa, sombras suaves, cards arredondados, uma cor de destaque. O widget deve parecer que faz parte do site, não um adesivo de outro lugar.

• Estilo. Para o visual gerado típico, comece com clean ou soft. Se o seu site é mais escuro e técnico, teste terminal. Se você deu a ele um visual chapado e forte, brutal ou swiss. Você troca no painel e vê cada um numa pré-visualização ao vivo antes de publicar.
• Acento. Use o mesmo hexadecimal dos seus botões. A ferramenta costuma ter isso na config do Tailwind ou numa variável CSS; pergunte a ela “what is the primary color’s hex?”
• Fonte. system não baixa nada e fica parecida o suficiente com a maioria dos sites gerados. Se o seu site usa uma fonte específica e nós hospedamos, escolha ela; ela só carrega depois do clique.
• Lado. Se a ferramenta colocou um botão flutuante próprio no canto inferior direito (uma seta de voltar ao topo, um ícone de configurações de cookies), coloque o botão do chat à esquerda.

o que seus visitantes veem

Um botãozinho no canto, nas suas cores. Nada mais acontece até eles clicarem. Aí o painel abre com a sua saudação e uma linha dizendo que uma pessoa responde. Eles digitam, e a mensagem chega na sua thread do Slack ou do Discord, ou na nossa caixa de entrada e no app de celular. Se saírem antes da sua resposta, podem deixar um e-mail; no pro, a resposta chega até eles lá. O widget fala o idioma do navegador deles, um de 12, a não ser que você defina outro.

depois que a ferramenta regenera

Essas ferramentas reescrevem arquivos. Uma mudança grande no layout (“transforme isso num dashboard”, “mude para o modo escuro”) pode tirar a tag do index.html ou do layout raiz sem avisar. Depois de uma regeneração grande, abra o site publicado e confira se o botão do chat continua lá. Se sumiu, o mesmo prompt coloca de volta.

mais de um projeto

Com essas ferramentas é barato começar um segundo e um terceiro site. No Spookat cada um é um site separado, com sua chave, domínio, aparência e canal, então um chat nunca cai na thread do projeto errado. O primeiro site de uma conta paga o preço cheio; cada site a mais na mesma conta que você paga pelo Spookat tem 30% de desconto, em todos os planos. Vários sites podem dividir um canal do Slack ou do Discord se as mesmas pessoas respondem todos, mas o card mostra só o caminho da página, não de qual site veio o chat. Dê a cada site o próprio canal se você precisa diferenciar.

checklist

• O site está registrado no endereço que os visitantes usam.
• Uma tag, async, no index.html ou no layout raiz.
• Nenhum botão ou componente de chat feito pela própria ferramenta.
• Testado no site publicado, não na pré-visualização.
• Uma requisição antes de um clique (duas, ambas de cdn.spookat.com, se o seu código define um estilo que você não publicou), nenhum cookie.
• Slack ou Discord conectado.

Descreva, publique, confira. Depois responda a primeira pergunta de uma thread.