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

# Chat web

> Configura el widget de Chat web, limita sus dominios e instala el script alojado de Nexor en un sitio sin usar npm.

Chat web agrega a un sitio un widget para conversaciones entrantes. Los visitantes pueden iniciar una conversación con el Agente, pero Chat web no está disponible como primer canal saliente de una cadencia.

<Note>
  Si tu rol no muestra los Ajustes del Agente, pide a un administrador de tu cuenta de Nexor que configure e instale el widget.
</Note>

## Abre los ajustes de Chat web

<Steps>
  <Step title="Abre el Agente">
    Abre el Agente y ve a **Ajustes → Canales**.
  </Step>

  <Step title="Edita Chat web">
    Busca **Webchat** y elige **Editar**. Nexor abre el editor dedicado de Chat web para ese Agente.
  </Step>

  <Step title="Guarda antes de instalar">
    Configura el widget, selecciona **Guardar cambios** y luego prueba la instalación en un sitio permitido.
  </Step>
</Steps>

El editor reúne tres áreas de configuración: comportamiento, diseño e instalación.

## Configura el comportamiento

Usa estos controles para definir la primera experiencia y el estilo de escritura del Agente:

* **Primer mensaje**: el mensaje que aparece cuando el visitante abre el chat. Puede incluir `{{first_name}}`, `{{last_name}}`, `{{full_name}}`, `{{email}}` o `{{phone}}`.
* **Estilo del agente**: reglas de texto libre sobre el tono, la redacción y lo que el Agente debe o no debe hacer.
* **Mensajes de ejemplo**: respuestas de muestra que enseñan la voz, el largo y el formato preferidos.
* **Capturar datos del lead**: solicita los campos de contacto elegidos antes de que el visitante pueda chatear.

La captura puede solicitar **Nombre**, **Apellido**, **Correo** y **Teléfono**. Selecciona solo los campos que el equipo necesita.

<Info>
  **Mensajes de ejemplo** enseñan al Agente cómo escribir. **Preguntas sugeridas** son opciones que el visitante puede seleccionar en la pantalla de inicio. Cumplen funciones distintas.
</Info>

## Configura el diseño

Los controles de diseño se agrupan en estas secciones visibles:

* **Identidad**: nombre del Agente, avatar, título del chat y subtítulo.
* **Pantalla de inicio**: saludo de dos líneas, título de la tarjeta de mensaje y hasta cuatro preguntas sugeridas.
* **Apariencia**: color de acento y forma redondeada o cuadrada.
* **Vista previa en vivo**: alterna entre **Inicio** y **Chat** para revisar el resultado antes de guardar.

El avatar acepta una URL pública o una imagen JPG, PNG o WebP de hasta 5 MB. El idioma del widget sigue el idioma configurado en el Agente.

## Agrega dominios permitidos

Abre **Instalación** y agrega los dominios de producción donde debe ejecutarse el widget.

* Ingresa un dominio como `example.com`, sin protocolo ni ruta.
* Usa un comodín como `*.example.com` si el mismo widget debe funcionar en ese dominio y sus subdominios.
* Puedes guardar hasta 50 entradas.

La clave de Chat web y su lista de **Dominios permitidos** pertenecen al espacio de trabajo. Cambiar la lista desde un Agente afecta a otros widgets que usan la misma clave del espacio de trabajo.

<Warning>
  Agrega dominios explícitos antes de publicar el widget. Una lista vacía de **Dominios permitidos** no bloquea actualmente el widget estándar, aunque el estado vacío del panel diga lo contrario. No uses una lista vacía como interruptor de apagado. La lista restringe las solicitudes cuando el navegador informa el dominio de origen, pero no debe ser el único control para información sensible.
</Warning>

## Usa la clave correcta

La sección **Instalación** muestra **Clave API**, **ID del agente** e **ID del cliente**. La clave del widget empieza con `nxr_pub_` y está diseñada para aparecer en código que recibe el navegador.

<Warning>
  Nunca la reemplaces por una clave REST que empiece con `nxr_live_`. Una clave `nxr_live_` es secreta y no debe quedar en HTML, JavaScript enviado al navegador, capturas ni repositorios públicos.
</Warning>

## Instala el widget alojado

La instalación básica no necesita npm. En **Fragmento de instalación**, usa **Copiar** para obtener los valores generados para el Agente actual. El fragmento tiene esta forma:

```html theme={null}
<script async src="https://chat.getnexor.ai/w.js" data-workflow="..." data-key="nxr_pub_..."></script>
```

<Steps>
  <Step title="Copia desde Nexor">
    Copia el **Fragmento de instalación** completo desde **Instalación** en el Agente. No reutilices IDs ni claves de otro espacio de trabajo.
  </Step>

  <Step title="Pégalo en el sitio">
    Agrega el script justo antes de la etiqueta de cierre `</body>` en cada página que debe mostrar el widget.
  </Step>

  <Step title="Publica y prueba">
    Publica el sitio, ábrelo en un dominio permitido e inicia una conversación real. Confirma el botón del chat, la pantalla de inicio, la captura de datos y la respuesta del Agente.
  </Step>
</Steps>

Esta página cubre el script alojado que se copia desde Nexor. No define el SDK de npm ni el contrato de la API REST.

## Solución de problemas

### No aparece el botón del chat

Confirma que el script esté en la página renderizada, que los valores de `data-workflow` y `data-key` provengan de la misma configuración del Agente y que la clave empiece con `nxr_pub_`. Confirma también que Chat web no esté desactivado para el Agente.

### El sitio no está autorizado

Agrega el dominio exacto de producción en **Dominios permitidos**. No incluyas `https://`, puerto ni ruta. Agrega un comodín si los subdominios necesitan acceso.

### Los cambios no aparecen en el widget

Selecciona **Guardar cambios**, recarga el sitio sin una página antigua en caché y abre una sesión nueva del widget. Usa **Vista previa en vivo** para confirmar que Nexor guardó el diseño esperado.

### Nexor no puede cargar la clave de Chat web

Recarga los Ajustes del Agente e inténtalo de nuevo. No sustituyas la clave pública por una clave REST mientras la primera no esté disponible.

<Card title="Revisa los Ajustes del Agente" icon="settings" href="/docs/es/guides/agents/settings">
  Revisa cómo Chat web se relaciona con el idioma, el prompt y los demás canales del Agente.
</Card>
