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

# Webchat

> Configura el canal Webchat para integrar un chat embebido y personalizable en tu sitio web.

## Visión general

El **canal Webchat** permite integrar un chat embebido y completamente personalizable en cualquier sitio web. Desde aquí puedes configurar su apariencia, comportamiento y orígenes permitidos, además de obtener el código de integración para colocarlo en tu página.

## Paso 1: Acceder a la configuración

1. Ve a **Canales** en el menú principal.
2. Haz clic en **Configurar canal**.
3. En la pestaña **Inagent**, selecciona la opción **Webchat**.

## Paso 2: Configuración básica

En la pantalla de configuración encontrarás los siguientes campos principales:

* **Equipo asociado**: elige el equipo de agentes virtuales que atenderá las conversaciones.
* **Descripción del canal**: texto descriptivo interno.
* **Nombre del chat (Título)**: nombre visible para los usuarios en la ventana del chat.
* **Mensaje inicial**: texto opcional para iniciar la conversación automáticamente con un mensaje estático del asistente.

## Paso 3: Apariencia del chat

Personaliza cada elemento visual para adaptar el chat a la identidad de tu marca.

### Avatar y cabecera

* **Avatar del chat**: imagen que se mostrará en el encabezado.
* **Nombre del avatar**: nombre público que acompañará al avatar.
* **Incluir nombre en la burbuja**: muestra u oculta el nombre junto al avatar en los mensajes.

### Colores y tema

* **Color de links y botones**: color principal de enlaces y botones de acción.
* **Tema**: selecciona entre modo **light** o **dark**.
* **Fondo de encabezados**: color de fondo de la cabecera del chat.
* **Color de texto de encabezados**: color de la tipografía en la cabecera.
* **Tamaño de texto**: elige entre **estándar** o **grande**.

## Paso 4: Secciones de inicio y preguntas sugeridas

El Webchat puede incluir elementos previos al inicio de la conversación:

* **Secciones de inicio**: bloques con enlaces o información que se muestran antes de comenzar el chat.
* **Preguntas sugeridas**: frases predefinidas que se presentan en forma de burbuja para que el usuario comience rápidamente con una de ellas.

## Paso 5: Burbuja flotante

Configura la burbuja que lanza el chat desde la página web:

* **Ubicación**: posición en la pantalla (esquina inferior derecha o izquierda).
* **Imagen del botón**: ícono o imagen del disparador.
* **Color del botón**: color principal de la burbuja flotante.
* **Tamaño del botón**: elige entre tamaños estándar o ampliados según el diseño de tu sitio.

## Paso 6: Orígenes permitidos

Define los dominios desde los cuales se podrá abrir el Webchat:

* Asegura que solo las páginas autorizadas puedan utilizar tu canal.
* Ingresa las URLs completas (por ejemplo: `https://www.tusitio.com`).

## Paso 7: Publicar e integrar

1. Haz clic en **Guardar** para aplicar la configuración.
2. Una vez guardado, Inagent generará automáticamente el **código de integración**.
3. Copia y pega este código en el HTML de la página web donde desees que aparezca el chat.

<Callout type="tip">
  El código de integración se puede usar en múltiples páginas del mismo dominio, siempre que estén incluidas en la lista de orígenes permitidos.
</Callout>

***

## Buenas prácticas

* **Prueba el diseño en diferentes dispositivos** para verificar que los tamaños, colores y contrastes sean correctos.
* **Usa un mensaje inicial breve y claro** para captar la atención del usuario.
* **Incluye preguntas sugeridas** para guiar a los visitantes y reducir el tiempo de respuesta.
* **Mantén la lista de orígenes actualizada** si tu sitio web cambia de dominio o estructura.

***

Con estas configuraciones, tu Webchat estará listo para brindar **experiencias de conversación en tiempo real**, completamente integradas con las herramientas, reportes y supervisión de Inagent.
