DOCS
Apparence
Ce que la page host passe en JS gagne. Si elle ne passe rien, le widget prend les presets sveda.yaml. Default : encre et cadre pointillé.
Apparence
Ce que la page host passe en JS gagne. Si elle ne passe rien, le widget prend les presets sveda.yaml. Default : encre et cadre pointillé.
appearance du JS host ou du JSON de session recouvre les presets sveda.yaml. Sans payload host, le look ink à cadre pointillé reste.
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