# Chat web

> Agrega un globito de chat a tu sitio. Los mensajes llegan a la misma bandeja que WhatsApp e Instagram.

El chat web es un globito que aparece abajo en tu sitio. Cuando un visitante escribe, la conversación entra a **Chat** junto con WhatsApp e Instagram. Le responden tu equipo, tus automatizaciones y tus agentes IA.

<Note>
  El chat web está en los planes **Crecimiento**, **Escala** y **Enterprise**, y en la prueba gratis. No ocupa un lugar de **Números y cuentas**: puedes crear hasta 5, por ejemplo uno por sitio o por marca.
</Note>

## Crear el chat

<Steps>
  <Step title="Entra a Ajustes › Números y canales">
    Baja hasta la sección **Chat web** y toca **Crear chat web**.
  </Step>
  <Step title="Elige cómo se ve">
    - **Nombre interno**: sirve para distinguirlo en la bandeja.
    - **Título del chat**: lo que ve el visitante arriba del chat.
    - **Color** y **Posición** (abajo a la derecha o a la izquierda).
    - **Mensaje de bienvenida**: se muestra al abrir el chat. No queda guardado en la conversación ni dispara automatizaciones.
    - **Datos antes del primer mensaje**: nombre, email o teléfono, cada uno como **No pedir**, **Opcional** u **Obligatorio**.
    - **Sitios permitidos**: los dominios donde se puede mostrar. Déjalo vacío para permitir cualquiera.
  </Step>
  <Step title="Pruébalo">
    Toca **Probar** para abrir una página de ejemplo con el chat instalado y abierto. Funciona aunque hayas cargado sitios permitidos. Lo que escribas ahí llega a tu bandeja como un visitante más, así puedes ver también cómo responden tus automatizaciones y agentes.
  </Step>
  <Step title="Copia el código">
    Al crearlo aparece el **Código para tu sitio**. Tócalo para copiarlo.
  </Step>
</Steps>

## Instalarlo en tu sitio

Pega el código antes de `</body>`, en todas las páginas donde quieras el chat:

```html
<script src="https://app.mindo.ar/widget.js" data-mindo-widget="wgt_TU_CODIGO" async></script>
```

En Tienda Nube, Shopify, WordPress o Wix, pégalo en el lugar para "código personalizado" o "scripts del pie de página".

<Tip>
  El código de tu chat (`wgt_…`) es público: no hace falta esconderlo. Lo que sí es privado es el **secreto**, que se usa para [identificar usuarios](#identificar-usuarios).
</Tip>

### Sitios permitidos

Si cargas dominios en **Sitios permitidos**, el navegador solo muestra el chat en esos sitios:

| Escribes | Funciona en |
| --- | --- |
| `tutienda.com` | `tutienda.com` y `www.tutienda.com` |
| `*.tutienda.com` | `tutienda.com` y cualquier subdominio (`blog.tutienda.com`, `shop.tutienda.com`) |

## Cómo funciona la conversación

- **Sin ventana de 24 horas.** Puedes responder cuando quieras. Si el visitante cerró la página, ve tu respuesta la próxima vez que vuelva, con un número sobre el globito.
- **Mismo navegador, misma conversación.** Recargar la página o volver otro día sigue la misma charla, siempre que sea en el mismo navegador.
- **Cada visitante es un contacto.** Al principio aparece como "Visitante XXXX". Si deja su nombre, email o teléfono, quedan en el contacto.
- **Automatizaciones y agentes IA.** Funcionan igual que en WhatsApp e Instagram. Marca el canal **Web** en el disparador de la automatización o al activar el agente.
- **Qué puedes mandar:** texto, fotos, videos, archivos, stickers, botones, botones con link, respuestas rápidas y carruseles. No hay plantillas, ubicaciones ni tarjetas de contacto.
- **El visitante solo escribe texto**, hasta 4.000 caracteres por mensaje. Cuando toca un botón o una respuesta rápida, te llega como mensaje suyo.

## Identificar usuarios

Si tu sitio tiene login, puedes decirle al chat quién es el usuario. Así:

- su conversación lo sigue en la computadora, el celular o cualquier navegador;
- su nombre, email y teléfono llegan cargados, y no se le piden;
- si su teléfono coincide con un contacto de WhatsApp, se usa ese contacto.

Para eso, **tu backend** firma un token (JWT HS256) con el **secreto** del chat. Lo ves en **Ajustes › Números y canales › Chat web › Configurar › Ver secreto**.

<Warning>
  El secreto nunca va en el código del navegador. Si se filtra, toca **Generar otro**.
</Warning>

| Dato | Obligatorio | Qué es |
| --- | --- | --- |
| `sub` | Sí | El id del usuario en tu sistema |
| `exp` | Sí | Vencimiento, en segundos. Como mucho 7 días desde ahora |
| `name` | No | Nombre |
| `email` | No | Email |
| `phone` | No | Teléfono en formato internacional, por ejemplo `+5491155551234` |

Ejemplo en Node.js:

```js
import jwt from "jsonwebtoken"

const token = jwt.sign(
  { sub: user.id, name: user.name, email: user.email, phone: user.phone, exp: Math.floor(Date.now() / 1000) + 24 * 3600 },
  process.env.MINDO_WIDGET_SECRET,
  { algorithm: "HS256" }
)
```

Pásalo en el script:

```html
<script src="https://app.mindo.ar/widget.js" data-mindo-widget="wgt_TU_CODIGO" data-mindo-identity="TOKEN_FIRMADO" async></script>
```

Si el token no es válido (otro secreto, vencido o sin `sub`), el chat sigue funcionando y el visitante queda como anónimo.

### Si el usuario inicia sesión después

En sitios donde el login pasa sin recargar la página, usa la API del navegador:

```js
// Cuando inicia sesión
window.mindo.setUser(token)
// Cuando cierra sesión: el chat vuelve a empezar como anónimo
window.mindo.clearUser()
```

Si tu código puede correr antes de que cargue el script, encola las llamadas:

```js
window.mindo = window.mindo || { q: [] }
window.mindo.q.push(["setUser", token])
```

## API del navegador

| Llamada | Qué hace |
| --- | --- |
| `mindo.open()` | Abre el chat |
| `mindo.close()` | Lo cierra |
| `mindo.toggle()` | Lo abre o lo cierra |
| `mindo.setUser(token)` | Identifica al usuario (token firmado) |
| `mindo.clearUser()` | Vuelve a anónimo |
| `mindo.on(evento, fn)` | Escucha un evento: `ready`, `open`, `close` o `unread` (recibe `{ count }`) |
| `mindo.off(evento, fn)` | Deja de escucharlo |

Por ejemplo, un botón "Hablar con ventas" en tu página:

```html
<button onclick="mindo.open()">Hablar con ventas</button>
```

## Preguntas frecuentes

<AccordionGroup>
  <Accordion title="No aparece el globito">
    Revisa que el chat esté **Encendido**, que el código esté en la página y que el dominio esté en **Sitios permitidos** (o que la lista esté vacía). Si cambias de plan a uno sin chat web, el globito deja de mostrarse.
  </Accordion>
  <Accordion title="¿Qué pasa si borro el chat?">
    Se borran también sus conversaciones. Si solo quieres sacarlo de tu sitio, apágalo: las conversaciones quedan en la bandeja.
  </Accordion>
  <Accordion title="¿Hay un límite de mensajes?">
    Cada visitante puede mandar hasta 30 mensajes por minuto, para frenar abusos.
  </Accordion>
</AccordionGroup>