Como adicionar o chat ao seu site

Onde encontrar o código

No painel, vá em Widget, aba Instalação. Em Onde está o seu site?, escolha a sua plataforma - você verá as instruções passo a passo e o botão Copiar código.

O código é assim (o seu tem uma chave própria no lugar de YOUR_KEY - copie do painel):

<script src="https://chatrina.com/widget/widget.js" data-key="YOUR_KEY" async></script>

WordPress e WooCommerce

1. No WordPress, vá em Plugins → Adicionar novo e instale o plugin gratuito WPCode.
2. Vá em Code Snippets → Header & Footer.
3. Cole o código no campo Footer.
4. Clique em Salvar. O chat vai aparecer em todas as páginas.

Sem plugin: Aparência → Editor de arquivos de tema → footer.php e cole o código logo antes de </body>. O WooCommerce roda no WordPress, então os passos são os mesmos.

Shopify

1. Na Shopify, vá em Loja virtual → Temas.
2. Ao lado do tema publicado, clique em … → Editar código.
3. Abra o arquivo layout/theme.liquid.
4. Encontre </body> (Ctrl+F ou Cmd+F) e cole o código logo antes.
5. Clique em Salvar.

Wix

1. No Wix, vá em Configurações → Avançado → Código personalizado.
2. Clique em + Adicionar código personalizado e cole o código.
3. Escolha Todas as páginas e posicione em Body - fim.
4. Clique em Aplicar e publique o site.

Webflow

1. Abra Site settings → Custom code.
2. Cole o código no campo Footer code.
3. Salve e publique o site (Publish).

Site feito com IA (Lovable, Bolt, Cursor, Replit, Claude)

Escolha o card Vibecoding (IA) e clique em Copiar prompt. Cole no chat da sua ferramenta - a IA adiciona o código no lugar certo. Depois, aceite as alterações e publique o site.

Qualquer outro site

Abra o template que aparece em todas as páginas (normalmente o rodapé ou o layout principal) e cole o código logo antes do </body> de fechamento. Salve e publique as alterações.

Outra pessoa cuida do seu site?

Escolha o card Enviar para um desenvolvedor, informe o e-mail dele e clique em Enviar código e instruções. Ele recebe o código e as instruções para as plataformas mais populares. O e-mail não contém dados de acesso.

Confira se está funcionando

Depois de colar, abra o seu site no navegador (atualize a página), volte ao painel e clique em Verificar se funciona. Você verá ✓ O widget funciona em … com o endereço do seu site, ou uma dica do que ainda falta.

O chat não aparece?

• Em Widget → Aparência e o que há no site, o botão no topo deve mostrar Widget ativado no site, e o Chat deve estar ligado em O que há no seu site.
• Seu plano precisa estar ativo ou o teste precisa estar em andamento.
• Se você informou domínios em Em quais sites o widget pode funcionar, na aba Instalação, o chat só funciona neles. Vazio = funciona onde você colar o código.
• Quando o limite mensal de conversas acaba, o chat some até o fim do período ou até você adicionar um pacote - planos e limites.
• Bloqueadores de anúncios do visitante podem esconder o chat no navegador dele.

Perguntas frequentes