DOCS
Erscheinungsbild
Was die Host-Seite in JS übergibt, gewinnt. Fehlt es, gilt sveda.yaml. Default ist Tinte und gestrichelter Rahmen.
Erscheinungsbild
Was die Host-Seite in JS übergibt, gewinnt. Fehlt es, gilt sveda.yaml. Default ist Tinte und gestrichelter Rahmen.
appearance aus dem Host-JS oder der Session-JSON überlagert sveda.yaml. Ohne Host-Payload bleibt der Standard-Ink-Look mit gestricheltem Rahmen.
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