# Chat web: cómo instalarlo

> Pon a tu recepcionista de Atenta en tu propio sitio con una línea de código o el complemento de WordPress. Pasos para WordPress, Shopify, Tiendanube, Wix, Squarespace, Webflow, Google Tag Manager y sitio propio.

El chat web pone a tu recepcionista de Atenta dentro de tu propio sitio: aparece un botón de chat abajo a la derecha, tus visitantes escriben ahí y Atenta contesta con tu misma base de respuestas, igual que en WhatsApp. Cada conversación llega a **Chats** en tu app, marcada como web; puedes tomar el control cuando quieras y lo que Atenta no sabe te lo pasa. También aparece en [Tu página](https://atenta.mx/docs/tu-pagina).

## Antes de empezar

1. En tu app, **Ajustes → Tu página**: elige el nombre de tu página (por ejemplo `mi-negocio`). Ese nombre es el código de tu negocio.
2. En **Ajustes → Chat web**: enciende el chat web y copia tu código.

## Tu código

Es una sola línea. Va una vez, en todas las páginas, justo antes de `</body>`:

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

- `data-negocio`: el código de tu negocio (obligatorio).
- `data-idioma`: `es`, `en` o `pt` para fijar el idioma; sin él, el chat usa el idioma de tu sitio.
- `data-posicion="izquierda"`: pone el botón abajo a la izquierda.

El script pesa menos de 6 KB con gzip y difiere la carga de la ventana hasta que alguien toca el botón. No usa cookies de terceros ni rastreo; para recordar la conversación guarda en el navegador del visitante un identificador aleatorio de ese negocio, nunca los mensajes. El servidor usa la IP para limitar abusos.

## Paso a paso por plataforma

### WordPress (con el complemento)

1. Descarga el complemento [atenta-chat.zip](https://atenta.mx/descargas/atenta-chat.zip).
2. En WordPress: **Plugins → Añadir nuevo → Subir plugin** → elige el .zip → **Instalar ahora** → **Activar**.
3. **Ajustes → Atenta Chat** → escribe el código de tu negocio y guarda. Ahí también eliges idioma y lado del botón.

### Shopify

1. **Tienda online → Temas** → «…» del tema actual → **Editar código**.
2. Abre `layout/theme.liquid` y pega tu código justo antes de `</body>`.
3. Guarda y abre tu tienda.

### Tiendanube

1. Con un plan compatible, vincula tu ID GTM en **Configuración → Códigos externos → Google Tag Manager**.
2. En GTM crea una etiqueta **HTML personalizado** con tu código de Atenta y activador **All Pages**.
3. Guarda, envía y publica el contenedor. Comprueba tu tienda; el checkout bloquea HTML personalizado.

Los campos antiguos de tracking se retiraron. [Guía de GTM de Tiendanube](https://ayuda.tiendanube.com/google-ads/como-instalar-google-tag-manager-en-mi-tiendanube).

### Wix (plan de pago)

1. Publica el sitio y conecta tu dominio. Abre **Configuración → Desarrollo e integraciones → Código personalizado**.
2. Agrega tu código para **Todas las páginas**, una vez por visita, en **Body - final**.
3. Aplica y comprueba el sitio publicado. [Ayuda de Wix](https://support.wix.com/en/article/embedding-custom-code-on-your-site).

### Squarespace (plan de pago)

1. Abre **Inyección de código** con un plan Core, Plus, Advanced o anterior compatible.
2. Pega tu código en **Pie de página** (Footer).
3. Guarda y comprueba el sitio; no se aplica al checkout. [Ayuda de Squarespace](https://support.squarespace.com/hc/en-us/articles/205815908-Customize-parts-of-your-site-with-code-injection).

### Webflow (plan de pago)

1. **Configuración del sitio → Custom code**.
2. Pega tu código en **Footer code**.
3. Guarda y publica.

### Google Tag Manager

1. **Etiquetas → Nueva → Configuración de la etiqueta → HTML personalizado**.
2. Pega tu código y elige el activador **All Pages**.
3. Guarda, envía y publica el contenedor.

Si tu instalación carga el script sin atributos (por ejemplo, una plantilla de GTM), define la configuración **antes** de cargarlo:

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

`negocio` es obligatorio; `idioma` admite `es`, `en`, `pt` y `posicion` admite `izquierda` o `derecha`. Cada `data-*` presente gana sobre su campo global, incluso vacío: `data-negocio=""` o un código inválido impiden montar el chat, aunque la global sea válida. Sin idioma válido se usa el de la página, después el navegador y finalmente español; una posición inválida deja el botón a la derecha.

La configuración se lee una vez por carga. Cambiarla después no mueve ni cambia el chat. No pongas datos del visitante ni llaves en ella. Instala una sola etiqueta por página y comprueba el botón en Vista previa de GTM y en tu sitio. Esta compatibilidad no implica que una plantilla esté publicada o aprobada en Gallery.

### Sitio propio

1. Abre la plantilla o el HTML que comparten todas tus páginas.
2. Pega tu código antes de `</body>`.
3. Publica los cambios.

## Comprobar que quedó

En **Ajustes → Chat web → Comprobar instalación** escribe la dirección de tu sitio: Atenta revisa la página y te dice si encontró tu código, si encontró el de otro negocio o si no está. Si lo instalaste con Google Tag Manager, el código no aparece en el HTML: abre tu sitio y busca el botón.

## Qué ve tu visitante

- «Te atiende la recepcionista de *tu negocio*» y, antes del primer mensaje, un aviso breve con el [aviso de privacidad](https://atenta.mx/privacidad).
- Mensajes de hasta 300 caracteres. Si escribe muy seguido, el chat le pide esperar unos segundos; si llega al límite por hora, le dice cuánto falta.
- Si pasas la conversación a una persona de tu equipo, el chat lo dice y tu respuesta llega ahí mismo.
- Al apagar el chat se retira el botón de Tu página. En sitios externos conserva el botón, pero intentar escribir muestra que el chat no está disponible; ofrece WhatsApp si el perfil público lo incluye.

## Seguridad

El navegador del visitante nunca habla directo con el motor: la ventana del chat vive en Atenta y cada mensaje pasa por el servidor de Atenta, que lo firma. Tu sitio no guarda ninguna llave. **Dominios permitidos** (en Ajustes → Chat web) solo hace falta si un programador conecta tu sitio directo a la API del chat.

## ¿Te lo instala alguien más?

En **Ajustes → Chat web → Mandar instrucciones a mi programador** se abre tu correo (o el menú de compartir de tu teléfono) con tu código y el enlace a esta guía.