DOCS
Apariencia
Lo que la página host pasa en JS gana. Si no pasa nada, el widget usa sveda.yaml. Default es tinta y marco discontinuo.
Apariencia
Lo que la página host pasa en JS gana. Si no pasa nada, el widget usa sveda.yaml. Default es tinta y marco discontinuo.
appearance del JS del host o del JSON de sesión cubre sveda.yaml. Sin payload del host se queda el look ink con marco discontinuo.
Host JS wins
Pass
appearance
from the page that embeds the chat. Fields the host sends overlay the runtime. That includes
createSveda({ appearance }),
the
appearance
key on
POST /sveda/session,
and
sveda-host.js.
A named
preset
without
tokens
drops stored tokens so the host palette applies.
import { createSveda } from '@sveda-ai/vue'
app.use(createSveda({
endpoints: { stream: origin + '/sveda/stream' },
headers: { 'x-sveda-embed-token': token },
appearance: {
preset: 'lms',
radius: '8px',
launcher: { label: 'HELP' },
},
}))import { createSveda } from '@sveda-ai/vue'
app.use(createSveda({
endpoints: { stream: origin + '/sveda/stream' },
headers: { 'x-sveda-embed-token': token },
appearance: {
preset: 'lms',
radius: '8px',
launcher: { label: 'HELP' },
},
})) {
"origin": "http://127.0.0.1:8787",
"token": "sveda_embed_…",
"expires_in": 3600,
"appearance": {
"preset": "ocean"
}
}{
"origin": "http://127.0.0.1:8787",
"token": "sveda_embed_…",
"expires_in": 3600,
"appearance": {
"preset": "ocean"
}
} Nothing passed → sveda.yaml
Omit
appearance,
or send
null
/
{}.
The widget loads
GET /sveda/embed/config
and uses the
appearance
block in
sveda.yaml.
Saved empty settings keep
default
— black brand, 0px radius, dashed frame — the same chat as the landing and playgrounds.
Iframe
/sveda/embed
has no host JS, so it is always the runtime look.
appearance:
preset: ocean
radius: 8px
launcher:
label: HELPappearance:
preset: ocean
radius: 8px
launcher:
label: HELP <sveda-chat session="/sveda/session"></sveda-chat><sveda-chat session="/sveda/session"></sveda-chat>
Named presets
Palettes live in
@sveda-ai/chat
as
SVEDA_APPEARANCE_PRESETS
and are re-exported by the
Vue, React, Svelte, and Solid
packages.
Dark tokens ship with every preset.
appearance.theme: "dark"
forces dark. Custom HSL still goes in
tokens
/
dark_tokens.
default ink, 0px, dashed frame — landing and playgrounds
lms Scorpio purple, 8px
ocean product blue
forest teal
sunset coral
sand paper and warm inkdefault ink, 0px, dashed frame — landing and playgrounds lms Scorpio purple, 8px ocean product blue forest teal sunset coral sand paper and warm ink