# Chat web

> Agrega un chat a tu sitio, con la cara de tu asistente y el botón de WhatsApp al lado. 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, por ejemplo *Web de la inmobiliaria*.
    - **Título del chat**: lo que ve el visitante arriba del chat.
    - **Color** y **Posición** (abajo a la derecha o a la izquierda).
    - **Botón del chat**: un asesor virtual de nuestra galería, una foto propia (un PNG sin fondo queda mejor) o un ícono, con el **subtítulo** y el **saludo** que aparece al lado del botón.
    - **Botón de WhatsApp al lado del chat**: tu número y el mensaje con el que se abre la conversación.
    - **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.eltick.com/widget.js" data-eltick-widget="wgt_TU_CODIGO" async></script>
```

Si tu sitio es de eltick no hace falta: el chat ya está incluido. En WordPress, Wix u otro sitio, 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 |
| --- | --- |
| `tuinmobiliaria.com.ar` | `tuinmobiliaria.com.ar` y `www.tuinmobiliaria.com.ar` |
| `*.tuinmobiliaria.com.ar` | `tuinmobiliaria.com.ar` y cualquier subdominio (`propiedades.tuinmobiliaria.com.ar`) |

## 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.ELTICK_WIDGET_SECRET,
  { algorithm: "HS256" }
)
```

Pásalo en el script:

```html
<script src="https://app.eltick.com/widget.js" data-eltick-widget="wgt_TU_CODIGO" data-eltick-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.eltick.setUser(token)
// Cuando cierra sesión: el chat vuelve a empezar como anónimo
window.eltick.clearUser()
```

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

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

## API del navegador

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

Por ejemplo, un botón "Consultar por esta propiedad" en la ficha:

```html
<button onclick="eltick.open()">Consultar por esta propiedad</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>