# Chat web: como instalar

> Coloque sua recepcionista da Atenta no seu próprio site com uma linha de código ou o plugin de WordPress. Passos para WordPress, Shopify, Nuvemshop, Wix, Squarespace, Webflow, Google Tag Manager e site próprio.

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](https://atenta.mx/pt/docs/tu-pagina).

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

```html
<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](https://atenta.mx/pt/descargas/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](https://ayuda.tiendanube.com/google-ads/como-instalar-google-tag-manager-en-mi-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](https://support.wix.com/en/article/embedding-custom-code-on-your-site).

### 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](https://support.squarespace.com/hc/en-us/articles/205815908-Customize-parts-of-your-site-with-code-injection).

### 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:

```html
<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](https://atenta.mx/pt/privacidad).
- 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.