Como colocar chat no site: código HTML, Google Tag Manager, Wix e Squarespace

Para colocar chat no site, você copia o código da sua ferramenta de chat e faz com que ele carregue em todas as páginas. Há quatro formas de fazer isso: colar o código logo antes da tag de fechamento </body> no layout comum do site, adicionar no Google Tag Manager como uma tag de HTML personalizado com o acionador Todas as páginas, ou usar o campo de código do seu construtor de sites (Wix: Custom Code, na posição Body - end; Squarespace: Code Injection, em Footer). Depois abra o site numa janela anônima e mande uma mensagem de teste para você mesmo. Um chat que carrega mas não avisa ninguém é pior do que não ter chat.

WordPress, Shopify e ikas têm caminhos próprios, com pouco ou nenhum código; eles estão no final. Os exemplos usam o Messenger da Shopxare, mas o método é o mesmo para quase toda ferramenta de chat que fornece um código.

Qual caminho combina com o seu site

Minha recomendação: se você consegue editar o template, coloque o código nele. O Tag Manager é uma boa alternativa quando é o único lugar onde você pode adicionar código, mas cria uma dependência. Quem administra o contêiner pode desligar o seu chat sem perceber, e uma configuração de consentimento pode esconder o chat de quem recusa os cookies.

Antes de começar: copie o código

1. Crie sua conta na Shopxare e vá em Definições → Messenger → Instalação.
2. Copie o código para qualquer site. Com o seu App ID, ele fica assim:

<script>
  window.Shopxare = window.Shopxare || function () { (Shopxare.q = Shopxare.q || []).push(arguments) };
  Shopxare('boot', { app_id: 'YOUR_APP_ID' });
</script>
<script async src="https://app.shopxare.com/widget/v1/loader.js"></script>

3. Quando o chat estiver funcionando, vá em Definições → Messenger → Segurança → Sites permitidos e informe seus domínios. Com a lista vazia, o Messenger carrega em qualquer site; preenchida, o seu código só funciona nos seus sites.

Todos os detalhes estão em Instalar o Messenger.

Caminho 1: cole o código no HTML do site

1. Encontre o arquivo que todas as páginas compartilham. Na maioria dos sites é um template de layout ou de rodapé, como footer.php, layout.html ou um partial do rodapé. Um site estático com arquivos HTML separados não tem arquivo comum, então você cola o código em cada um.
2. Cole o código logo antes da tag de fechamento </body>.
3. Suba a alteração para o servidor e recarregue o site com o cache limpo.

Se o seu CMS tem um campo como "scripts do rodapé" ou "código personalizado", ele faz o mesmo trabalho. Use esse campo em vez de editar arquivos.

Aplicações de página única feitas com React, Vue e similares não precisam de nada a mais. Coloque o código uma vez no index.html; o Messenger detecta sozinho as trocas de página, e sua equipe continua vendo em que página o cliente está.

Caminho 2: colocar chat no site com o Google Tag Manager

1. Abra o seu contêiner em tagmanager.google.com e vá em Tags > Nova.
2. Clique em Configuração da tag e escolha HTML personalizado. Cole o código inteiro, com os dois blocos <script>. A própria Google orienta a manter o JavaScript sempre dentro de tags <script> (Ajuda do Tag Manager).
3. Clique em Acionamento e escolha Todas as páginas.
4. Abra as configurações avançadas e, nelas, as de consentimento (Advanced Settings > Consent Settings). Por padrão, as verificações adicionais de consentimento ficam em Not set. Se o seu banner de cookies controla as tags por tipo de consentimento, você pode escolher Require additional consent for tag to fire e adicionar o tipo que o banner usa para cookies funcionais (Ajuda do Tag Manager). Pergunte qual tipo se aplica a quem cuida do banner de cookies e da LGPD na empresa. Saiba o efeito: com consentimento obrigatório, quem recusar os cookies não verá o chat.
5. Clique em Visualizar, digite o endereço do site e clique em Connect (Ajuda do Tag Manager). Na tela de depuração, confira se a tag do chat foi disparada e se o botão do chat aparece no site.
6. Clique em Enviar e depois em Publicar.

O Tag Manager minifica o código HTML personalizado e pode trocar aspas simples por aspas duplas. Isso não afeta este código, então não estranhe se a versão salva parecer um pouco diferente.

Quando não usar o Tag Manager

• Você quer reconhecer clientes logados. A verificação de identidade precisa de um user_hash que o seu servidor calcula com uma chave secreta, e essa chave tem de ficar no servidor. O Tag Manager não consegue calcular esse valor, então o seu template precisa gerá-lo de qualquer forma. Nesse caso, coloque o código de inicialização no template e passe user_id, user_hash, email e name por ali (API JavaScript).
• O seu site está no Wix. O Wix informa que ferramentas de rastreamento como o Google Tag Manager não funcionam pelo recurso de código personalizado (Central de Ajuda do Wix). Cole o código do chat direto no Custom Code (caminho 3).
• O código já está no seu tema. Carregue de um lugar só. Duas cópias dificultam achar problemas, e depois você não vai saber qual delas alterar.

Caminho 3: colocar chat num site Wix

O Wix exige duas coisas antes: o site precisa estar publicado e ter um domínio conectado (Central de Ajuda do Wix).

1. No painel do site, vá em Settings (Configurações).
2. Em Development & integrations, clique em Custom Code.
3. Clique em + Add Custom Code, cole o código e dê um nome, como "Chat online".
4. Em Add Code to Pages, escolha All pages.
5. Em Place Code in, escolha Body - end.
6. Clique em Apply e abra o site publicado.

