Widget de JavaScript

El widget de JavaScript añade una burbuja de chat flotante a tu sitio. El código generado contiene dos etiquetas de script; copia ambas desde la pestaña Canales de tu agente.

Configuración rápida

1. Abre Canales → Incrustar en sitio web en tu agente
2. Selecciona Widget de chat y activa el canal
3. Copia el código generado completo, incluidas las dos etiquetas de script
4. Pégalo en tu sitio web antes de </body>
5. Guarda y actualiza tu sitio web

La primera etiqueta prepara la cola de comandos de Agentkit. La segunda carga el widget con el ID de tu agente y la URL de script configurada. Mantén juntas ambas etiquetas y sus valores.

Configuración del widget

Posición

De forma predeterminada, el widget aparece en la esquina inferior derecha. Cambia la posición en los ajustes de Diseño.

Colores

Los colores del widget siguen los ajustes de tema de tu agente. Personalízalos en la pestaña Diseño.

Móvil

El widget es totalmente adaptable y funciona en dispositivos móviles automáticamente.

Archivos adjuntos

Los visitantes pueden adjuntar documentos, hojas de cálculo, imágenes y archivos de texto directamente desde el widget. Los archivos adjuntos se usan solo como contexto temporal de la conversación y no se agregan a las fuentes de entrenamiento de tu agente.

Los formatos admitidos incluyen archivos PDF, Word, Excel, HTML, TXT, Markdown, JSON, CSV, PNG, JPG, WEBP y GIF. Los visitantes pueden adjuntar hasta 3 archivos por mensaje, con un límite de 10 MB por archivo. Los PDF se procesan hasta las primeras 20 páginas para que las respuestas sean rápidas y confiables.

Atributos de datos

El widget usa atributos de datos para su configuración:

Ubicación

Dónde agregar el código

Pega las dos etiquetas de script generadas antes de </body>:

<!DOCTYPE html>
<html>
<head>
  <!-- Your head content -->
</head>
<body>
  <!-- Your website content -->

  <!-- Paste both script tags from Channels > Website embed here -->
</body>
</html>

Aplicaciones de una sola página

En las SPA, añade el código generado completo a la plantilla HTML principal o al archivo index.

Varias páginas

Añade el mismo código generado a cada página donde quieras mostrar el widget, o colócalo en una plantilla de diseño compartida.

Probar tu instalación

Después de agregar el código:

1. Visita tu sitio web en un navegador
2. Busca la burbuja de chat (abajo a la derecha de forma predeterminada)
3. Haz clic para abrir el chat
4. Envía un mensaje de prueba
5. Verifica que la respuesta sea correcta

Solución de problemas

El widget no aparece:

• Comprueba en el código fuente renderizado que ambas etiquetas de script estén antes de </body>
• Verifica que el ID del agente sea correcto
• Borra la caché del navegador
• Revisa la consola del navegador en busca de errores

Posición incorrecta:

• Revisa los ajustes de Diseño
• Busca conflictos de CSS

No responde:

• Asegúrate de que exista contenido de entrenamiento
• Revisa los límites de mensajes de tu plan
• Pruébalo primero en el Playground

Restricciones de dominio

Si configuraste dominios permitidos:

• El widget solo se carga en los dominios aprobados
• En los demás sitios no aparece ningún widget (no se muestra ningún error)

Configura dominios →

Rendimiento

El widget está optimizado para tener un impacto mínimo:

• Se carga de forma asíncrona (atributo async)
• Tamaño de bundle reducido
• No bloquea el renderizado
• Carga la interfaz de chat de forma diferida (lazy loading)

Conflictos de estilos

El widget usa estilos aislados y no debería entrar en conflicto con tu sitio. Si ves problemas:

1. Revisa si hay selectores CSS globales
2. Busca reglas con !important
3. Contacta a soporte si los problemas persisten

Quitar el widget

Para quitarlo:

1. Elimina ambas etiquetas de script generadas de tu HTML
2. Borra cualquier caché
3. El widget desaparece de inmediato

Próximos pasos

• Personaliza la apariencia en los ajustes de Diseño
• Configura las restricciones de dominio
• Agrega mensajes sugeridos