Widget web

La página alojada en https://vatio.ai/w/acme funciona después de publicar. Para embeber el chat en tu propio sitio web, agrega su origen a vatio.yml:

widget:
  allowed_origins:
    - https://acme.com
    - http://localhost:3000
  accent_color: "#3355FF"
  about: Ask Acme Support about products and orders.
  greeting: How can I help?
  suggestions:
    - What does Acme sell?
    - Where is my order?

Los orígenes son valores exactos scheme://host[:port], sin ruta ni comodín. Una lista vacía bloquea los embeds externos; las páginas alojadas por Vatio siguen funcionando. Pushea el manifiesto, publica el agente si hace falta, y crea un token:

vatio push
vatio publish
vatio tokens create --env live --label website

Copia el token vatpub_ que devuelve en tu página:

<script async src="https://cdn.vatio.ai/v1/widget.js"
        data-workspace="acme"
        data-token="vatpub_REPLACE_ME"></script>

Los tokens publicables están pensados para el código fuente de la página y eligen un workspace y un entorno. No autorizan desplegar ni acceder a la bandeja del workspace. Nunca uses un token de desarrollador vat_ en un navegador.

vatio widget reporta la configuración del servidor y los prefijos de tokens existentes. vatio tokens list lista los tokens; vatio tokens revoke PREFIX revoca uno. La revocación impide nuevos chats y listados de conversaciones con ese token; las credenciales de chat existentes siguen válidas hasta expirar.

Configuración del widget

Los valores visuales se resuelven en este orden: override de la página, configuración del workspace, default de la plataforma. Usa widget en vatio.yml para los defaults compartidos y atributos data-* para una página específica.

Clave del manifiesto	Atributo de página	Valor / default
accent_color	data-accent	Color de marca #RRGGBB
accent_ink	data-accent-ink	#RRGGBB; si no, contraste automático
surface, ink, muted, line	data-surface, data-ink, data-muted, data-line	Colores de tema #RRGGBB
scheme	data-scheme	auto, light o dark; default auto
position	data-position	right o left; default right
font	data-font	Stack de fuentes CSS; inherit usa la del sitio
radius	data-radius	Largo CSS como 16px; default 16px
title	data-title	Hasta 200 caracteres; default, el nombre del agente
greeting	data-greeting	Hasta 200 caracteres; default, texto localizado
suggestions	data-suggestions	Hasta cuatro prompts de 200 caracteres; el atributo usa texto separado por pipes
about	data-about	Hasta 2.000 caracteres de texto visible al visitante
locale	data-locale	en, es o pt; default en
logo	—	PNG, JPEG, WebP o GIF relativo al workspace, hasta 2 MB
allowed_origins	—	Orígenes autorizados a usar la API pública

about se le muestra a los visitantes; business.summary entrega contexto al modelo. locale define las etiquetas de interfaz; el idioma del agente sigue a la conversación. Una clave de widget desconocida falla la validación.

Por ejemplo, data-suggestions="Products|Track an order" define dos prompts.

Chat a página completa

Para un chat a página completa, usa un contenedor y atributos específicos de la página:

<div id="chat" style="height:100dvh"></div>
<script async src="https://cdn.vatio.ai/v1/widget.js"
        data-workspace="acme" data-token="vatpub_REPLACE_ME"
        data-display="page" data-mount="#chat"></script>

data-display es bubble por defecto. data-mount elige el contenedor en modo página y por defecto es el body. Estos atributos no van en el manifiesto. El widget normalmente espera la carga de la página y un momento de inactividad; data-eager="true" lo arranca de inmediato.

Para decirle al agente quién tiene la sesión iniciada, renderiza un token de visitante en el mismo tag — ver Sesiones y canales. Para armar tu propia UI en vez de embeber esta, usa el SDK de navegador.