Widget embebido (v2)
El widget v2 es un script autónomo de ~20 KB que añade un botón flotante con chat a cualquier web. Usa Shadow DOM, por lo que no colisiona con los estilos de tu página.
Instalación rápida (snippet de 3 líneas)
Pega este snippet antes de </body>:
<script
src="https://rag.art/widget-v2.js"
data-bot-id="<tu-bot-id>"
async
></script><tu-bot-id> lo encuentras en /bots/<id>?tab=embed. Con eso ya funciona: aparece una burbuja en la esquina inferior derecha que, al hacer clic, abre el chat.
Instalación como Web Component
Si prefieres controlar cuándo aparece el chat:
<ragart-widget bot-id="<tu-bot-id>"></ragart-widget>
<script src="https://rag.art/widget-v2.js" defer></script>Puedes añadir atributos adicionales:
position="bottom-left" | "bottom-right"— por defectobottom-right.color="#a855f7"— sobrescribe el accent color del bot.greeting="¡Hola! ¿En qué te ayudo?"— sobrescribe el saludo.
Personalización desde el dashboard
En /bots/<id>?tab=embed configuras:
- Accent color — el color principal del botón y los bubbles.
- Tema forzado (
auto,light,dark) — por defecto sigue elprefers-color-schemedel visitante. - White-label (solo planes Pro+): oculta el "Powered by rag.art" del pie del widget.
Restricción por dominio (allowlist)
Para evitar que terceros incrusten tu bot:
/bots/<id>?tab=security.- Añade tus dominios:
acme.com,www.acme.com,app.acme.com. - El endpoint
/api/chat/<bot-id>devuelve 403 si la cabeceraOriginno coincide.
Si dejas la allowlist vacía, el bot acepta peticiones desde cualquier origen (útil para widgets embebidos en Notion, Canva, etc., pero con más riesgo de abuso).
CSP — Content Security Policy
Si tu web usa CSP estricta, añade script-src https://rag.art y connect-src https://rag.art.
Rendimiento
- El script es lazy: no se carga el iframe de chat hasta que el usuario clica la burbuja.
- El chat streamea los tokens vía Server-Sent Events — la primera palabra aparece en <500 ms con un bot indexado.
- Cache-Control aggressive en el
.js(1 año con hash); invalidación por versión.