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

O prompt para colar no Lovable, no Bolt ou no v0, onde o snippet do chat deve ficar no código que eles geram e como conferir o resultado no seu site publicado.

2026-10-28 · Kuba

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

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

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:

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

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

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

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](/pt/blog/add-live-chat-to-your-website/) 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](/pt/blog/answer-website-chat-from-slack/) e o [guia do Discord](/pt/blog/answer-website-chat-from-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](/pt/blog/claude-code-live-chat/) 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.

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