Dois detalhes do Wix que pegam muita gente. O código personalizado fica preso ao domínio: se você definir outro domínio principal, o Wix apaga seus códigos e você precisa adicioná-los de novo. E o Wix avisa que, desde dezembro de 2025, as medidas de segurança do frontend podem bloquear alguns códigos de terceiros até o fornecedor atualizá-los. Se o botão do chat não aparecer, fale com o fornecedor do chat; o Wix não dá suporte a código de terceiros.

Caminho 4: colocar chat num site Squarespace

A injeção de código está disponível nos planos Core, Plus e Advanced e em alguns planos antigos (Central de Ajuda do Squarespace).

1. Abra o painel Code Injection. O artigo de ajuda acima leva direto a ele.
2. Cole o código no campo Footer. O Squarespace coloca esse código logo antes da tag de fechamento </body> em todas as páginas.
3. Clique em Save e recarregue o site.

As páginas de checkout do Squarespace não aceitam código próprio, então o chat não aparece ali. Planeje-se: tire dúvidas de pagamento e frete nas páginas de carrinho e de produto, onde o chat carrega.

WordPress, WooCommerce, Shopify e ikas

Nessas plataformas há um caminho melhor do que o código solto, porque a integração também leva dados do cliente e do carrinho para a sua caixa de entrada. O plugin do WooCommerce e o código da Shopify enviam automaticamente dados da loja, como número de pedidos e valor do carrinho, que aparecem num cartão da loja ao lado da conversa.

• WordPress e WooCommerce: instale o plugin. Passo a passo em Chat para WordPress grátis e na documentação do WordPress.
• Shopify: cole o código do tema no theme.liquid. Veja Como colocar chat online na Shopify.
• ikas: instale o app em um passo, sem código (documentação da ikas).

Teste em cinco minutos

1. Abra o site numa janela anônima, no computador e no celular. O botão do chat deve aparecer no canto. No celular, confira se ele não cobre o botão "Adicionar ao carrinho" nem o banner de cookies. Você pode mudar a posição em Personalizar o Messenger.
2. Mande uma mensagem de teste para você mesmo e responda pelo celular. O Shopxare Mobile é grátis em todos os planos (apps para celular e desktop). Se a notificação não chegar, resolva isso antes de divulgar o chat para os clientes.
3. Troque de página no meio da conversa. A conversa deve continuar ali.
4. Recuse os cookies no banner e recarregue. Você ainda vê o chat? As duas respostas podem estar certas, mas isso deve ser uma decisão, não uma surpresa.
5. Confira se o código carrega uma vez só. Olhe o código-fonte da página ou use o Tag Assistant. Uma cópia no template e outra no Tag Manager é um erro fácil de cometer.

Exemplo: uma pequena loja de café online

Uma torrefação fictícia vende café em grãos num site feito sob medida, que já usa o Google Tag Manager. A dona adiciona o Messenger como tag de HTML personalizado numa terça de manhã e testa pelo celular. Às 14h10, alguém escreve numa página de produto:

"Esse café vem em grão ou moído?"

Ela responde pelo app:

"Por padrão vai em grão. Se quiser moído, escolha 'Moído para coador' no menu de moagem acima do botão Adicionar ao carrinho, e a gente mói no dia do envio."

Dois meses depois, ela cria contas de cliente na loja. É nesse momento que ela tira o código do Tag Manager e coloca no template da página, para que o servidor envie user_id e user_hash e os clientes que voltam sejam reconhecidos na caixa de entrada.

Depois que o chat está no ar

• Configure o horário de atendimento e uma mensagem de ausência, para que quem escreve à noite saiba quando terá resposta. Copie uma das nossas mensagens fora do horário de atendimento.
• Salve as respostas às cinco perguntas mais comuns e insira com "/" (respostas salvas). Nossas frases prontas para atendimento ao cliente dão um primeiro conjunto.
• Se ninguém pode responder à noite, o Are AI responde com base nos seus próprios artigos de ajuda e páginas e passa a conversa para a equipe quando deve.

A Shopxare tem hoje um único plano, e ele é grátis, sem cartão de crédito. Você pode criar uma conta e ter o Messenger no seu site no tempo que leva para achar o arquivo do rodapé.

Perguntas frequentes

Como colocar um chat grátis no meu site?

Cadastre-se numa ferramenta de chat online gratuita, copie o código e cole logo antes de </body> no layout comum do site, ou adicione pelo Google Tag Manager ou pelo campo de código personalizado do seu construtor de sites. Depois mande uma mensagem de teste para você mesmo.

Dá para colocar chat no site pelo Google Tag Manager?

Dá. Crie uma tag de HTML personalizado, cole o código inteiro, defina o acionador como Todas as páginas, confira em Visualizar e depois clique em Enviar e Publicar. Evite o Tag Manager se você precisa identificar clientes logados ou se o site está no Wix.

Onde colar o código do chat?

Logo antes da tag de fechamento </body>, num arquivo ou campo usado por todas as páginas: o template do rodapé, um campo de scripts do rodapé, o Custom Code do Wix (Body - end) ou o Code Injection do Squarespace (Footer).

Por que o chat não aparece no meu site?

As causas comuns são uma alteração não publicada (no contêiner do Tag Manager ou no construtor de sites), uma configuração de consentimento que bloqueia a tag até o visitante aceitar os cookies, um domínio faltando na lista de sites permitidos ou uma página em cache. Confira numa janela anônima depois de limpar o cache.

Chat online deixa o site lento?

Todo script a mais traz algum trabalho de carregamento. O carregador do Messenger usa async, então o navegador não espera por ele para mostrar a página. Se velocidade importa para você, meça uma página de produto antes e depois de instalar.