Chat web: como instalar

O chat web coloca sua recepcionista da Atenta dentro do seu próprio site: aparece um botão de chat no canto inferior direito, seus visitantes escrevem ali e a Atenta responde com a mesma base de respostas, igual ao WhatsApp. Cada conversa chega em Chats no seu app, marcada como web; você pode assumir quando quiser e o que a Atenta não sabe é passado para você. Também aparece na Sua página.

Antes de começar

1. No seu app, Ajustes → Sua página: escolha o nome da sua página (por exemplo meu-negocio). Esse nome é o código do seu negócio.
2. Em Ajustes → Chat web: ligue o chat web e copie seu código.

Seu código

É uma linha só. Vai uma vez, em todas as páginas, logo antes de </body>:

<script src="https://atenta.mx/chat.js" data-negocio="meu-negocio" async></script>

• data-negocio: o código do seu negócio (obrigatório).
• data-idioma: es, en ou pt para fixar o idioma; sem ele, o chat usa o idioma do seu site.
• data-posicion="izquierda": coloca o botão no canto inferior esquerdo.

O script tem menos de 6 KB com gzip e adia a carga da janela até alguém tocar no botão. Não usa cookies de terceiros nem rastreamento; para lembrar a conversa, guarda no navegador do visitante um identificador aleatório desse negócio, nunca as mensagens. O servidor usa o IP para limitar abusos.

Passo a passo por plataforma

WordPress (com o plugin)

1. Baixe o plugin atenta-chat.zip.
2. No WordPress: Plugins → Adicionar novo → Enviar plugin → escolha o .zip → Instalar agora → Ativar.
3. Configurações → Atenta Chat → escreva o código do seu negócio e salve. Ali você também escolhe o idioma e o lado do botão.

Shopify

1. Loja virtual → Temas → «…» do tema atual → Editar código.
2. Abra layout/theme.liquid e cole seu código logo antes de </body>.
3. Salve e abra sua loja.

Nuvemshop

1. Com um plano compatível, vincule seu ID GTM em Configurações → Códigos externos → Google Tag Manager.
2. No GTM crie uma tag de HTML personalizado com seu código da Atenta e acionador All Pages.
3. Salve, envie e publique o contêiner. Confira a loja; o checkout bloqueia HTML personalizado.

Os campos antigos de tracking foram retirados. Guia de GTM da Tiendanube.

Wix (plano pago)

1. Publique o site e conecte seu domínio. Abra Configurações → Desenvolvimento e integrações → Código personalizado.
2. Adicione seu código a Todas as páginas, uma vez por visita, em Body - fim.
3. Aplique e confira o site publicado. Ajuda do Wix.

Squarespace (plano pago)

1. Abra Injeção de código com um plano Core, Plus, Advanced ou anterior compatível.
2. Cole seu código em Rodapé (Footer).
3. Salve e confira o site; isso não se aplica ao checkout. Ajuda do Squarespace.

Webflow (plano pago)

1. Configurações do site → Custom code.
2. Cole seu código em Footer code.
3. Salve e publique.

Google Tag Manager

1. Tags → Nova → Configuração da tag → HTML personalizado.
2. Cole seu código e escolha o acionador All Pages.
3. Salve, envie e publique o contêiner.

Se a instalação carrega o script sem atributos (por exemplo, um modelo do GTM), defina a configuração antes de carregá-lo:

<script>
window.AtentaChatConfig = {
  negocio: 'meu-negocio',
  idioma: 'pt',
  posicion: 'derecha'
};
</script>
<script src="https://atenta.mx/chat.js" async></script>

negocio é obrigatório; idioma aceita es, en, pt, e posicion aceita izquierda (esquerda) ou derecha (direita). Cada atributo data-* presente tem prioridade sobre o campo global correspondente, mesmo vazio: data-negocio="" ou um código inválido impedem a montagem do chat, mesmo com uma configuração global válida. Um idioma inválido usa o idioma da página, depois o navegador e finalmente espanhol; uma posição inválida mantém o botão à direita.

A configuração é lida uma vez por carregamento do script. Alterações posteriores não movem nem mudam o chat. Não inclua dados do visitante nem chaves. Instale uma tag por página e confira o botão na prévia do GTM e no seu site. Esta compatibilidade não significa que um modelo esteja publicado ou aprovado na Gallery.

Site próprio

1. Abra o modelo ou o HTML que todas as suas páginas compartilham.
2. Cole seu código antes de </body>.
3. Publique as mudanças.

Verificar que ficou

Em Ajustes → Chat web → Verificar instalação escreva o endereço do seu site: a Atenta revisa a página e diz se encontrou seu código, o de outro negócio ou nada. Se você instalou pelo Google Tag Manager, o código não aparece no HTML: abra seu site e procure o botão.

O que seu visitante vê

• «Quem te atende é a recepcionista de seu negócio» e, antes da primeira mensagem, um aviso breve com o aviso de privacidade.
• Mensagens de até 300 caracteres. Se escrever rápido demais, o chat pede para esperar alguns segundos; se chegar ao limite por hora, diz quanto falta.
• Se você passar a conversa para uma pessoa da sua equipe, o chat avisa e sua resposta chega ali mesmo.
• Desligar o chat retira o botão de Sua página. Em sites externos o botão fica, mas tentar enviar mostra que o chat está indisponível; oferece WhatsApp se o perfil público o incluir.

Segurança

O navegador do visitante nunca fala direto com o motor: a janela do chat vive na Atenta e cada mensagem passa pelo servidor da Atenta, que a assina. Seu site não guarda nenhuma chave. Domínios permitidos (em Ajustes → Chat web) só é necessário se um programador conectar seu site direto à API do chat.

Outra pessoa vai instalar?

Ajustes → Chat web → Mandar instruções ao meu programador abre seu e-mail (ou o menu de compartilhar do celular) com seu código e o link deste guia.