# Chat web

> Diseña el chat de tu web en el Estudio de Widget, publícalo, instálalo con una línea de código y comprueba que responde.

Source: https://docs.komplian.es/channels/web-widget

Dónde: Agente IA → Canales → Widget web → Estudio de Widget
Quién: Propietarios y administradores.

El chat web es una ventana de chat en tu web que atiende el agente de IA. Lo diseñas en el **Estudio de Widget**. No cuenta en el límite de canales de tu plan.

1. Las pestañas **Estilo**, **Contenido** e **Instalar**.
2. **Idioma del widget**: solo los textos fijos del chat.
3. **Nombre del agente**, y después el avatar y el logo.
4. La vista previa en directo, con **Inicio** y **Chat**.
5. **Guardar cambios publicados** y **Despublicar de las webs**.

## Publicar el chat en tu web

### 1. Diséñalo
En la pestaña **Estilo**, elige el color, el lanzador y la posición.

### 2. Escribe sus textos
En la pestaña **Contenido**, pon nombre al agente, añade su imagen y tu logo, escribe el saludo y el mensaje de bienvenida, añade acciones rápidas y rellena **URL de tu política de privacidad**.

### 3. Publica
Pulsa **Publicar widget**. Una ventana muestra tu código de instalación.

### 4. Instala el código
Pulsa **Copiar código** y pega la línea antes de la etiqueta `</body>` de cada página donde quieras el chat.

### 5. Comprueba que funciona
Abre tu web en una ventana privada y escribe una pregunta. La conversación aparece en la [Bandeja inteligente](https://docs.komplian.es/inbox/conversations) con el canal **Widget web**.

> [!WARNING]
> **URL de tu política de privacidad** es obligatoria para publicar. Sin ella, **Publicar widget** no funciona.

## Opciones de estilo

| Opción | Qué hace |
| --- | --- |
| **Color de marca** | El color principal del chat. |
| **Lanzador** | El botón que abre el chat: **Burbuja** o **Avatar**. |
| **Posición** | Dónde queda el lanzador en la página: **Izquierda** o **Derecha**. |

## Opciones de contenido

| Opción | Qué hace |
| --- | --- |
| **Idioma del widget** | **Auto**, **Español** o **English**. Solo cambia los textos fijos del chat. El agente siempre responde en el idioma del cliente. |
| **Nombre del agente** | El nombre que aparece en la cabecera del chat. |
| **Avatar del agente** | La imagen del agente. |
| **Logo de empresa** | Se muestra en la pantalla de inicio del chat. |
| **Saludo de inicio** | Texto pequeño sobre el titular de la pantalla de inicio del chat. Se guarda tal como lo escribes. |
| **Texto del encabezado** | El titular de la pantalla de inicio del chat. |
| **Mensaje de bienvenida** | El primer mensaje del agente. |
| **Acciones rápidas** | Botones en la pantalla de inicio, hasta 6. Cada uno tiene un icono, un texto y un tipo: **Enviar mensaje** o **Abrir enlace**. Puedes escribir cada texto en inglés y en español. |
| **Respuestas sugeridas** | Respuestas cortas que el visitante puede tocar. **Mostrar respuestas sugeridas** las enciende y **Sugerencias visibles** fija cuántas se ven. Las configuras para **Conversaciones generales**, **Páginas de producto** y **Carrito o checkout**. |
| **Aviso de protección de datos** | Se muestra encima del campo de texto hasta que el visitante escribe: con quién habla, quién responde de sus datos y dónde está la política. El texto del aviso es opcional. |
| **Quitar marca Komplian** | Oculta la firma «Creado por Komplian». Planes Pro y Enterprise. |

Imágenes: JPG, PNG o WebP, de hasta 2 MB. También puedes indicar la dirección de una imagen.

Puedes desactivar el aviso de protección de datos. Entonces tu web tiene que informar a los visitantes de la IA y del uso de sus datos.

## Guardar y publicar

| Botón | Qué hace |
| --- | --- |
| **Guardar borrador** | Guarda tus cambios sin mostrarlos en tu web. |
| **Publicar widget** | Pone el chat en vivo por primera vez. |
| **Guardar cambios publicados** | Actualiza al momento el chat que ya está en tu web. |
| **Despublicar de las webs** | Quita el chat de todas las webs donde está instalado el código. |

## El código de instalación

La pestaña **Instalar** muestra **Código de instalación** después de publicar. Antes, te pide que publiques primero.

```html
<script src="https://api.komplian.com/widget.js" data-widget-id="TU_ID_DE_WIDGET" async></script>
```

**Copiar código** copia la línea con el ID de tu widget ya puesto. Para fijar el idioma del chat, añade `data-language="es"` o `data-language="en"`. Para desarrolladores, mira la [API de JavaScript](https://docs.komplian.es/api/widget).

> [!TIP]
> Si el chat no aparece, comprueba que el widget está publicado y que el código está en la página que estás viendo.

## Relacionado

- [Todos los canales](https://docs.komplian.es/channels/overview): Los demás canales y sus límites.
- [Personalidad y tono](https://docs.komplian.es/ai-agent/persona): El estilo del agente y la longitud de sus respuestas.
- [Probar el agente](https://docs.komplian.es/ai-agent/test-agent): Prueba el agente antes de publicar.
- [API JavaScript del chat web](https://docs.komplian.es/api/widget): Controla el chat desde el código de tu web.