Widget de JavaScript
Agrega el widget de chat a cualquier sitio web con una simple etiqueta de script.
El widget de JavaScript es la forma más simple de agregar tu agente a cualquier sitio web. Una sola etiqueta de script crea una burbuja de chat flotante en la que los visitantes pueden hacer clic para iniciar una conversación.
Configuración rápida
- Ve a la pestaña Publicar de tu agente
- Selecciona Widget de chat (opción predeterminada)
- Copia el snippet de JavaScript que se muestra
- Pégalo en tu sitio web antes de
</body> - Guarda y actualiza tu sitio web
La burbuja de chat aparece en la esquina de tu página. Tu snippet incluye el ID específico de tu agente y la URL de script correcta.
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:
| Atributo | Descripción | Predeterminado |
|---|---|---|
data-chatbot | Obligatorio. El ID de tu agente (incluido en tu código de incrustación) | - |
Ubicación
Dónde agregar el código
Agrega el script justo antes de </body> para obtener el mejor rendimiento:
<!DOCTYPE html> <html> <head> <!-- Your head content --> </head> <body> <!-- Your website content --> <!-- Paste your embed code from Chatbot > Publish here --> </body> </html>
Aplicaciones de una sola página
En las SPA, agrega el script a tu plantilla HTML principal o a tu archivo index.
Varias páginas
Agrega el mismo script a cada página donde quieras que aparezca el widget. O agrégalo a la plantilla de diseño de tu sitio.
Probar tu instalación
Después de agregar el código:
- Visita tu sitio web en un navegador
- Busca la burbuja de chat (abajo a la derecha de forma predeterminada)
- Haz clic para abrir el chat
- Envía un mensaje de prueba
- Verifica que la respuesta sea correcta
Solución de problemas
El widget no aparece:
- Comprueba que el script esté 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)
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:
- Revisa si hay selectores CSS globales
- Busca reglas con
!important - Contacta a soporte si los problemas persisten
Quitar el widget
Para quitarlo:
- Elimina la etiqueta de script de tu HTML
- Borra cualquier caché
- 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