# Widget web

> Personaliza el chat del agente de Agentclic, copia el código de instalación y pégalo en tu web para que el agente atienda a tus visitantes.

URL: https://agentclic.com/docs/canales/widget-web
Última revisión: 2026-11-02

El widget web es el chat del agente que aparece como un botón flotante en una esquina de tu página. Se personaliza en la pestaña **Widget** del agente y se instala copiando el **Código de instalación** y pegándolo en el HTML de tu web, antes del cierre de `</body>`.

## Antes de empezar

- El agente debe estar **Activo** para responder (ver [Crea tu primer agente](https://agentclic.com/docs/primeros-pasos/crear-tu-primer-agente#estados-del-agente)).
- En la pestaña **Canales**, el **Widget Web** debe estar **Activo**. Ver [Canales del agente](https://agentclic.com/docs/canales/vision-general#activar-o-pausar-un-canal).
- Necesitas poder editar el HTML de la web, o un apartado para añadir código (en WordPress y en la mayoría de creadores de webs hay uno para scripts del pie de página).

## Personalizar el widget

Entra en el agente y abre la pestaña **Widget** (también llegas desde **Canales › Widget Web › Configurar**). A la derecha tienes una **Vista previa** en la que puedes escribir al agente de verdad.

| Campo | Qué hace | Por defecto |
|---|---|---|
| **Título** | Cabecera de la ventana del chat. | El nombre del agente |
| **Mensaje de bienvenida** | Primer mensaje que ve el visitante al abrir el chat. | «Hola 👋 Soy tu asistente. ¿Qué necesitas?» |
| **Texto junto al botón flotante** | Bocadillo que aparece al lado del botón cuando el chat está cerrado. Déjalo vacío para no mostrarlo. | «¿Hablamos? Estoy aquí para ayudarte» |
| **Icono del botón flotante** | Chat, Burbuja, Ayuda, Brillo, Bot, Soporte o Rayo. | Chat |
| **Color principal** | Color del botón, la cabecera y los mensajes del visitante. Elige uno de la lista o cualquier otro con el selector. | Azul |
| **Posición** | **Inferior derecha** o **Inferior izquierda**. | Inferior derecha |

## Instalar el widget en tu web

1. Cuando el aspecto te guste, pulsa **«Copiar»** en **Código de instalación**. Verás «Snippet copiado».
2. Pega el código en el HTML de tu web, justo antes de `</body>`, en todas las páginas donde quieras el chat.
3. Publica los cambios de tu web y abre una página: verás el botón flotante.

El código tiene esta forma (el tuyo trae ya los datos de tu agente y tu configuración):

```
<script src="{tu-url}/widget.js"
        data-agent="{id-del-agente}"
        data-color="#2563EB"
        data-position="bottom-right"
        data-icon="chat"
        data-title="¿En qué te ayudo?"
        data-welcome="Hola 👋 Soy tu asistente. ¿Qué necesitas?"
        data-launcher-text="¿Hablamos? Estoy aquí para ayudarte"
        defer></script>
```

> **Importante:** El aspecto va dentro del código. Si cambias el título, el color o cualquier otro campo, **vuelve a copiar el código y sustitúyelo** en tu web: el que ya estaba pegado sigue mostrando la configuración anterior.

### Probarlo en una web antes de instalarlo

Pulsa **«Probar en sitio web»**, escribe la **URL del sitio** y pulsa **«Abrir con widget»**. Se abre una ventana nueva con esa página y el chat encima. Algunas webs no permiten mostrarse dentro de otra página; en ese caso prueba desde la vista previa o instálalo directamente.

## Qué ve el visitante

- Un botón flotante con el icono y el color elegidos y, si lo has configurado, el bocadillo de texto.
- Al pulsarlo, una ventana con el título, el mensaje de bienvenida y un campo «Escribe tu mensaje…».
- Un botón 📎 para **adjuntar archivos**: audios, imágenes, vídeos, PDF, documentos de Word, hojas de Excel y textos, de hasta 15 MB cada uno.

La conversación se recuerda en el navegador del visitante: si vuelve más tarde a la web, sigue en el mismo hilo.

**Detalles técnicos**
- El código funciona con `defer`, `async` o insertado de forma dinámica (por ejemplo con un gestor de etiquetas).
- El atributo `data-agent` es obligatorio; los demás son opcionales y, si faltan, se usan valores por defecto.
- La configuración de la pestaña Widget se recuerda en el navegador desde el que la editas. Si la abres desde otro equipo, revisa los campos antes de copiar el código.
- Los contactos que llegan por el widget aparecen en el CRM con el origen «Widget web».


## Problemas frecuentes

### No aparece el botón en mi web

Comprueba que has publicado los cambios de la web, que el código está antes de `</body>` y que no lo ha modificado tu editor (algunos convierten las comillas). Si usas una caché o un optimizador de scripts, vacía la caché.

### El chat contesta «Hemos recibido tu mensaje. Un agente humano continuará la conversación.»

El agente no ha respondido en automático. Suele pasar porque el agente no está **Activo**, el canal **Widget Web** está **En pausa**, el mensaje llega fuera del [horario del canal](https://agentclic.com/docs/canales/vision-general#horario-propio-de-un-canal) o una persona ha tomado la conversación. Revisa la pestaña **Canales** y el estado del agente.

### He cambiado el color y en mi web sigue igual

El aspecto viaja en el código. Copia de nuevo el **Código de instalación** y sustituye el anterior.