Integração com o v0
Adicionar um chat ao vivo ao seu site v0
O v0 gera seu site em Next.js e publica na Vercel. Para adicionar um chat basta um prompt: o v0 coloca a tag do Hooky no layout raiz, você publica e as mensagens dos seus visitantes chegam no seu celular.
Por que um chat num site v0
Com o v0, a interface já sai caprichada na primeira versão: página de produto, portfólio, app de agendamento. O que costuma faltar é o contato direto. Um formulário é espera; um balão de chat é resposta enquanto o visitante ainda está lá. O Hooky entra sem mexer nos seus componentes nem nos seus dados.
Instalar o Hooky no v0
Crie sua conta Hooky (grátis para um site) e cadastre seu site, com o endereço
vercel.appou seu domínio.Copie o prompt em Sites: a chave do seu site já está nele. A versão abaixo foi pensada para um projeto Next.js (App Router), como os do v0.
Cole no chat do v0 do seu projeto. O v0 altera o
app/layout.tsx: você pode conferir o código antes de publicar.Publique: Publish no cabeçalho do chat. Na primeira vez, o v0 guia você (visibilidade, domínio); depois, abra Publish e escolha Publish Changes.
O prompt para o v0
Adicione o balão de chat do Hooky a este site, em todas as páginas. No app/layout.tsx, importe Script de next/script e adicione-o uma única vez, logo antes do fechamento de <body>, com strategy="afterInteractive":
<script src="https://heyhooky.com/widget.js" data-site-key="SUA_CHAVE_PUBLICA" async></script>Mantenha exatamente o endereço do script e o atributo data-site-key. Não adicione nenhum outro código e não mude mais nada: o balão aparece sozinho, embaixo da tela.
Se preferir fazer você mesmo, este é o resultado esperado no app/layout.tsx:
import Script from "next/script";
// … dentro do <body> do layout raiz, depois de {children}:
<Script src="https://heyhooky.com/widget.js" data-site-key="SUA_CHAVE_PUBLICA" strategy="afterInteractive" />Conferir se o balão aparece
Abra o endereço de produção (o que o v0 mostra depois da publicação) e recarregue: o balão fica embaixo. Uma mensagem de teste chega na hora em Mensagens.
Sem balão? Confira se a publicação terminou, se a tag está no layout raiz (e não numa página só) e se o endereço aberto está nos endereços autorizados do site, se você cadastrou algum.
vercel.app, pré-visualizações e seu domínio
Todo projeto publicado tem um endereço estável vercel.app, ao qual você pode adicionar seu domínio (Publish › Customize Domain no v0). Cadastre os dois no Hooky: conversas e estatísticas ficam juntas.
As implantações de pré-visualização da Vercel têm cada uma um endereço único, que muda toda vez. Não precisa cadastrar todos: teste o balão no endereço de produção. Enquanto nenhum endereço estiver cadastrado no Hooky, o balão aparece em todo lugar, pré-visualizações incluídas.
Responder aos seus visitantes
Chega uma notificação no celular; você responde pelo app Hooky (iPhone, iPad, Mac, Android) ou pelo painel web. Seu visitante pode anexar um print ou um PDF, e se sair depois de deixar o e-mail, sua resposta vai atrás dele por e-mail.
Seu site tem backend? Envie também seus eventos (cadastro, pedido pago) do servidor com a chave secreta do site, ou publique seus alertas no canal do site no formato dos webhooks do Slack. Está tudo na documentação.
Perguntas frequentes
Por que o componente Script e não uma tag <script>?
No Next.js, o next/script é o jeito limpo de carregar scripts de terceiros; com afterInteractive, o balão carrega logo depois que a página fica utilizável, sem deixá-la lenta.
O balão aparece na pré-visualização do v0?
A pré-visualização roda num ambiente isolado, num endereço temporário. O balão só aparece ali se você não cadastrou nenhum endereço no Hooky. Melhor testar no endereço publicado.
Meu projeto v0 está ligado ao GitHub
Nada de especial: a mudança no app/layout.tsx vai para a sua branch, e o Publish faz o merge e a implantação, como o resto do seu código.
Funciona também num site Next.js fora do v0?
Sim, é exatamente a mesma tag, no mesmo lugar. Veja também a página do Cursor se você programa num editor.
Outras ferramentas
Seus visitantes têm perguntas. Responda de onde você estiver.
Grátis para um site, instalado com um prompt. Depois, é só deixar o celular no bolso.