> ## Documentation Index
> Fetch the complete documentation index at: https://help.asistian.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Web Chat

> Agrega un widget de chat a tu sitio web y atiende a tus visitantes con tu asistente IA en tiempo real.

## ¿Qué es el Web Chat?

El Web Chat de Asistian es un **widget embebible** que aparece en la esquina de tu sitio web y permite a tus visitantes iniciar una conversación contigo al instante. Todas las conversaciones llegan a la misma bandeja de Asistian, junto con tus mensajes de WhatsApp e Instagram.

## Crear un canal de Web Chat

<Steps>
  <Step title="Ir a Canales">
    Ve a **Configuración → Canales** y haz clic en **Agregar canal → Web Chat**.
  </Step>

  <Step title="Personalizar el widget">
    Configura:

    * **Nombre del canal** — identificador interno
    * **Título del widget** — texto que aparece en el encabezado del chat (ej. "¿En qué te podemos ayudar?")
    * **Color** — para que combine con tu marca
    * **Avatar** — imagen o ícono del asistente
  </Step>

  <Step title="Asignar asistente y buzón">
    Elige el asistente IA que responderá las conversaciones y el buzón al que se enrutarán.
  </Step>

  <Step title="Obtener el código">
    Asistian generará un fragmento de código JavaScript. Cópialo y pégalo antes de la etiqueta `</body>` de tu sitio web.
  </Step>
</Steps>

## Código de instalación

El snippet que recibirás luce así:

```html theme={null}
<script>
  (function(w,d,s,l,i){...})(window,document,'script','asistian','TU_ID_DE_CANAL');
</script>
```

Pega este código en **todas las páginas** donde quieras que aparezca el chat, o solo en páginas específicas si prefieres segmentarlo.

<Tip>
  Si usas WordPress, puedes agregar el snippet en **Apariencia → Personalizar → HTML adicional** o usando un plugin de "Header & Footer scripts".
</Tip>

## Identificar a tus visitantes

Si tu sitio ya tiene usuarios autenticados, puedes pasar su información al widget para que las conversaciones aparezcan vinculadas a un contacto existente en Asistian:

```html theme={null}
<script>
  AsistianWidget.identify({
    name: "Nombre del usuario",
    email: "email@ejemplo.com",
    phone: "+521234567890"
  });
</script>
```

## Personalización del widget

| Opción                | Descripción                                   |
| --------------------- | --------------------------------------------- |
| Posición              | Esquina inferior derecha o izquierda          |
| Color primario        | Color del botón y encabezado                  |
| Mensaje de bienvenida | Texto automático al abrir el chat             |
| Horario de atención   | Muestra un mensaje diferente fuera de horario |
| Avatar del asistente  | Foto o ícono que representa al agente         |

## Múltiples widgets

Puedes crear **diferentes canales de Web Chat** para distintos sitios o secciones — por ejemplo, un widget para tu landing de ventas y otro para tu portal de clientes — cada uno con su propio asistente, buzón y personalización.

## Solución de problemas

| Problema                                                            | Solución                                                                                         |
| ------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
| El widget no aparece                                                | Verifica que el script esté antes de `</body>` y que no haya errores en la consola del navegador |
| Las conversaciones no llegan                                        | Confirma que el ID del canal en el script sea correcto                                           |
| El widget aparece en todas las páginas pero solo debería en algunas | Condiciona la carga del script con lógica de tu plataforma o CMS                                 |