Chat web: cómo instalarlo

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.

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

<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.
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.

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.

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.

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:

<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.
• 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.