Web widget

The hosted page at https://vatio.ai/w/acme works after publishing. To embed chat in your own website, add its origin to 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?

Origins are exact scheme://host[:port] values, with no path or wildcard. An empty list blocks external embeds; Vatio's own hosted pages still work. Push the manifest, publish the agent if needed, and create a token:

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

Copy the returned vatpub_ token into your page:

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

Publishable tokens are intended for page source and select one workspace and environment. They do not authorize deployment or access to the workspace inbox. Never use a vat_ developer token in a browser.

vatio widget reports the server's configuration and existing token prefixes. vatio tokens list lists tokens; vatio tokens revoke PREFIX revokes one. Revocation prevents new chats and conversation lists with that token; existing chat credentials remain valid until expiry.

Widget configuration

Visual values resolve in this order: page override, workspace setting, platform default. Use widget in vatio.yml for shared defaults and data-* attributes for a specific page.

Manifest key	Page attribute	Value / default
accent_color	data-accent	#RRGGBB brand color
accent_ink	data-accent-ink	#RRGGBB; otherwise automatic contrast
surface, ink, muted, line	data-surface, data-ink, data-muted, data-line	#RRGGBB theme colors
scheme	data-scheme	auto, light, or dark; default auto
position	data-position	right or left; default right
font	data-font	CSS font stack; inherit uses the host's font
radius	data-radius	CSS length such as 16px; default 16px
title	data-title	Up to 200 characters; defaults to the agent's name
greeting	data-greeting	Up to 200 characters; defaults to localized copy
suggestions	data-suggestions	Up to four prompts, 200 characters each; attribute uses pipe-separated text
about	data-about	Up to 2,000 characters of visitor-facing copy
locale	data-locale	en, es, or pt; default en
logo	—	Workspace-relative PNG, JPEG, WebP, or GIF, up to 2 MB
allowed_origins	—	Origins permitted to use the public API

about is displayed to visitors; business.summary supplies model context. locale sets interface labels; the agent's language follows the conversation. Unknown widget keys fail validation.

For example, data-suggestions="Products|Track an order" sets two prompts.

Full-page chat

For a full-page chat, use a container and page-specific attributes:

<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 defaults to bubble. data-mount selects the container in page mode and defaults to the body. These attributes do not belong in the manifest. The widget normally waits for page load and idle time; data-eager="true" starts it immediately.

To tell the agent who is signed in, render a visitor token onto the same tag — see Sessions and channels. To build your own UI instead of embedding this one, use the browser SDK.